DEV Community: Prerana Nawar

Reviewing Eloquent Javascript #Chpt5

Prerana Nawar — Fri, 11 Dec 2020 05:52:47 +0000

In this blog, I will write on my learnings from the Eloquent Javascript Book's Chapter 4: Data Structures: Objects and Arrays.

Here's the PDF for Eloquent Javascript Book's Chapter 5.

Back in Days of Programming
Abstraction
What is Functional Programming
First-Order Function.
Abstracting repetition.
Higher-order functions
- Array.prototype.forEach()
- Array.prototype.filter()
- Array.prototype.map()
- Array.prototype.reduce()
- Array.prototype.sort()

Back in Days of Programming

In the early days a lot of the programming languages were what we would call procedural. They would go from top to bottom and those is kind of programs were easy to understand but as your code gets more and more complex then it gets a bit difficult because it's hard to know when something goes wrong or what exactly went wrong?

So in a lot of places complexity is always the enemy. As humans we have pretty capable brains but we can only hold so much information in it at one time. The more complex a program gets the more likely it is that it will crash and it will have problems and it.
So along came this concept of Object Oriented Programming and a lot of people really loved the concept. So languages that became really big such as Java, Swift or in fact Javascript which we're working with, are all Object Oriented Programming languages.
In object-oriented programming, abstraction is one of the four central principles (along with encapsulation, inheritance, and polymorphism).

Abstraction:

Abstraction is the process of showing only essential/necessary features ( displaying only the important functionality to the users ) of an entity/object to the outside world and hide the other irrelevant information (i.e the implementation details).

For example to open your TV we only have a power button, It is not required to understand how infra-red waves are getting generated in TV remote control.
Abstraction helps us to reduce code duplication, what abstraction is all about being able to build more complex systems by creating smaller pieces that have a defined job or defined role so that you can actually manage the complexity.

What is Functional Programming

In most simple term, Functional Programming is a form of programming in which you can pass functions as parameters to other functions and also return them as values. In functional programming, we think and code in terms of functions.
JavaScript, Haskell, Clojure, Scala, are some of the languages that implement functional programming. Functional Programming is also using in AI and Machine Learning.

First-Order Function:

First order functions are functions that take data as input and then utilize ( work ) on that data. These functions are used to store behaviors that act on data alone. These functions in Javascript are treated like any other variable.

Example:


 function greet(text) {
   console.log(text);
 }
 greet("Good Morning");   
 // Good Morning              

 var talk = greet;  // Storing in a variable
 talk("Hi");

Example 2:


 var sum = function(num1, num2) {
   return num1 + num2;
 }; 

 console.log(sum(10, 20));
 // 30

Abstracting repetition:

Abstracting repetition is nothing but we will "abstract" the code that is repeating (running number of times) in a function.

Example: For loops are used when we are doing something number of times.


 for (let i = 0; i < 10; i++) {
   console.log(i);
 }

Your we are consoling ( repeating ) the counter variable i 10 number of times.

So let's abstract it for looping through the variable i for "n" number of times.


 function repeatLog(n) {
   for (let i = 0; i < n; i++) {
     console.log(i);
   }
 }

Example 2:


 function repeat(n, action) {
   for (let i = 0; i < n; i++) {
     action(i);
   }
 }

 let labels = [];
  repeat(5, i => {
    labels.push(`Unit ${i + 1}`);
 });
 console.log(labels);
 // → ["Unit 1", "Unit 2", "Unit 3", "Unit 4", "Unit 5"]

To explain what's happening first we will make this function a bit more readable.


 function repeat(n, action) {
   for (let counter = 0; counter < n; counter++) {
     action(counter);
   }
 }

 let labels = [];
 repeat(5, function(num){                  //Here, we are calling repeat() function
        labels.push(`Unit ${num + 1}`);
 });
 console.log(labels);
 // → ["Unit 1", "Unit 2", "Unit 3", "Unit 4", "Unit 5"]

When calling the repeat function we pass two parameters to it n the number till the loop will run and action that is the function that will a*dd elements in the variable* label.

So the repeat function will look something like this


 function repeat(5, action) {
   for (let counter = 0; counter < 5; counter++) {
     function(counter){                  
           labels.push(`Unit ${num + 1}`);
     };
   }
 }

After that, the loop will run till counter is less that 5 i.e. 4 .


 Iteration 0: action(0) -> labels.push(`Unit ${0 + 1}`);
 Iteration 1: action(1) -> labels.push(`Unit ${1 + 1}`);
 Iteration 2: action(2) -> labels.push(`Unit ${2 + 1}`);
 Iteration 3: action(3) -> labels.push(`Unit ${3 + 1}`);
 Iteration 4: action(4) -> labels.push(`Unit ${4 + 1}`);

Higher-order functions

Higher-order functions are functions that either take a function as an argument or return a function after execution. This is extremely important because it means that programmers can abstract over actions, not just data ( values ).
The greatest benefit of Higher-order functions is reusability.
Also, taking an other function as an argument is often referred as a callback function, because it is called back by the higher-order function.
For example, forEach(), map() , filter() , reduce() and sort() are some of the Higher-Order functions built into the language.

Here’s a list of student. We’re going to do some calculations with their information.


const studentDetails = [
     { studentName: "Prerana", interests: "Finance", startingYear: 1981, endingYear: 2004 },
     { studentName: "Sidhhi", interests: "Retail", startingYear: 1992, endingYear: 2008 },
     { studentName: "Ritu", interests: "Auto", startingYear: 1999, endingYear: 2007 },
     { studentName: "Pratik", interests: "Retail", startingYear: 1989, endingYear: 2010 },
     { studentName: "Harsh", interests: "Technology", startingYear: 2009, endingYear: 2014 },
     { studentName: "Om", interests: "Finance", startingYear: 1987, endingYear: 2010 },
     { studentName: "Vijay", interests: "Auto", startingYear: 1986, endingYear: 1996 },
     { studentName: "Hasnain", interests: "Technology", startingYear: 2011, endingYear: 2016 },
     { studentName: "Bhargav", interests: "Retail", startingYear: 1981, endingYear: 1989 }
  ];

const ages = [33, 12, 20, 16, 5, 54, 21, 44, 61, 13, 15, 45, 25, 64, 32];

1. Array.prototype.forEach()

forEach() method is the better way to loop through an error rather than the traditional for loop.

Example using for loop:


 for (let i = 0; i < studentDetails.length; i++) {
     console.log( 'index: ' + i + 'student' + studentDetails[i].studentName);
 }

Example using forEach() method:


 studentDetails.forEach(function(student, index) {
     console.log('index: ' + index + 'student' + student.studentName);
 });

Both the functions will output the same results.
Foreach takes a callback function and executes the function once for each array element.
Basically, it loop through every element of array one by one, and perform some actions on them. Also it is less error prone and easier to read.
Note: index is optional so, can it run without it.
Remember: When you perform certain action using ForEach loop it changes the data on the original array.
forEach() expects a synchronous function it does not wait for promises.

2. Array.prototype.filter()

Filter method creates a new array with element that pass the test applied by the callback function. We use this method, to filter a given array according to some condition.
Fliter method can be used for particular usecases where the user wants to identify certain items in an array that share a common characteristic.
Let's take our ages array and try to fliter out age's between 21 and 51.

Using for loop


 let drive = [];
 for (let i = 0; i < ages.length; i++) {
     if (ages[i] >= 21 && ages[i] <=51) {
         drive.push(ages[i]);
     }
 }
 console.log(drive);
 // [33, 21, 44, 45, 25, 32]

Using fliter() method


 const drive = ages.filter(function(age) {
    if (age >= 21 && age <= 51) {
        return true;
    }
 });
 console.log(drive);
 // [33, 21, 44, 45, 25, 32]

Using fliter() method with Arrow syntax (ES6):


 const drive = ages.filter(age => (age >= 21 && age <= 51));
 console.log(drive);
 // [33, 21, 44, 45, 25, 32]

Let's take our studentDetails array and try to fliter out students that were in the college for 10 years and above.

Using for loop


 let tenYearsUsingFor = [];
 for (let i = 0; i < studentDetails.length; i++) {
     if (studentDetails[i].endingYear - studentDetails[i].startingYear >= 10) {
         tenYearsUsingFor.push(studentDetails[i]);
     }
 }
 console.log(tenYearsUsingFor);

Using fliter() method


 const tenYears = studentDetails.filter(function(student){
   if (student.endingYear - student.startingYear >= 10) {
        return true;
    }
 });
 console.log(tenYears);

Using fliter() method with Arrow syntax (ES6):


 const tenYears = studentDetails.filter(student => (student.endingYear - student.startingYear >= 10));
 console.log(tenYears);

3. Array.prototype.map()

The map() method creates a new array with the results of calling a function for every array element.
The map() method calls the provided function once for each element in an array, in order.
Lets try to get Square root of all the age's from the ages array:

Using for Loop:


 let rootsUsingFor = [];
 for (let i = 0; i < ages.length; i++) {
     rootsUsingFor.push(Math.floor(Math.sqrt(ages[i])));
 }
 console.log(rootsUsingFor);
// [5, 3, 4, 4, 2, 7, 4, 6, 7, 3, 3, 6, 5, 8, 5]

Using map() method:


 let roots = ages.map(function(num) {
    return Math.floor(Math.sqrt(num));
 })

 console.log(roots);
 // [5, 3, 4, 4, 2, 7, 4, 6, 7, 3, 3, 6, 5, 8, 5]

Using map() method with Array syntax (ES6):


 let roots = ages.map(num => Math.floor(Math.sqrt(num)));
 console.log(roots);
 // [5, 3, 4, 4, 2, 7, 4, 6, 7, 3, 3, 6, 5, 8, 5]

4. Array.prototype.reduce()

The reduce() method is different from above three in the sense that it results in a single value from the array, while other results in array.
The reduce method executes a reducer function on each element of the array, resulting in a single output value.
Lets try to get sum of all the age's from the ages array:

Using for Loop:


 let ageSum = 0;
 for (let i = 0; i < ages.length; i++) {
     ageSum = ageSum + ages[i];
 }
 console.log(ageSum);
 // 460

Using reduce() method:


 const ageSum = ages.reduce(function(total, age) {
     return total + age;
 }, 0);
 // 460

Using reduce() method with Array syntax (ES6):


 const ageSum = ages.reduce((total, age) => total + age, 0);
 // 460

