Reviewing Eloquent Javascript #Chpt3
Tags: javascript, eloquentjs, beginners
Published: 2020-12-10 07:12:20

**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](https://eloquentjavascript.net/03_functions.html)**.

## **TOC:**

1. **[Why are functions so Important?](#1)**
2. **[Function Declaration](#2)**
3. **[Function Expressions](#3)**
4. **[Arrow Functions](#4)**
5. **[Scope of a variable](#5)**
6. **[Call Stack](#6)**
7. **[Closures](#7)**
8. **[Recursion](#8)**

### **Why are functions so Important?** <a><a name="1"></a>

- **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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2jy2sx2o5td9w9j5j96t.png)

### **Function Declaration** <a><a name="2"></a>

- 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**.


    ```jsx

      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**.


    ```jsx

      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:

    ```jsx

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

    ```

### **Function Expressions** <a><a name="3"></a>

- 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:

    ```jsx

      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** <a><a name="4"></a>

- 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.

    ```jsx

     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.

    ```jsx

     let greetings = val => { 
    	console.log("Good Morning " + val);
     };

    ```

- When it contains a single statement, the curly braces can be omitted too.

    ```jsx

     let greetings = val => "Good Morning " + val;

    ```

### **Scope of a variable** <a><a name="5"></a>

- **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:

    ```jsx

      //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:

    ```jsx

     //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.

    ```jsx

     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.

    ```jsx

      let x = 2;
      let add = function() {
          let y = 1;
          return x + y;
      };
 
      console.log(add()); //3

    ```

### **Call Stack** <a><a name="6"></a>

- 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:

    ```jsx

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

    ```

- Illustration of the overall status of the Call Stack in all steps:
- ![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1ks0q5e3x1i0w8fqdgow.png)

### **Closures** <a><a name="7"></a>

- 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:

    ```jsx

      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:

    ```jsx

     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.

    ```jsx

     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:

    ```jsx

     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** <a><a name="8"></a>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/81jl5z4oo55qn6jvji4v.jpg)

- 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:

    ```jsx

     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/](https://ejs-challenge.netlify.app/)**

References:

[**MDN Javascript**](<https://developer.mozilla.org/en-US/docs/Web/JavaScript>)

[**Javasript Info**](<https://javascript.info/>)

[**W3School Javascript**](<https://www.w3schools.com/js/default.asp>)

**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](<https://twitter.com/NawarPrerana>) and [LinkedIn](<https://www.linkedin.com/in/prerana-nawar-4890b41ab/>) handles. I would love to connect with you out there!**

**Peace!**