Hoisting

Hoisting in JavaScript means the interpreter declares functions and variables before the execution of the code. This happens because of the memory allocation phase of the execution context in JavaScript.

• Function Hoisting

  Function hoisting allows you to use a function before you declare it in your code. At the time of memory allocation in the execution context, the whole function body is allocated in the memory.

  Code

  greeting("Manideep");
  
  function greeting(name) {
    console.log(`Hello ${name}`);
  }
  

  Output

  

• Variable Hoisting

  You can use a variable in code before it is declared because of hoisting. But before the declaration of the variable, its default value will be undefined.

  Only var will be declared with the default value of undefined. let and const are hoisted, but with no default value. Errors will be thrown if let and const are used before declaration in the code.

  Code

  console.log(num); // Returns 'undefined' from hoisted var declaration
  var num = 17; // Initialization and declaration.
  console.log(num); // Returns 17
  

  Output

  

---

Call Stack

The call stack keeps track of multiple function calls. It works like a stack in data structures and works on the Last-In-First-Out principle. It is used to keep track of which function is running now.

When a Java script program runs, the global execution context gets pushed into the call stack.

Then the greetings function is called and it is pushed into the call stack.

On execution of the greetings function, the message function is called. As a result, the message function is placed in the call stack.

On execution of the message function, the console.log will be pushed into the call stack.

Then it will print "Hello" and there is no code remaining to execute in the message function. So it will pop out console.log from the call stack.

Similarly, every other function will be popped out one by one from the call stack after execution, and the call stack will be empty.

---

Scope

Scope is a region or area within our code where we can access any functions or variables. The variables and functions are useless outside of their scope.

Java Script Scope Types

• Global scope

  Global Scope variables are those declared outside of any function. In a JavaScript program, global variables can be accessed from anywhere.

  Example Code

       let globalScope = 17;
  
       function functionScope() {
        console.log(`Fetching globalScope inside function ${globalScope}`)
       }
  
       functionScope();
       console.log(globalScope)
  

  Output

  

• Function/Local scope

  Function scope in JavaScript, means that each function creates a new scope. Variables defined within a function are not accessible from the outside. If you attempt to access the variable outside of the function, it will throw a ReferenceError.

  Example Code

      function functionScope() {
        let fnScopeVar = 17;
        console.log(`Fetching fnScopeVar inside function ${fnScopeVar}`)
      }
  
      functionScope();
      console.log(`Fetching fnScopeVar outside function ${fnScopeVar}`) 
      // This will throw RefrenceError
  

  Output

  

• Block scope

  Javascript's block scope is introduced in ES6 (2015). let and const are the keywords which came with the block scope. The var keyword lacks block scope.

  Example Code

      {
        let fnScopeVar = 17;
        var varVariable = 10;
        console.log(`Fetching fnScopeVar inside block scope ${fnScopeVar}`)
        console.log(`Fetching varVariable inside block scope ${varVariable}`)
      }
  
      console.log(`Fetching varVariable outside block scope ${varVariable}`)
      // This will throw RefrenceError
      console.log(`Fetching fnScopeVar outside block scope ${fnScopeVar}`)
  

  Output

  

---

Single Threaded

JavaScript is a single-threaded language, which means, in simple terms, it can execute code one at a time. It has only one call stack that is used to execute the program. As learned in the call stack section above, it works on the First-In-First-Out principle. It can only execute the code that is at the top of the stack.

Example Code

        function outer() {
          inner();
          console.log("Second")
        }

        function inner() {  
          console.log("First")
        }

        outer()
        console.log("Third")

Output

Let's understand what's happening using a diagram.

Thank you reading