5. Array.prototype.sort()

The sort() method sorts the elements of an array in place and returns the sorted array. The default sort order is ascending.
By default, the sort() function sorts values as strings. This works well for strings ("Apple" comes before "Banana"). However, if numbers are sorted as strings, "37" is bigger than "200", because "3" is bigger than "2" ( initial character ). Because of this, the sort() method will produce incorrect result when sorting numbers. So,we have to fix this by providing a compare function:
Lets try to sort our array of ages:

Using for Loop:


 for (let i = 1; i < ages.length; i++)
     for (let j = 0; j < i; j++)
         if (ages[i] < ages[j]) {
             let temp = ages[i];
             ages[i] = ages[j];
             ages[j] = temp;
         }

 console.log(ages);
// [5, 12, 13, 15, 16, 20, 21, 25, 32, 33, 44, 45, 54, 61, 64]

Using sort() method:


 const sortAges = ages.sort(function(a, b) {
                                            return   a - b 
                                    });
 console.log(sortAges);
 // [5, 12, 13, 15, 16, 20, 21, 25, 32, 33, 44, 45, 54, 61, 64]

Using sort() method with Array syntax (ES6):


 const sortAges = ages.sort((a, b) => a - b);
 console.log(sortAges);
 // [5, 12, 13, 15, 16, 20, 21, 25, 32, 33, 44, 45, 54, 61, 64]

Now, Let's sort array studentDetails based on startingYear:

Using sort() method:


 const sortedStudents = studentDetails.sort(function(s1, s2) {
     if (s1.startingYear > s2.startingYear) {
         return 1;
     } else {
         return -1;
     }
 });
 console.log(sortedStudents);

Using sort() method with Array syntax (ES6):


 const sortedStudents = studentDetails.sort((a, b) => (a.startingYear > b.startingYear ? 1 : -1));
 console.log(studentStudents);

So finally that's, all these are my key Learning from the Chapter 5 of Book Eloquent Javascript. Also, Please do share your key learning from the Chapter 4 and what did you understood the most.

This is a Bloging Challenge from #teamtanayejschallenge

Here's a link to the Website: https://ejs-challenge.netlify.app/

References:

MDN Javascript

Javasript Info

W3School Javascript

Thank you very much for the patience. I’d love to hear your feedback about the post. Let me know what you think about this article, and javascript in general, through my Twitter and LinkedIn handles. I would love to connect with you out there!

Peace!

Reviewing Eloquent Javascript #Chpt4

Prerana Nawar — Thu, 10 Dec 2020 17:57:29 +0000

In this blog, I will write on my learnings from the Eloquent Javascript Book's Chapter 4: Data Structures: Objects and Arrays.

Here's the PDF for Eloquent Javascript Book's Chapter 4.

Arrays
Objects
How to access properties and methods of values in JavaScript ?
- Dot property accessor
- Square brackets property accessor
in Operator
Object.keys() and Object.assign()
Mutability
Different Ways to loop through an Array
Rest Parameter & Spread operator (...)
JSON

Arrays

First, let's think of what are array's in real world.
- A Pile of books: You have a pile of books and a rack with multiple layers. Once all the books are arranged, you essentially created an array of elements (in this case, arrays of books).
- Numbered points mentioned in the TOC: All the points described above are in an ordered series of sequence, so essentially, so we create an array (of 7 elements).
A array is a variable that can store multiple values. Those values are accessed using a numbered indexing. An array is created with a pair of square brackets [].

Syntax: Declaring an array


 let array_name = [item1, item2, ...]; //  Declaring an array

You can assign values when creating the array by including them in between the square brackets [] , with commas , separating the values. The values in an array can be accessed by writing the name of the array followed by an index position with the following syntax :
```
 let name = array_name[indexValue]; // Accessing Array Elements
```
Arrays are zero indexed, meaning the first item in an array will have an index of 0, the second item’s index will be 1, and so forth.
Arrays are special kinds of objects in Javascript
```
 typeof [1, 2, 4];
 //'object'
```
Also, that's why we can have variables of different types in the same array

Objects

Think about objects in the non-programming sense, like a car. A car can have different colors, they are manufactured by different people, with different companies, with different fuel type and many other properties.
Object-oriented programming (OOP) is a way to write programs using objects. Object-oriented programming is nothing but the capability to represent any real world object (real object with any object that you can see through a naked eyes).
So, in programming terminologies object is another variable that allows us to store multiple pieces of data. Allow you to “group” related data together and split your code into logical pieces.

Syntax:


 let objectName = {
     key: value,
     key: value,    
  };

Order of properties doesn't matter in an object.
An object is declared using curly braces {}. Properties and their values are stored within the curly braces, separated by a colon (:). Each property is separated by a comma (,), which comes after each property’s value. Each property is a key/value pair. Objects use named indexes.
It is also possible to assign a value to a property with the = operator. This will replace the property’s value if it already existed or create a new property on the object if it didn’t.

To delete an object in JavaScript we use delete operator. It deletes both the value of the property and the property itself. For Example,


 const Car = {
   carname: 'ABC',
   carno: 1234
 };

 delete Car["carname"];
 //OR (both are valid)
 delete Car.carname;

But, the difference between setting a property to undefined and actually deleting is that, in the first case, the object still has the property (no value), whereas in the second case the property is no longer present.

How to access properties and methods of values in JavaScript ?

