Eloquent JavaScript Review #Chapter2
Tags: javascript, beginners, review, eloquentjs
Published: 2021-01-22 18:11:04



This is the second chapter of [Eloquent JavaScript]( https://eloquentjavascript.net/) and I’m sharing my learning from this chapter.

>TOC:
1. Statements and Expressions
2. Binding
3. var, let and const
4. Functions
5. Flow of Control
6. Break and Continue
7. Switch Statements
8. Exercise Problems

##Statements and Expressions
* A fragment of code that produces a value is known as Expression. It can be cooked up using values, variables and operators. 
```javascript
162+245  		//a Number type output is produced
142<156		    //a Boolean result is produced 
let x=9			   //a first type expression
3+5		     //a second type expression
```
* A Statement is a complete sentence of code. A Program is a list of statements that are executed one after another. The statements comprise of variables, values, expressions, keywords and comments, if necessary. 
```javascript
let hours = 10;
```
* There’s an automatic semicolon insertion or [ASI]( https://262.ecma-international.org/7.0/#sec-rules-of-automatic-semicolon-insertion) mechanism in JavaScript so we can sometimes omit semicolons. However when there are instances where multiple variable and expressions are grouped together in a single line a semicolon becomes very necessary. Also putting the semicolon is a neat habit in the world of programming. 

##Binding
* The values need to be caught and held so they do not dissipate and can be used regularly without having to declare them multiple times. This is where binding comes in. We can think of bindings as tentacles or arrows that grasp/point to a value, it’s better than containers or boxes that hold the value and subsequently takes up space for that.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/hyr939vs68b80n8jc5n9.png)

* Two values can represent same value. Also depending on the type of value JavaScript determines whether to store them by values or by reference. All primitive types that are Number, String, Boolean, null and undefined are stored by value. All objects including Array, Function are stored by Reference. When we define a binding without giving it a value, it stays undefined. 
* Finally a collection of bindings and their values at a given time is called as the Environment.

###Binding Name Convention:
* It should not start with a capital letter unless it’s a class.
*  It can start with a-z or $ or _ and can contain numbers (just not at the beginning)
* Keywords should not be used
* There are various styles for declaring a binding with multiple words, some of them are:
  * Camel Case: `let fuzzyLittlePuppy = 0;`
  * Snake Case: `let fuzzy_little_puppy = 0;`
  * Pascal Case: `let FuzzyLittlePuppy = 0;`
* It’s cleaner write bindings Mnemonic-ally. It basically simplifies to writing variables which portray the meaning of the value or content it’s assigned to. Example:
```javascript
const PI = 3.14;
let radius = 2;
let area = PI * radius;
console.log(area);
``` 

##var, let and const
* Many people get confused between these three. Well let and const are fairly new and were introduced recently in ES6.
* The difference can be understood by knowing the scopes of these three. 
* var: it’s function scoped which means it’s only available inside parent functions.
* let and const: both are block scoped which means they’re available inside a block denoted by ‘{ }’ .
In JavaScript var is often times produces weird results so let is preferred instead of it. const is used whenever we declare a default value or something that shouldn’t be changed, consider the values being ‘etched in stone’ level stuff.

##Functions
* A function is a piece of program wrapped in a value which can be used to run the wrapped program. Went through your head right? Well think of it as a button which brings you coke every time you press it. Similarly whenever a particular set of code is to be repeated, a function is called.  
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/q14lwsxulvymqg8teban.png)

*  We declare the function with the keyword ‘function’.
* The names listed in the function definition are called as function parameters. Real Values that are given (received by) to the function is called as function arguments.  
* When a function produces a value or a result it is called as ‘return’ value.
* ’{}’ can group any numbers of statements into a single statement. It is called a block. This block is the body of the function.
Example:
```javascript
function functionName(parameter1, parameter2) //declaring the function
{
//code to be executed
}
functionName(argument1, argument2); //calling the function
``` 
##Flow of Control
* A control flow or flow of control is followed inside the computer. This tells which statement, function or loop is to be executed next when a program is running.
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/41irfmamsytccvztalp6.png)

##Break and Continue
* The break and continue statements provide more accessibility over the loops and conditional statements. 
* break immediately stops the execution of the loop and passes the control over to the next statement after the loop in the program.
```javascript
for (i = 0; i < 10; i++) {
   if (i === 5) { 
        break; 
   }
   console.log(i);
 }  

 // Output : 
 0
 1
 2
 3
 4
```
*  continue just breaks one iteration of the loop and continues with the next iteration.
```javascript
for (i = 0; i < 10; i++) {
   if (i === 5) { 
        break; 
   }
   console.log(i);
 }  

 // Output : 
 0
 1
 2
 3
 4
```
##Switch Statements
* It’s a neat alternative to the nested if-else statements. The value of input is compared with the condition of each case, if there is a match that case’s code block is executed. However if there is no match found the default case is executed. The Syntax is as follows:
```javascript
switch (expression) {
    case value1:
        statement
        break;
    case value2:
        statement
        break;
    case valueN:
        statement
        break;
    default:
        statement
    }
```
 
##References:
[MDN Docs](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
[JavaScript info]( https://javascript.info/)
[W3Schools](https://www.w3schools.com/js/default.asp)

So these are the key points that I got from this chapter. Let me know what are your thoughts and any feedback is appreciated. Connect with me through my [Twitter](https://twitter.com/neo_kaizerr) and [LinkedIn](bit.ly/33dlIbc) handles.