First of all, What are properties and methods?
As we know everything in JavaScript is an object and an object is a collection of properties so almost all JavaScript values have properties except are null and undefined.
If we try to access a property on one of these nonvalues, you get an error. For Example:
```
 null.length;
 // → TypeError: null has no properties
```
A property's value can be a function, in which case the property is known as a method.
So, the two main ways to access properties in JavaScript are with a dot and with square brackets.
- Dot property accessor
- When using a dot, the word after the dot is the literal name of the property(identifier).
```
    let hero = {
      name: 'Batman'
    };

    hero.name; 
    // 'Batman'
```
- You can also use the dot property accessor in a one after another to access deeper properties: object.prop1.prop2.
- Choose the dot property accessor when the property name is known to us because it takes the literal meaning of the Identifier.
- Javascript identifier only contains Unicode letters, $, _, and digits 0..9, but cannot start with a digit and therefore we can't access arrays using dot notation. For example:
```
 books.3;      //  SyntaxError: Unexpected number
```
- Square brackets property accessor
- When using square brackets, the expression between the brackets is evaluated to get the property name.
- Choose the square brackets property accessor when the property name is dynamic (when we don't know the property name).
- But what if we have key which has spaces or special character such as (-). So, to access the properties with these special names, use the square brackets property accessor.
```
 let descriptions = {
   work: "Went to work",
   "touched tree": "Touched a tree"
 };

 console.log(descriptions."touched tree");
 // SyntaxError: Unexpected string
 console.log(descriptions["touched tree"]);
 // "Touched a tree"
```

in Operator

The in operator returns boolean true if the specified property is in the specified object, array or a string.

For Example:


 var person = {
            firstName:"Prerana", 
            lastName:"Nawar"
 };

 console.log("firstName" in person);
    //true

Object.keys() and Object.assign()

The Object.keys() method returns an array of a given object's keys. The ordering of the properties ( elements in an array ) is the same as that of given objects.

For Example:


 const object = {
   firstName : 'Prerana',
   rollNo : 09,
   student : true
 };

 console.log(Object.keys(object));
//  ["firstName", "rollNo", "student"]

We can also run this function with an array. For example,


 const array = ['car', 'pencil', 'pen'];
 console.log(Object.keys(array)); 

 // ['0', '1', '2']

The Object.assign() function that copies all properties from one object into another.

For Example,


    const obj1 = { a: 1, b: 2 };
    const obj2 = { b: 4, c: 5 };

    const result = Object.assign(obj1, obj2);

    console.log(obj1);
    //  { a: 1, b: 4, c: 5 }

    console.log(result);
    //  { a: 1, b: 4, c: 5 }

Mutability

Mutable is a type of variable that can be changed. In Javascript only objects and arrays are mutable.
A mutable object is an object whose state can be modified after it is created.
Immutables are the objects whose state cannot be changed once the object is created. Strings and Numbers are Immutable.
When comparing two object, JavaScript compares internal references which are equal only when both operands refer to the same object in memory, keys and values are not checked, so the content of the object doesn't matter, the operands both have to reference the same object to return true in a comparison.

So, Objects and Arrays can't be compared using Equality Operators like we do with Strings. Two objects are never the same even if they have the same content, as two different instances of Object is never equal.

With Objects:


 const person1 = {name: 'Prerana'};
 const person2 = {name: 'Prerana'};
 person1 === person2

 //false

With Objects:


 const names = ['Prerana','Siddhi'];
 const name1 = ['Prerana','Siddhi'];
 names === name1

 //false

But, when we have two references to the same object they are similar. For example,


    const person1 = {name: 'Prerana'};
    const person2 = person1
    person1 === person2

    // true

Different Ways to loop through an Array

The legendary for loop:


 var array = ["Hello","World","Good","Morning"];

 for (var i = 0; i < myStringArray.length; i++) {
    console.log(myStringArray[i]);
 }

Using forEach() function:


 const array = ["one", "two", "three","four"]
 array.forEach(function (item, index) {
   console.log(item, index);
 });

 // Using Arrow Functions
 array.forEach(item => console.log(item));

Using ES6 for-of statement:


 const array = ["one", "two", "three","four"]
 for (const number of array){
 console.log(number);
 }

Rest Parameter & Spread operator (...)

The spread operator allows us to spread the value of an array or we can say that an expression to be expanded in places where multiple arguments are expected.

For Example:


 let numberArray = [0, 1, 2];
 let newNumber = 12;
 numbers = [...numberArray, newNumber];

 // numbers : [0, 1, 2, 12]

For Example 2:


 function multiple(x, y, z) {
   return x * y * z;
 }

 const numbers = [1, 2, 3];

 console.log(multiple(...numbers));
 // 6

The rest parameter allows us to pass an indefinite number of parameters to a function and access them in an array.
Let's look at one example below,
```
 function multiple(a, b) {
   return a * b;
 }

 console.log(multiple(1, 2, 3, 4, 5));

 // 2 ( 1 * 2)
```
- No, the function won't throw any error because to extra arguements but at the same time it won't even multiple them.
- The rest of the parameters can be included in the function definition by using three dots ... followed by the name of the array that will contain them. The dots literally mean “gather the remaining parameters into an array”.

Now, Let's make this function using rest parameters


 function multipleAll(...array) { 
  let sum = 1;
  for (let num of array) {
        sum = sum * num;
    }
  return sum;
 }

 console.log(multipleAll(1)); // 1
 console.log(multipleAll(10, 9)); // 90
 console.log(multipleAll(10, 9, 8)); // 720

Remember: The rest parameters must be at the end. The rest parameters gather all remaining arguments, so it will causes an error. The ...rest must always be last.

JSON

JSON stands for JavaScript Object Notation. JSON is a way of storing and sharing data (usually between the browser and a server).
It is a text-based format for representing structured data based on JavaScript object syntax. It basically has key-value pairs. But JSON names require double quotes.

Example:


 var person = {
   "firstName" : "Prerana",
   "lastName" : "Nawar",
   "rollno" :  "09"
 };

Features of JSON:
- It is light-weight
- Text based, human readable data exchange format
- It is language independent
- Easy to read and write
- Scalable

JSON.parse() is used for parsing data that was received as JSON basically it converts a JSON string into a JavaScript object.

Example:


 const json = '{"student":true, "rollno":9,"name":"Prerana"}';
 const obj = JSON.parse(json);

 console.log(obj)
 console.log(obj.student);
 console.log(obj.rollno);

 > Object { student: true, rollno: 9, name: "Prerana" }
 > true
 > 9

JSON.stringify() on the other hand is used to create JSON string out of the object or array it converts the javascript Object into the JSON string.
```
  console.log(JSON.stringify({ num1: 1, num2: 2, num2: 3 }));
  // "{"num1":1, "num2":2, "num3":3 }"
```

So that's all these are my key Learning from the Chapter 4 of Book Eloquent Javascript. Also, Please do share your key learning from the Chapter 3 and what did you understood the most.

This is a Bloging Challenge from #teamtanayejschallenge

Here's a link to the Website: https://ejs-challenge.netlify.app/

References:

MDN Javascript

Javasript Info

W3School Javascript

Peace!

Reviewing Eloquent Javascript #Chpt3

Prerana Nawar — Thu, 10 Dec 2020 07:12:20 +0000

In this blog, I will write on my learnings from the Eloquent Javascript Book's Chapter 3: Functions.

Here's the PDF for Eloquent Javascript Book's Chapter 3.

Functions are a crucial concept in pretty much any programming language. A function is a group of statements that performs a particular task. Functions allow us to repeat tasks that involve a similar sequence of steps (processing).
Functions allow us to reuse code and create different modules to perform some procedures we plan on using repeatedly (solution to the problem of code duplication).
A complex problem is generally more managable when broken down into simpler subproblems. Then the program will be easier to understand and to update than the sequntial one.

Function Declaration

A function is created with an expression that starts with the keyword function.
The parentheses themselves are always required for every function you defined ( irrespective of the way you define the function ) and they allow you to receive arguments that would be input to your function.Then we have curly braces, curly braces surround the function body and that is the code which executes when this function gets called.
The code works, even when the function is defined below the code ( function call ) that uses it. Function declarations are not part of the regular top-to-bottom flow of control.
```
  let result = divide(20 / 2); 
  function divide(x, y) {
     return x * y;
  }
```
Functions accept outside values. We can do that by defining a function with parameters. Parameters are the input to the function. Parameters are variables listed in the function declaration that are specified inside () by the name. Parameters to a function behave like regular variables, but their initial values are given by the caller of the function, not the code in the function itself. These variables in our case x & y are re-created every time a function is called.
We can pass default value to the parameters. When we give default value to the parameter, the value of that expression will replace the argument only when it is not given.
```
  function divide(x, y = 3) {
     return x * y;
  }
  console.log(divide(15)); // 5
  console.log(divide(15, 5)); //3
```
Each value is assigned to a parameter in the order they are defined. Parameters are the variables declared in a function and the values that are passed to that function are called arguments.
If you expect the function to give back some value in return , it should include a return statement (which is done by using the keyword return ), followed by the value you want to be returned. This return value can be of any type (number, string, etc).
A return keyword without an expression after it will cause the function to return undefined. Functions that don’t have a return statement at all, similarly return undefined. Remember: Any statements after return statement won't be executed.

Example:


   function divide(x, y) {
      return x * y;
   } // there is no semicolon here (not required)

Function Expressions

The functions that are defined using an expression is called as function expressions which are stored in a variable.
They are followed by an optional function name, a list of parameters in a pair of parenthesis (parameter1, ..., parameterN) and a pair of curly braces { ... } that has the body of the function.
Functions that are stored in variables do not need function names. They are always called using the variable name.

Example:


  let divide = function( x, y ){
     return x / y;
  }

  let result = divide(10 / 2);

As we know that in function expressions, function name is optional so the function that are declared without the function names are also called as anonymous functions.
It is easy to confuse the function declaration and function expression. The way you can remember is function declaration always starts with the keyword function on the other hand function expression always starts with declaring the variable name of the function.

Arrow Functions

An arrow function is defined using a pair of parenthesis and the the list of parameters (parameter1,..., parameterN), followed by a fat arrow => and curly braces {...} that has the body statements.
```
 let greetings = () => "Hello World!";
```
When the arrow function has only one parameter, the pair of parentheses can be omitted. We don't need the function keyword, the return keyword, and the curly brackets.
```
 let greetings = val => { 
    console.log("Good Morning " + val);
 };
```
When it contains a single statement, the curly braces can be omitted too.
```
 let greetings = val => "Good Morning " + val;
```

Scope of a variable

Global Scope: Variables declared Globally (outside any function) have Global Scope.
Local Scope: Variables declared Locally (inside a function) have Function Scope.
Block Scope: let & const have block scope. Variables declared with var keyword cannot have block Scope. Variables declared inside a block {} have Block scope and cannot be accessed from outside the block of code.

Example:


  //Global
  let num1 = 10;
  var num2 = 20;
  const num3 = 30;

  function myScope(){
     // Function Scope
     let num1 = 100;
     var num2 = 200;
     const num3 = 300;
     console.log('Function Scope: ', a, b, c); // Function Scope: 100 200 300
 }
 myScope();
 console.log('Global Scope: ', a, b, c); // Global Scope: 10 20 30

Example 2:


 //Global
 let num1 = 10;
 var num2 = 20;
 const num3 = 30;

 if(true){
     // Block Scope
     let num1 = 100;
     var num2 = 200;
     const num3 = 300;
     console.log('Block Scope: ', a, b, c); // Block Scope: 100 200 300
  }
  console.log('Global Scope: ', a, b, c); // Global Scope: 100 20 30

Variables created for function parameters or declared inside a function can be referenced only in that function, so they are known as local variables.


 let a = 10;
 let b = 20;

 function add(a, b) {
     console.log('Function Scope', a, b);
     return a + b;
 } 

 add(100, 200);
 add(1000, 2000);
 console.log('Global Scope', a, b);

 //Output
 // Function Scope 100 200
 // Function Scope 1000 2000
 // Global Scope 10 20

Every time the function is called, new instances of these bindings are created. This provides some isolation between functions—each function call acts in its own little world (its local environment).
Lexical Scoping: A lexical scope in JavaScript means that a variable defined outside a function can be accessible inside another function defined after the variable declaration. But the opposite is not true; the variables defined inside a function will not be accessible outside that function.
```
  let x = 2;
  let add = function() {
      let y = 1;
      return x + y;
  };

  console.log(add()); //3
```

Call Stack

JavaScript uses a call stack to manage (keep track of) script that calls multiple functions.
The call stack works based on the LIFO principle i.e., last-in-first-out.
When you execute a script, the JavaScript creates a Global ( main() ) and pushes it on top of the call stack.
Whenever a function is called, the JavaScript creates a saving point for the function, pushes it on top of the Call Stack, and starts executing the function.
If a function calls another function, the JavaScript creates a new saving point for the function that is being called and pushes it on top of the call stack.
When the current function completes, the JavaScript pops it off the call stack and resumes the execution where it left off in the last code listing.
The script will stop when the call stack is empty.

Example:


 function greetings() {
    say();
 }
 function say() {
   return "Good Morning";
 }
 greetings();

Illustration of the overall status of the Call Stack in all steps:

Closures

In other programming languages we can't access variable that are outside of a function inside of that function. But in JavaScript it is possible because anything that is inside has access to the things that is outside of his scope. For example:
```
  let name = "Prerana";

  function whatsyourname(){
     console.log(name);
  }
  whatsyourname();

  //Output:
  //Prerana
```
Variable name that has the Global scope is accessed inside of a function scope and therefore this is also a Closure.
People often misunderstood that closures are functions inside functions but that's not true the main idea behind closer is that they give access to an outer function score from the inner function. Let's take one example form the book:
```
 function multiplier(factor) {
  return number => number * factor;
 }

 let twice = multiplier(2);
 console.log(twice(5));
 // → 10
```

So what's happening in this function? First let's make this change little bit beginner friendly.


 function multiplier(factor) {
   console.log("Factor is: " + factor);
   return function(number) { 
        console.log("Factor is: " + factor);
        console.log("Number is: " + number);
        return number * factor;
    }
 }

 let twice = multiplier(2);
 console.log(twice(5));

 // Output
 // Factor is: 2 // multipler() function
 // Factor is: 2 // inner function
 // Number is: 5
 // 10

Here we are passing argument 2 to the parameter factor in the multiplier() function then the multiplier function is returning a function which we are storing in the variable twice.
As we know, functions that are stored in variables do not need function names. So, we are calling it using the variable name twice and passing it argument 5. Hence, 2 get multiplied by 5 and returns 10.
But the main thing to understand here is that, this entire code is a closure as we are accessing the factor variable inside the inner function as well.

Another Example:


 function getUrl(url){
    fetch(url).then(() => {
        console.log(url);
    });
 }

 getUrl(someURL);

This is also a closure as we are accessing url inside of the arrow (inner) function even if the outer function ( getUrl() ) has finished executing and those variables are no longer accessible outside of that function because the function inside then will only execute after the fetch function has ran.

Recursion

Recursion is when a function calls itself. So, you might start thinking now, when doing so we might run into an infinite loop but that's not true. Always remember, recursion is similar to normal loops as here also we have some exit condition that will take us outside the loop so the function stops calling itself.

Here's an example:


 function factorial(num, total = 1) {
     if( num <= 1) {
         return console.log("The Factorial is " + total);
     }
     return factorial(num-1, total * num);
 }
 factorial(4);
 // The Factorial is 24

Here inside the function, we are declaring a condition that will help us to jump out of the loop.
So, first we are passing factorial(4, 1) as the if condition is false the console.log() won't run and then our recursion line runs.
We return factorial(3, 4) again the if condtion is false so the recursion will run that returns factorial(2, 12) .
As the num is still 2 the if condition won't run and we will return factorial(1, 24).
After this finally , as the num is equal to 1 the if condition will run and return the statement "The Factorial is 24 ".

So that's all these are my key Learning from the Chapter 3 of Book Eloquent Javascript. Also, Please do share your key learning from the Chapter 2 and what did you understood the most.

This is a Bloging Challenge from #teamtanayejschallenge

Here's a link to the Website: https://ejs-challenge.netlify.app/

References:

MDN Javascript

Javasript Info

W3School Javascript

Peace!

Reviewing Eloquent Javascript #Chpt2

Prerana Nawar — Sun, 06 Dec 2020 11:02:46 +0000

In this blog, I will write on my learnings from the Eloquent Javascript Book's Chapter 2 : Program Structure.

Here's the PDF for Eloquent Javascript Book's Chapter 2.

A piece of code that produces a value is called an expression. An expression is created by combining variables, values and operators. That's why we always say Arthimetic Expressions and Logical Expressions because it always outputs a value whether it be numerical value or boolean value.
```
 10 + 20; // Expression that produces the numeric value 30
 10 > 9; // produces to boolean value true
```
On the other hand, a statement is an instruction to perform a specific action, and that's why we say conditional statements because conditional statements execute statements based on the value of an expression. A program is a list of statements.
```
 let number = 10;
```
Semicolons are used to end a statement. You can choose to not write them (because there is ASI: Automatic Semicolon Insertion in Javascript).
If you want to know more about ASI Rules here's a list.
Remember : We CAN'T omit it semicolon when having two or more expressions on the same line.
```
 let num1 = 10; let num2 = 20; c = num1 * num2; console.log(c);
```

Bindings

To understand Bingings (variables) in Javascript first think of bings as arrows pointing to values rather than thinking to containers storing the value. Two bindings can refer to the same value
In Javascript , the type of value assigned to a variable decides whether the value is stored with by value or by reference.
All primitive types that are Boolean, null, undefined, String, and Number are stored by value.
All Objects including Array, Function are stored by Reference.
When we define a binding without giving it a value, its undefined.
The collection of bindings and their values that exist at a given time is called the environment.

Declaring a Binding

let and const were introduced in ES6 (newer).
Scoping:
- var : function scoped (only available inside parent functions)
- let and const : block scoped (available inside a block denoted by { } )

Remember: The name of a variable should always reflect the meaning of its contents, like when you label boxes (mnemonic).

Example: ❌ This is not Mnemonic


 let a = 8                          
 let b = 1000
 let c = a * b
 console.log(c);

Example: ✅ This is Mnemonic


 let hours = 8                          
 let rate = 1000
 let pay = hours * rate
 console.log(pay);

When to use what : Use const by default; if the value of the variable needs to change then use let. Almost never use var.
Variable naming conventions:
- Should not start with capital unless they are a class.
- Must start with a-z or _ or $.
- If a variable is multi-word, you can use:
  - Camel-case: let inputNumber = 0;
  - Pascal Case: let InputNumber = 0;
  - Snake case: let input_number = 0;

Functions

A function is a group of statements that performs a particular task. Functions allow us to repeat tasks that involve a similar sequence of steps (processing).

If you want to know more about Functions, Loops, Conditional Statements I have wrote a separate blog on it: link.

Control flow

In computer programming, control flow or flow of control is the order function calls, instructions, and statements are executed or evaluated when a program is running.

break & continue

Two statements, break and continue, provide more control upon loops in Javascript.

The break statement immediately stops the loop and passes the execution to the next statement after the loop ( jumps out ).


 for (i = 0; i < 10; i++) {
   if (i === 5) { 
        break; 
   }
   console.log(i);
 }  

 // Output : 
 0
 1
 2
 3
 4

On the other hand, the continue statement breaks one iteration (in the loop) and continues with the next iteration in the loop ( jumps over ).


 for (i = 0; i < 5; i++) {
   if (i === 3) { 
        continue; 
   }
   console.log(i);
 }

 //Output:
 0
 1
 2
 4
 5

Switch Statement

Switch is an alternative to nested if statements.

Syntax:


 switch (expression) {
    case value1:
        statement
        break;
    case value2:
        statement
        break;
    case valueN:
        statement
        break;
    default:
        statement
    }

The value of the expression is compared with the values of each case.
If there is a match, the associated block of code is executed.
If there is no match, the default code block is executed.

Exercises

Looping a triangle .

#
##
###
####
#####
######
#######

Code:


let num = 7;
for (i = 1; i <= num; i++) {
    var str = "";
    for (j = 1; j <= i; j++) {
        str = str + "# ";
    }
    console.log(str);
}

FizzBuzz

Write a program that uses console.log to print all the numbers from 1 to 100, with two exceptions. For numbers divisible by 3, print "Fizz" instead of the number, and for numbers divisible by 5 (and not 3), print "Buzz" instead. When you have that working, modify your program to print "FizzBuzz" for numbers that are divisible by both 3 and 5 (and still print "Fizz" or "Buzz" for numbers divisible by only one of those).
Code:


 for (let i = 1; i <= 100; i++) {
    // console.log(i);
    if (i % 3 === 0) {
        if (i % 5 === 0 && i % 3 === 0) {
            console.log("FizzBuzz");
        } else {
            console.log("Fizz");
        }
    } else if (i % 5 === 0 && i % 3 !== 0) {
        if (i % 5 === 0 && i % 3 === 0) {
            console.log("FizzBuzz");
        } else {
            console.log("Buzz");
        }
    } else {
        console.log(i);
    }
 }

Chessboard
- Write a program that creates a string that represents an 8×8 grid, using newline characters to separate lines. At each position of the grid there is either a space or a "#" character. The characters should form a chessboard.
```
   # # # #
 # # # # 
   # # # #
 # # # # 
   # # # #
 # # # # 
   # # # #
 # # # #
```
- Code
```
 var size = 8; 
 var result = "";

 for (var i = 0; i < size; i++) {  
   for (var j = 0; j < size; j++) {
     if ((j + i) % 2 == 0)
       result += " ";
     else
       result += "#";
   }
   result = result + "\n";
 }

console.log(result);
```
Again, So that's all these are my key Learning from the Chapter 2 of Book Eloquent Javascript. Also, Please do share your key learning from the Chapter 1 and what did you understood the most.

This is a Bloging Challenge from #teamtanayejschallenge

Here's a link to the Website: https://ejs-challenge.netlify.app/

References:

MDN Javascript

Javasript Info

W3School Javascript

Thank you very much for the patience. I’d love to hear your feedback about the post. Let me know what you think about this article, and javascript in general, through my Twitter and LinkedIn handles. I would love to connect with you out there!

Peace!

Reviewing Eloquent Javascript #Chpt1

Prerana Nawar — Sat, 05 Dec 2020 19:49:24 +0000

In this blog, I will write on my learnings from the Eloquent Javascript Book's Chapter 1 : Values, Types, and Operators.

Here's the PDF for Eloquent Javascript Book's Chapter 1.

Bits
Volatile Memory and Non-Volatile Memory
JavaScript Numbers are Always 64-bit Floating Point
How the negative numbers are stored in memory in Javascript?
Operator Precedence
NaN
Infinity
Charater Special Escaping
The size of a JavaScript string
Template literals
Unary Operator
Lexicographical Order
Ternary Operator
Difference between null and undefined
Type Coercion
Short Circuit Evaluation

Bits

A computer, at the lowest level, stores data in binary, a numeral system in which there are just two digits, 0 and 1 (base 2). But, in our day to day life we count numbers from 1 to 9 which is a decimal number system (base 10).
For Example, for us humans we know that 111 is "One hundred and eleven" but if we want to convert this decimal number in binary its value is 01101111

..  256 128 64 32 16 8 4 2 1 
      0   0  1  1  0 1 1 1 1

We only have to add values that are above 1 i.e. 64 + 32 + 8 + 4 + 2 + 1 = 111
To represent letters, all we need to do is decide how numbers map to letters. For example, the letter “A”, is the number 65, and “B” is 66, and so on.
Accent marks, symbols and characters, Images, Videos, Colors, Emojis, GIFs can all be represented using 1's and 0's with a standard called Unicode (one specific version of which is called UTF-8).
8 bits = one byte.

Volatile Memory and Non-Volatile Memory

Volatile Memory ( Primary Memory ) is used to store computer programs and data that CPU needs in real time and is erased once computer is switched off. Used for temorary Storage.
- For Example, RAM and Cache memory are volatile memory.
Where as Non-volatile Memory ( Secondary Memory ) is static and remains in the computer even if computer is switched off. Used for Permanent Storage.
- For Example, ROM and HDD are non-volatile memory.
One quick example:
- When there is no power supplied to a system (computer) the operating system is in secondary memory once the system is on our operating System comes in primary memory i.e. operating system is shifted from secondary to primary memory when the system's power is on.

JavaScript Numbers are Always 64-bit Floating Point

In JavaScript we don't define different number types like integers, short, long, floating-point etc. Unlike other programming languages like Java, C and C++.
JavaScript numbers are always stored as double precision floating point numbers, following the international IEEE 754 standard.
For Example:
```
 typeof 8778
 typeof 7e45
 typeof 34.56
 typeof 27.76e56
```
No matter whether your value is an integer number (short or long) or a decimal number, the language exposes just one type to represent all of them i.e. "number".

How the negative numbers are stored in memory in Javascript?

When there is a number with minus sign, the number (ignoring minus sign) is converted to its binary format.
Then the two’s complement of the number is calculated.
- For Eg: num = 1001, now convert number into 1's complement i.e. 0110. Now, left-hand-side number will come to right-hand-side i.e 1100.
That two’s complement is kept at place allocated in memory and the sign bit will be set to 1 because the binary being kept is of a negative number.
Aterwards, when we will be accessing that value firstly the sign bit will be checked if the sign bit is 1 then the binary will be two’s complemented and converted to its decimal number and will be represented with a minus sign.

Operator Precedence

Operator precedence means in which order our operations will be exceuted.
Most of the time they follow our general BODMAS maths rule that stands for Bracket, Order, Division, Multiplication, Addition, and Subtraction.
But when it comes to logical and comparison operators here are the docs that will help you to know the precedence of the operator.
For Example:
```
 3 + 17 > 13 - 3 // 20 > 10
 // true
```
Because addition and subtraction operators has higher precedence than boolean operators

NaN

Not a number NaN is itself is a type of number

  typeof NaN
 'number'

This is the only value in JavaScript that is not equal to itself.

 console.log(NaN == NaN)
 // → false

Infinity

Infinity is an error value indicating one of two problems: a number can’t be represented because its magnitude is too large, or a division by zero has happened.

Infinity is larger than any other number (except NaN). Similarly.
-Infinity is smaller than any other number (except NaN). That makes them useful as default value, for example, when you are looking for a minimum or maximum.

Dividing by zero produces Infinity as an error value:

 > 3 / 0
 Infinity
 > 3 / -0
 -Infinity
 > Infinity - Infinity
 NaN
 > Infinity / Infinity
 NaN

Also, I understood one function isFinite() that allows us to check whether a value is an actual number (neither infinite nor NaN):

 > isFinite(5)
 true
 > isFinite(Infinity)
 false
 > isFinite(NaN)
 false

Charater Special Escaping

Many programming languages support a concept called Escape Sequence. When a character is preceded by a backslash ( \ ), it is called an Escape Sequence.
Example:
- \b: backspace
- \t: horizontal tab
- \v: vertical tab
- \0: null character
If you want to know more about Charater Special Escaping here's a link.

The size of a JavaScript String

Pre-ES6 Version: 2 bytes per character
ES6 and later Versions: 2 bytes per character, or 5 or more bytes per character. The additional sizes come into play because ES6 (ECMAScript 6) adds support for Unicode code point escapes.

Template literals

Template literals are string literals allowing embedded expressions.
You can use multi-line strings and string interpolation features with them.
Template literals are enclosed by the backtick.These are indicated by the dollar sign and curly braces (${expression}).

Quick Example:


 let firstName = 'Prerana';
 console.log(`Hello ${firstName}!
 How are you
 today?`);
 // Output:
 // Hello Prerana!
 // How are you
 // today?

Unary Operator

Operators that use two values are called binary operators, while those that take one are called Unary operators.
The minus operator can be used both as a binary operator and as a unary operator.

Examples of Unary Operator:

Unary plus (+)


 +true  // 1 (Boolean value is converted to a number)
 +false // 0 (Boolean value is converted to a number.)
 let a = '10' //String
 console.log(+a); // 10 (String is converted to a number)

Logical Not (!)


 !false  // returns true

This returns True because it will convert the operand ( false ) into it’s boolean value and then negate it.

Increment ( ++ ) and Decrement ( -- )
Unary negation ( - )

Lexicographical Order

To check whether a string is greater than another in JavaScript, Lexicographical Order is used, which simply means that it compares sequentially the elements that have the same position in both strings against each other.

'college' > 'school'
false

Ternary Operator

The ternary operator ( shorthand of Conditional Statement ) is the only JavaScript operator that takes three operands.
Syntax: condition ? exprIfTrue : exprIfFalse
Explanation: the exprIfTrue will exceute if the condition is True and exprIfFalse will execute if condition is false.
```
 let age = prompt('Enter your Age :');
 let result = (age < 18 ) ? 'Teenager' : 'Adult';
 console.log(`You are a ${result}`);
```
If the user enters age less than 18 then teenager will be printed but if the user enters age as more than aur equal to eighteen then adult will be printed

Difference between null and undefined

Null means an empty or non-existent value.


 var a = null;
 console.log(a);
 // null

Undefined means a variable has been declared, but the value of that variable has not yet been defined
```
 var a;
 console.log(a);
 // undefined
```

Type Coercion

Type coercion is conversion of values from one data type to another (such as strings to numbers).
Type conversion is similar to type coercion because they both convert values from one data type to another with one key difference — type coercion is implicit whereas type conversion can be either implicit (done for the programmer by the interpreter behind the scenes ) or explicit (done by the Programmer).
Example: Here, javascript has coerced ( implicit ) the 1 from a number into a string and then concatenated the two values together, resulting in a string of 51.
```
 console.log("5" + 1)
 // 51
```

Short Circuit Evaluation

There are three logical operators in JavaScript:
- Logical AND &&
- Logical OR ||
- Logical NOT !
Two important aspects of logical operators in JavaScript is that they evaluate from left to right, and they short-circuit.
If you want to know more about short circuit evaluations here are the docs.
What this means is that when JavaScript evaluates an OR expression ( returns true if either operand is true ) , if the first operand is true, JavaScript with short-circuit and not even look at the second operand.


true || abc
//true

Important Points we should remember:

When the types differ , JavaScript uses a complicated and confusing set of rules to determine what to do. In most cases, it just tries to convert one of the values to the other value’s type.
The rules for converting strings and numbers to Boolean values state that 0, NaN, and the empty string ("") count as false, while all the other values count as true.

Yes, So that's all these are my key Learning from the Chapter 1 of Book Eloquent Javascript. Also, Please do share your key learning from the Chapter 1 and what did you understood the most.

This is a Bloging Challenge from #teamtanayejschallenge

Here's a link to the Website: https://ejs-challenge.netlify.app/

References:

MDN Javascript

Javasript Info

Peace!

Reviewing Eloquent Javascript #IntroChpt

Prerana Nawar — Fri, 04 Dec 2020 19:43:31 +0000

In this blog, I will write on my learnings from the Eloquent Javascript Book's Introduction Chapter.

Here's the PDF for Eloquent Javascript Book's Chapter 1

What’s a Program?

A computer is a machine whose role is to execute quickly a series of actions given to it. Computers can take in and process certain kinds of information much faster than we can.
“Today, computers can learn faster than humans, e.g., (IBM’s) Watson can read and remember all the research on cancer, no human could.”
A programming language is a way to give orders to our computer. It’s a bit like a human language! Each programming language has its own vocabulary (keywords that each play a specific role) and grammar (rules defining how to write programs in that language).
Programming and Problem Solving increases our Abstract Thinking. Abstract thinking is related to thinking in depth. Abstract thinking makes it possible for people to exercise creativity. As the Author says "A program is a building of thought. It is costless to build, it is weightless, and it grows easily under our typing hands."
In the Book its written that "A program can ingeniously combine an enormous number of these simple actions to do very complicated things." So it means a complex problem is generally more managable when broken down into simpler subproblems. Then the program will be easier to understand and update.

What are Higher and Lower Level Programming Languages ?

Higher level languages can be easily understood or interpreted or compiled by us (Programmers) in comparison to the machine. As well as they Memory efficiency is less.

Examples of Higher Level Programming Languages:

Python
Java
JavaScript
C++

On the other hand, Machine can easily understand the lower level languages in comparison of Programmers. Here, they are more Memory efficient.

Examples of Lower Level Programming Languages:

assembly language
machine language

So, I don't know how to write Machine Code but the closet language I know to Machine is the Assembly Langauge 8086µ (learned in my College).

So, here's a program to find a factorial of a number.

For those who don't know what is a factorial of a number.

To find the factorial of a number we have to repeatedly multiply the numbers from 1 to the given number.
For Example: Factorial of 5 is : 5 * 4 * 3 * 2 * 1 = 120

.model small
.code
.startup
main: MOV CX, [0500]
MOV AX, 0001
MOV DX, 0000
MUL CX
LOOP 040A   
MOV [0600], AX  
MOV [0601], DX  
HLT

Code Explanation:

MOV CX, [0500] loads the number to CX Register
MOV AX, Initialize AX with 0001H
MOV DX, 0000 lInitialize DX with 0000H
MUL CX will multiply AX with CX. "MUL" is the instruction to multiple 2 numbers.
LOOP 040A runs loop till CX not equal to Zero
MOV [0600], AX says store lower 16 bit (0600) into AX
MOV [0601], DX says store higher 16 bit (0601) into DX
HLT to stop the execution of program

Here is the same program in JavaScript

let fact = 1;
for (i = 1; i <= number; i++) {
     fact = fact * i;
}
console.log(fact);

if number is 5 
Output : 120

Code Explanation:

let fact = 1; Here we are first initialising fact variable by 1.
Then we require way to loop from 1 to the number to multiply the number repeatedly.
After that, we will multiply the loop counter i with fact and will store the result in fact
console.log operation will display the value of fact

What is Javascript ?

Javascript is the programming language of the web.
JavaScript is the web scripting language developed by Netscape. It is the most popular programming language in the world today. The language was standardized to ECMAScript, as a cross-platform Internet standard for scripting, but it is still most commonly called JavaScript.

Java vs JavaScript

A lot of people ( including me ) at the Beginning confuse JavaScript with Java and are under the impression that JavaScript is a ‘scripting’ version of Java. But what Java is to JavaScript is what car is to carpet ( #lamejokes ). They don’t have anything to do with each other.

JavaScript back in the days

JavaScript is first and foremost the programming language of the web. It was invented in 1995 by Brendan Eich, who at the time worked for Netscape, which created the first popular web browser (Firefox’s ancestor). Also,which means that Javascript is 24 years old now!
While its first official name was LiveScript in the beta releases of Netscape Navigator, the marketing machine of Netscape later altered its name to JavaScript.
Today, browsers mostly use the fifth edition of the ECMAScript (ECMA-262) specification.

Finally, Where is Javascript used ?

JavaScript is said to be the de-facto assembly of the web.
Web browsers are not the only platforms on which JavaScript is used. Emergence of the Node.js platform,allowed us to create JavaScript applications outside the browser.
Server Applications using Node.js
Gaming Applications for Broswer as well as there are some PhysicsJS,Pixi.js JavaScript game engines available.
We can also create Machine Learning Models using Tensorflow.js
Mobile Applications using React Native and Ionic
Desktop Applications: Electron , NW.js, AppJS are some JavaScript frameworks.
Some databases, such as MongoDB and CouchDB.

Yes, So that's all these are my key Learning from the Introduction Chapter of Book Eloquent Javascript. Also, Please do share your key learning from the Intro Chapter and what did you understood the most.

Please note that I don’t claim to have the best solution for Problems written in this blog. I’m more than happy to see other solutions as well.

This is a Bloging Challenge from #teamtanayejschallenge

Here's a link to the Website: https://ejs-challenge.netlify.app/

References:

JavaScript

Abstract Thinking - GoodTherapy.org Therapy Blog

Computation Power: Human Brain vs Supercomputer

Are Computers Already Smarter Than Humans?

Peace!

How to make a CLI Quiz App using Javascript for Beginners

Prerana Nawar — Fri, 04 Dec 2020 10:44:52 +0000

In this Blog, we will understand how to make a CLI Quiz App using Javascript.

I’m using JavaScript because is one of the most used programming language today… that’s the 1st reason. The 2nd reason is that I find it really fun to work. But don’t worry if you haven’t used it as I’m going to explain step by step the entire process

For those who don't know what is a CLI App:

Command Line Interface (CLI), is a text-based interface used to interact with the operating system or the software by typing commands into the interface and receiving a response in the same way that is entirely through your terminal and shell. CLI Applications or (CLIs) they have no graphics or visual interface like GUI Applications.

Also, kindly note that I don’t claim to have the best possible solution. I’m more than happy to see other solutions as well.

Ok, enough with the chit-chat … let’s get our hands dirty.

CLI Quiz App

Things we will do in this App:

Ask User to enter their name.
Tell them the rules and instruction of you quiz
Ask them questions serialvise
If the User's answer is right increase their score, and display the score
If the User's answer is wrong Sshow them the right answer, and decrease the score also don't decrement till negative number (after zero)
After all question are completed show them the final score

Great… sounds fun! Let’s get into it.

There are different ways to take user input in Javascript but to take the User input through console ( command line ) we will require one npm package: readline-sync.

Firstly, We will import the readline-sync package in our program. To include it, we use the require() function with the name of the module and will store it in a constant variable because it won't change throughout our program:

const readlineSync = require('readline-sync');

After that, we will greet the user and will ask their name by using readlineSync.question() function from our imported pakage and then store the username in a variable for further use :

console.log('Welcome to the Quiz');
let username = readlineSync.question("What's your Name: \n");

Here, we are concatenation three String. There are different ways to concatenate string in JS , we will use a plus operator to do so!

console.log('Hello ' + username + ", Let's Play the Quiz!!");

If you want to have a look at different ways of concatenating string in Javascript here's it.

Now, we will simply display our rules and instructions for our program. Choose any topic you want for your Quiz. Also, note that we are going to ask user both one-word as well as Multiple Choice (MCQ's) questions.

console.log('Rules & Instructions: ');
console.log('1.',username + ', There are 10 Questions on India and all are Compulsory.');
console.log('2. You will get 2 points on each Right Answer.');
console.log('3. One Point will be deducted if the Answer is Wrong.');
console.log('4. In MCQ based questions you have to type the Serial Number / Index Value.');

Now, The Main Logic Begins:

First, we’ll need a variable to store the score of user. We’ll initialize it with 0.

let score = 0;

We will ask user 5 answer in one word questions and 5 MCQ based questions. For that we will require 2 for loops, 2 functions one for MCQ based another for one for one-word answer and 2 array of objects to store questions and answers.

It you don't know what all these keywords are here's an article for you.

Let's start with storing an array of object for questions and answers.

For One-word Questions:

var questionsList = [ 
    {
        question : 'India\'s Largest City by Population: ',
        answer : 'Mumbai',
    },
  {
    question : 'National Song of India: ',
    answer : 'Vande Mataram',
  }, 
  {
    question : 'National Motto of India: ',
    answer : 'Satyameva Jayate',
  }, 
  {
    question : 'Golden Temple is situated in: ',
    answer : 'Amritsar',
  },
];

For MCQ Questions array we will also store array of Options in it.

var mcqList = [
  {
    array : ['Mumbai', 'Hyderabad', 'Guragon', 'Bangalore'],
    question : 'Which City is known as "Electronic City of India"? ',
    answer : 'Bangalore'
  },
  {
    array : ['Kerala', 'Madras', 'Bangalore', 'New Delhi'],
    question : 'The Indian Institute of Science is located at ',
    answer : 'Bangalore'
  },
  {
    array : ['Dugong', 'Blue whale', 'River Dolphin', 'Pygmy Killer Whale'],
    question : 'What is the name of India\'s National Aquactic Animal: ',
    answer : 'River Dolphin'
  },
  {
    array : ['New Delhi', 'Hyderabad', 'Amritsar', 'Mumbai'],
    question : 'The Centre for Cellular and Molecular Biology in India is situated at: ',
    answer : 'Hyderabad'
  },
  {
    array : ['Delhi', 'Dehradun', 'Lucknow', 'Gandhinagar'],
    question : 'National Institute of Aeronautical Engineering is located at ',
    answer : 'Delhi'
  },
  {
    array : ['T.N.Kaul', 'J.R.D. Tata', 'Nani Palkhivala', 'Khushwant Singh'],
    question : 'Who wrote the famous book - "We the people"? ',
    answer : 'Nani Palkhivala'
  },
];

Now, we require function to display question, take user input, check whether the input the correct and on based on that we will increment and decrement the score of the user.

So, Let's start by declaring a function for one-word answers. Also,this function will take 2 inputs question and answer from our array questionsList.

function quiz(question,answer){}

Now, we need a way to display the question to the user as well as take the user given answer for the question displayed. So, again for that we will use readlineSync.question() function.

function quiz(question,answer){
    let userAnswer = readlineSync.question(question);
}

Here, we are displaying the question to the user and then storing the user input in a variable userAnswer.

Now we will check whether the user entered answer and our answer is correct or not and depending on that we will increment the score by 2 or decrement the score by 1. Also, remember if the user enters wrong answer we have to display them the correct answer.

function quiz(question,answer){
    let userAnswer = readlineSync.question(question);

    if(userAnswer.toLowerCase() == answer.toLowerCase()){
    console.log('You are Right.');
    score = score + 2;
  } else{
    console.log('You are Wrong.');
    console.log('The Correct Answer is:',answer);
    score = score - 1;
  }
}

Here, we are converting both answers to lowercase because JavaScript is a case sensitive language. It means that "Mumbai" and "mumbai" are two different words.

If you want to read more about toLowerCase() function here are the docs.

To display the score after every question we will use console.log() after if else condition so that even if either of the conditions run our score will be displayed.

function quiz(question,answer){
    let userAnswer = readlineSync.question(question);

    if(userAnswer.toLowerCase() == answer.toLowerCase()){
    console.log('You are Right.');
    score = score + 2;
  } else{
    console.log('You are Wrong.');
    console.log('The Correct Answer is:',answer);
    score = score - 1;
  }
    if(score < 0){
    score = 0;
  }
     console.log('Score is: ',score);
}

We don't know what are scope to decrement below zero (negative number) that's why we are checking wheather score < 0 .

Function for MCQ questions.

function quizMcq(listOfAnswers,question,answer){}

You are we will take three inputs for the function. An array of list of option for displaying the options to the user, question and the correct answer to check whether the user entered answer and our answer is correct or not.

Now, We will use one another function from our readline-sync package that is readlineSync.keyInSelect() .This function will take two parameters, the list of options to display it to the user and the question. If you want to read more about this function in the docs.

function quizMcq(listOfAnswers,question,answer){
    let userAnswer = readlineSync.keyInSelect(listOfAnswers, question);
}

Now we will put userAnswer in a array of options to check whether entered answer is correct. Rest of all is same.

function quizMcq(listOfAnswers,question,answer){
    let userAnswer = readlineSync.keyInSelect(listOfAnswers, question);

    if(listOfAnswers[userAnswer] === answer){
    console.log('You are Right.');
    score = score + 2;
  }else{
    console.log('You are Wrong.');
    console.log('The Correct Answer is: ',answer);
    score = score - 1;
  }

  if(score < 0){
    score = 0;
  }
  console.log(chalk.cyan('Score is: ',score));
}

Now, we require a for loop to look through our questionsList for one-word questions.

for(var i = 0;i<questionsList.length;i++){}

Now we will call our quiz function in the for loop so that we can repeatedly loop through our questions till the end.

for(var i = 0;i<questionsList.length;i++){
    quiz(questionsList[i].question,questionsList[i].answer);
}

Understand that, our list of question is an array of object that's why we are accessing our object property i.e. question and answer with the dot operator.

for loop to look through our questionsList for MCQ questions.

for(var i = 0;i < mcqList.length; i++) {
  quizMcq(mcqList[i].array,mcqList[i].question,mcqList[i].answer);
}

Now finally at the end we will display the total score to the user.

console.log('Congratulations,',username,'your Total Score is: ',score);

Hurray! We did it!

Complete Program:

const readlineSync = require('readline-sync');

console.log('Welcome to the Quiz');
let username = readlineSync.question("What's your Name: \n");
console.log('Hello',username,", Let's Play the Quiz!!");

console.log('\n');
console.log('Rules & Instructions: ');
console.log('1.',username + ', There are 10 Questions on India and all are Compulsory.');
console.log('2. You will get 2 points on each Right Answer.');
console.log('3. One Point will be deducted if the Answer is Wrong.');
console.log('4. In MCQ based questions you have to type the Serial Number / Index Value.');
console.log('\n');

var questionsList = [
  {
    question : 'India\'s Largest City by Population: ',
    answer : 'Mumbai',
  },
  {
    question : 'National Song of India: ',
    answer : 'Vande Mataram',
  }, 
  {
    question : 'National Motto of India: ',
    answer : 'Satyameva Jayate',
  }, 
  {
    question : 'Golden Temple is situated in: ',
    answer : 'Amritsar',
  },
];

var mcqList = [

  {
    array : ['Mumbai', 'Hyderabad', 'Guragon', 'Bangalore'],
    question : 'Which City is known as "Electronic City of India"? ',
    answer : 'Bangalore'
  },
  {
    array : ['Kerala', 'Madras', 'Bangalore', 'New Delhi'],
    question : 'The Indian Institute of Science is located at ',
    answer : 'Bangalore'
  },
  {
    array : ['Dugong', 'Blue whale', 'River Dolphin', 'Pygmy Killer Whale'],
    question : 'What is the name of India\'s National Aquactic Animal: ',
    answer : 'River Dolphin'
  },
  {
    array : ['New Delhi', 'Hyderabad', 'Amritsar', 'Mumbai'],
    question : 'The Centre for Cellular and Molecular Biology in India is situated at: ',
    answer : 'Hyderabad'
  },
  {
    array : ['Delhi', 'Dehradun', 'Lucknow', 'Gandhinagar'],
    question : 'National Institute of Aeronautical Engineering is located at ',
    answer : 'Delhi'
  },
  {
    array : ['T.N.Kaul', 'J.R.D. Tata', 'Nani Palkhivala', 'Khushwant Singh'],
    question : 'Who wrote the famous book - "We the people"? ',
    answer : 'Nani Palkhivala'
  },
];

let score = 0;
function quiz(question,answer){
  let userAnswer = readlineSync.question(question);

  if(userAnswer.toLowerCase() == answer.toLowerCase()){
    console.log('You are Right.');
    score = score + 2;
  } else{
    console.log('You are Wrong.');
    console.log('The Correct Answer is:',answer);
    score = score - 1;
  }

  if(score < 0){
    score = 0;
  }
  console.log(chalk.cyan('Score is: ',score));
}

function quizMcq(listOfAnswers,question,answer){
  let userAnswer = readlineSync.keyInSelect(listOfAnswers, question);
  console.log('\n');
  if(listOfAnswers[userAnswer] === answer){
    console.log('You are Right.');
    score = score + 2;
  } else{
    console.log('You are Wrong.');
    console.log('The Correct Answer is: ',answer);
    score = score - 1;
  }

  if(score < 0){
    score = 0;
  }
  console.log('Score is: ',score);
}

for(var i = 0;i<questionsList.length;i++){
  console.log('\n');
  quiz(questionsList[i].question,questionsList[i].answer);
  console.log('*******************************');
}

for(var i = 0;i < mcqList.length; i++){
  console.log('\n');
  quizMcq(mcqList[i].array,mcqList[i].question,mcqList[i].answer);
  console.log('*******************************');
}

console.log('\n');
console.log('Congratulations,',username,'your Total Score is: ',score));

Things you will learned while building this app:

How to take user inputs through an npm module.
How to concatenate strings.
What are of array of objects and how to loop through them.
How to use functions and branching conditions.

Conclusion

I know that the problem might seem trivial for some of you, but if it helped you in any way, I’m very happy about it!

Peace!

Core Concepts of Programming through JavaScript

Prerana Nawar — Thu, 03 Dec 2020 09:35:10 +0000

In this article, we will try to understand some of the core concepts of Programming through Javascript. If you want to learn JavaScript to pursue a career in development, then you are in the right place.

JavaScript is simple and easy to learn programming language. Now-a-days, it has become an inseparable part of any core technologies of the internet.

So, let's dive into to understand the programming fundamentals and basic-object oriented concepts using javascript syntax. The concepts covered here lay the foundation for javascript as well as the concepts in this article are generic to all programming langauges.

Content:

What is a Program ?
Variables, Statements and Expressions
Conditional Statements
Functions
Loops
Arrays
Objects

What’s a Program?

As we all know, Computer is a machine whose role is to execute quickly a series of tasks given to it.
A Program is nothing but a list of actions given to a computer.
The Programmer’s task is to create programs.
A Programming language is a way to give orders to a computer. It’s a bit like a human language! Each programming language has its own vocabulary ( keywords that each play a specific role) and grammar (rules defining how to write programs in that language).

Variables:

At the end of the day, a program's goal is to do something with the data, or in other words, to process the data. Variable as a container used to store a piece of data (value) that your program may need for processing.
A variable is composed of two elements : name and value. The type of a variable depends of its value.
Think of a variable as a box that contains a value. This box is stored in warehouse. The location of every box is recorded, just like your computer records the location of your variable in memory.
A value is a piece of data you put in a variable. To know what each box is for, you need to label them. In programming we say: assigning a name to a variable. Values of variables can be modified.
Remember: The name of a variable should always reflect the meaning of its contents, like when you label boxes.

Some of the general suggestions while naming your variable:
- Use descriptive names
- Follow the common naming convention of the lanague you are using
  - If a variable is multi-word, you can use:
    - Camel-case: let inputNumber = 0;
    - Pascal Case: let InputNumber = 0;
    - Snake case: let input_number = 0;

Expressions and Statements:

Statements and Expressions are two most important terms in any programming language. But often people don't know what's the main difference is.
So, Expression is a code that produces a value. An expression is created by combining variables, values and operators. That's why we always say Arthimetic Expressions and Logical Expressions because it always outputs a value whether it be numerical value or boolean value. If you don't know what's artimetic & logical operator take a look at this docs.
- 10 + 20; // Expression that produces the numeric value 30
- 10 > 9; // produces to boolean value true
On the other hand, a statement is an instruction to perform a specific action, and that's why we say conditional statements because conditional statements execute statements based on the value of an expression.

Example : let number = 10;

Example of Conditional Statement:

     if (expression) 
        statement 1
     else 
        statement 2

Conditional Statements

By using Conditional statements we can control the flow of our program. They allow us to execute code only under certain conditions that we define and the block of code will only execute if the condition in parenthesis is met.

Conditional statements rely on providing a Boolean value that can determine whether a code block (the statements between the {} curly braces) should execute.

if statements:
- The most common flow-control statement in almost every programming language is the if statement.
- Suppose we ask a user to enter a number and then check whether the number is positive.
```
 Enter a Number
 If the Number is positive
      Display a message
```
  The message will be displayed only if the condition i.e only if the Number is positive.
- Think of it as : “If the condition is true, then executes the instructions contained in the code block”.
- Syntax:
```
 if ( expression ) {
      // *block of code to be executed if the condition is true
 } 
```
When the code block has only one statement, braces may be omitted. As a beginner, you should always use braces when writing your conditions.

if/else statements
- Now we will check if the number is positive or negative
```
 Enter a Number
 if the Number is positive
     Display a message "Your Number is a Positive Number"
 else
     Display a message "Your Number is a Negative Number"
```
- You can translate an if/else statement like this: “If the condition is true, then execute this first set of code; otherwise, execute this next set of code”.
- Only one of the two code blocks will be executed. The condition in the else if statement will only be evaluated after the first if condition is false.
- Syntax:
```
 if ( expression ) {
    // *block of code to be executed if the condition is true*
 } else {
    // *block of code to be executed if the condition is false
 }
```
if/else if/else statements - Nesting conditions
- But what is the User Enter's a zero in that case we can use a Nesting condition
```
 Enter a Number
 if the Number is positive (Number > 0)
    Display a message "Your Number is a Positive Number"
 else if Number is negative (Number < 0)
    Display a message "Your Number is a Negative Number"
 else
    Display a message "Your Entered Zero"
```
- Multiple else if statements can be chained together like above.
- The condition in the else if statement will only be evaluated after the first if condition is false. If the else if condition is also false, the code in the else block will execute.
- Syntax:
```
 if ( expression1 ) {
    // *block of code to be executed if expression1 is true*
 } else if ( expression2 ) {
    // *block of code to be executed if the condition1 is false and expression2 is true
 } else {
    // *block of code to be executed if the condition1 is false and condition2 is false
 }
```

Functions:

Functions are a crucial concept in pretty much any programming language. A function is a group of statements that performs a particular task. Functions allow us to repeat tasks that involve a similar sequence of steps (processing).

Syntax for Declaring and Calling / Invoking a Function

  function myFunctionName( parameter1, parameter2 ) { // declaring the function
        // *code to be executed
 }
 myFunctionName(argument1, argument2); // calling the function

The parentheses themselves are always required for every function you defined and they allow you to receive arguments that would be input to your function.Then we have curly braces,curly braces surround the function body and that is the code which executes when this function gets called.

1. Functions with no parameters and no return types:

Syntax for Declaring and Calling / Invoking a Function

 function myFunctionName() {
        console.log("");
 }
 myFunctionName();

Example:

 function welcomeMessage() {
        console.log("Hello Javascript");
 }
welcomeMessage();

Remember: In this function we are not taking any input as well as we are not returning any output we are just logging / printing the output.

2. Functions with parameters and no return types:

Functions accept outside values. We can do that by defining a function with parameters. Parameters are the input to the function. Parameters are variables listed in the function declaration that are specified inside () by the name.
Each value is assigned to a parameter in the order they are defined. Parameters are the variables declared in a function and the values that are passed to that function are called arguments.

Syntax:

 function myFunctionName( parameter1, parameter2 ) { 
        // *code to be executed
 }
myFunctionName(argument1, argument2);

Example:

 function sumOfNumbers(num1, num2) {
        let sum = num1 + num2; 
        console.log(sum);
 }
 sumOfNumbers(10,20);

3. Functions with return Type and no parameters:

If you expect the function to give back some value in return , it should include a return statement (which is done by using the keyword return ), followed by the value you want to be returned.
If you don’t expect your function to return a value, you do not have to include a return statement. This return value can be of any type (number, string, etc).
Remember: Any statements after return Satement won't be executed.

Syntax:

 function myFunctionName( parameter1, parameter2 ) { 
        // *code to be executed
        return value;
 }
myFunctionName(argument1, argument2);

Example:

  function sumOfNumbers(num1, num2) {
        let sum = num1 + num2; 
        return sum;
  }
 let result = sumOfNumbers(10,20);

Here we are also, storing result in a variable.

Why are functions so important?

Functions allow us to reuse code and create different modules to perform some procedures we plan on using repeatedly (solution to the problem of code duplication). Also, a complex problem is generally more managable when broken down into simpler subproblems. Then the program will be easier to understand and to update than the sequntial one.

Loops:

Loops are another fundamental building block that allow us to run a procedure repeatedly.
While Loops:
- Syntax:
```
  while ( condition ) {
    // code block to be executed
  }
```
- In the while statement, if the given condition is true, the code block will execute. Once the program has executed, it will go back to the beginning of the while statement and check if the condition is still true. If it is, the code will once again execute. This will continue happening (the execution of the code block loops) up until the while statement’s condition becomes false.
- Translation: As long as the logical expression is true, repeat the instructions.
for-loops:
- syntax
```
 for (initialization; condition; incrementation) {
    // code to run while the condition is true
 }
```
- Initialization only happens once, when the code starts executing. It’s sets the initial value of the variable (program counter) in to the loop condition.
- The condition is always evaluated once before the loop runs each time. If it’s true, the code runs but if not, the code doesn’t run.
- The incrementation is evaluated after the loop runs each time. It’s often used to update the value of the variable associated with the loop condition.
- In for loops the only change is that all the statements that are related to the “state” of the loop are grouped together after for.
- The loop counter
  - The variable used during initialization, condition, and the final expression of a loop is called a counter and is often named i. This counter can be declared in the loop initialization to limit its scope to the loop body.

When should I use a for loop and When should i use a while loop?

For loops are great because they include the counting of the varible by default. However, it means you have to know how many times you want the loop to run as soon as you write your code. For situations where you don’t already know how many times the code should run, while loops make sense. while-loops, are usually used when we need to do a set of operations until a certain condition is met. if you know in advance how many times (how many increments) you want the loop to run, for is the best choice.

Arrays

A array is a variable that can store multiple values. Those values are accessed using a numbered indexing. An array is created with a pair of square brackets [].

Syntax: Declaring an array

 let array_name = [item1, item2, ...]; //  Declaring an array

You can also assign values when creating the array by including them in between the brackets, with commas separating the values. The values in an array can be accessed by writing the name of the array followed by an index position with the following syntax:
- let name = array_name[indexValue]; // Accessing Array Elements
Arrays are zero indexed, meaning the first item in an array will have an index of 0, the second item’s index will be 1, and so forth.

Objects:

Think about objects in the non-programming sense, like a car. A car can have different colors, they are manufactured by different people, with different companies, with different fuel type and many other properties.
Object-oriented programming (OOP) is a way to write programs using objects. Object-oriented programming is nothing but the capability to represent any real world object (real object with any object that you can see through a naked eyes).
So, in programming terminologies object is another variable that allows us to store multiple pieces of data. Allow you to “group” related data together and split your code into logical pieces.

Syntax:

 let objectName = {
    key: value,
    key: value,    
 };

An object is declared using curly braces {}. Properties and their values are stored within the curly braces, separated by a colon (:). Each property is separated by a comma (,), which comes after each property’s value. Each property is a key/value pair.
Order of properties doesn't matter in an object.
We access values in objects using keys, unlike in arrays. There we access it using index value (number). We can aslo have number's as a key in objects. The values inside an object are called object's properties
- objectName.propertyName

Resources / references

Eloquent JavaScript

JavaScript

The Modern JavaScript Tutorial

JavaScript Tutorial

Conclusion

Remember : There's so much to learn, but it's all achievable if you don't give up.

By the way, if you didn’t know, everything taught in this tutorial as well as anything you need to know about vanilla Javascript, HTML, CSS and more, you can count on MDN to have an extensive amount of knowledge on it.

Let me know what you think about this article, and porgramming in general, through my Twitter and LinkedIn handles. I would love to connect with you out there!

Don’t forget to like & follow if you enjoyed! More articles coming soon! :)

Peace!

What is Dart ?

Prerana Nawar — Tue, 24 Nov 2020 10:51:20 +0000

Hello Geeks, In this article, we'll try to understand, what is Dart? and some interesting Features/Facts of Dart.

What is Dart?

The Google's definition for dart says that

So, We will divide the line into 3 parts:

1. What is a Client Optimized Language in General?

The programming language optimized for crafting beautiful user interfaces and high-quality experiences is a Client Optimized Programming Language.

2. It says Dart can be used for fast apps.

So, guys talking about dart's speed, if we compare dart with few other OOP languages like java or especially javascript, dart is 2x faster.
The reason is that dart can complie at both the Run-Time (JIT) or Ahead-of-time(AOT).
The difference between JIT and AOT Compilation:
- In JIT (Just in Time) compliation the complier converts program source code into native machine code just before program execution.
- In AOT compiliation works by compiling your code before the runtime environment runs the code.The AOT compiler is typically used when the app is ready to be deployed.
You can also take a look at Dart versus Node js fastest programs here

3. Then it states Dart can be used on any Platform.

Yes, Dart runs on any platform, whether you’re creating a Mobile app, Web app, Command-line script, or Server-side app. Due to Flexible compiler technology Dart code can run depending on your target platform.

Few Features of Dart :

Getting started with dart is very easy.We don't even need to install anything. Directly hit the Dartpad which is an open-source tool that lets you play with the Dart language in any modern browser.
Second most interesting thing about dart is it is Open Source which means that if you see a bug, you can immediately report it, or fix it yourself.This is something a lot of programming languages lack.
Dart is easy to scale whether you are working with a small database with 100 records or a large set with 1 million.
Dart is consistently updating which inturn indicates its active development.
Dart has its own package manager called Pub
Dart has built in support for different types of Testing like Unit Testing, Integration Testing, and Component Testing.
Dart when used in Web Applications, is transpiled to JavaScript so it runs on all web browsers.
The Dart installation comes with a Dart VM as well to run the .dart files from a command-line interface.

Thank you guys, let me know what you think about this article, and Dart. I hope this guide will help you with your learning, and hopefully save your time!

Git for Beginners

Prerana Nawar — Sat, 21 Nov 2020 12:12:04 +0000

If you guys quickly search on Google about Git it says that

"Git is a distributed version-control system for tracking changes in source code during software development."

So, What is a Version Control System?
First thing first, try reading "version control" as "control version". A Version Control System (VCS) or also called as Source Code Manager (SCM) is just software that helps you control (or manage) the different versions of something (typically your Source Code).
Git is an SCM (and therefore a VCS!). The URL for the Git website is "https://git-scm.com/" (and you can see how it has "SCM" directly in its domain!).

There are a lot of Version Control Systems:

SVN
GIT
Mercurial
Bazaar

But, there are two main types of Version Control Systems:

The Centralized Model - where, all Users connect to a central, master repository.
The Distributed Model - where, each User has the entire repository on their computer.

Git Terminologies / Keywords :

Repository / Repo:

A Repository is a directory(folder) which contains your project work, which are used to communicate with Git. Repositories can exist either locally on your computer or as a remote copy on another computer. A repository is made up of commits.
Commit:

Every time you save (commit) the state of your project in Git, it basically takes a picture of what all your files look like at that moment and stores a reference to that commit. You can think of it as a save point in a game - it saves your project's files and any information about them.
Working Directory:

The Working Directory(Folder) are the files that you see in your computer's file system. When you open your project files on a code editor, you're working with files in the Working Directory. This is in contrast to the files that have been saved (in commits) in the repository.
Branch:

Branch in Git is similar to the branch of a tree. Going back to the example of save point in a game, you can think of a branch as where you make a save point in your game and then decide to try out a risky move in the game. If the risky move doesn't pan out, then you can just go back to the save point. The key thing that makes branches incredibly powerful is that you can make save points on one branch, and then switch to a different branch and make save points there, too.
The Primary(default) branch in Git is the Master or the Main branch.
Staging Area / Staging Index / Index:

A file in the Git directory that stores information about what will go into your next commit. You can think of the staging area as a prep table where Git will take the next commit. Files on the Staging Index are poised to be added to the repository.

Some of the Basic but Important Commands of Git:

git init:

Running this command will create a new git repository from scratch. It is also used to initialize the existing project folder as a git repository.
Example: git init
git add :

This command will add the file or files that u specify to the staging area or the index. You can run this command as many times as you need. But, Remember before commiting the files it will keep in the staging area. Instead of listing all file names one by one, you can use "." after "git add" to select all files under the current directory.
Example: git add filename or git add .
git status:

If you want to see what you have in the Staging Area and ready for commit you can run the command. It will display paths of your tracked and untracked files.So, basically it will display the difference between "git add" and "git commit" command.But, Remember it will not show any commit records or information.
Example: git status
git commit:

This command will take everything that is in the index for the Staging area and put it into the local repository.The "-m" option, which stands for "message". Writing good commit messages is a skill.
Example: git commit -m "Add files"
git push:

When you run this command it will take your local repository that you have created and then push it to the remote repository such as Github.
Example: git push <remote> <branch>
git pull:

If you want to pull the latest changes from the remote repository to the local repository you can do it using git pull command. This command is mostly useful when you are working in a Team or an Organisation.
Example: git pull <remote>
git clone:

The git clone command download the existing remote repository on your local computer by specifying the URL of the remote repository.Basically, If you find a program or project that you like on GitHub you can clone it and that will download it in your machine.
Example: git clone https://github.com/userName/repositoryName.git

Let me know what you think about this article, and Git in general. I hope this guide will help you with your learning, and hopefully save your time ? Thank you

DEV Community: Prerana Nawar

Reviewing Eloquent Javascript #Chpt5

TOC:

Back in Days of Programming

Abstraction:

What is Functional Programming

First-Order Function:

Abstracting repetition:

Higher-order functions

1. Array.prototype.forEach()

2. Array.prototype.filter()

3. Array.prototype.map()

4. Array.prototype.reduce()

5. Array.prototype.sort()

References:

Reviewing Eloquent Javascript #Chpt4

TOC:

Arrays

Objects

How to access properties and methods of values in JavaScript ?

in Operator

Object.keys() and Object.assign()

Mutability

Different Ways to loop through an Array

Rest Parameter & Spread operator (...)

JSON

Reviewing Eloquent Javascript #Chpt3

TOC:

Why are functions so Important?

Function Declaration

Function Expressions

Arrow Functions

Scope of a variable

Call Stack

Closures

Recursion

Reviewing Eloquent Javascript #Chpt2

TOC:

Expressions and Statements

Bindings

Declaring a Binding

Functions

Control flow

break & continue

Switch Statement

Exercises

References:

Reviewing Eloquent Javascript #Chpt1

TOC:

Bits

Volatile Memory and Non-Volatile Memory

JavaScript Numbers are Always 64-bit Floating Point

How the negative numbers are stored in memory in Javascript?

Operator Precedence

NaN

Infinity

Charater Special Escaping

The size of a JavaScript String

Template literals

Unary Operator

Lexicographical Order

Ternary Operator

Difference between null and undefined

Type Coercion

Short Circuit Evaluation

Important Points we should remember:

References:

Reviewing Eloquent Javascript #IntroChpt

TOC:

What’s a Program?

What are Higher and Lower Level Programming Languages ?

What is Javascript ?

Java vs JavaScript

JavaScript back in the days

Finally, Where is Javascript used ?

References:

How to make a CLI Quiz App using Javascript for Beginners

CLI Quiz App

Now, The Main Logic Begins:

Complete Program: