Scope

The accessibility or visibility of variales is known as Scope.

There are 3 types of Scope:

• Block scope
• Function scope

• Global scope

  1. Block scope:

  Two important new JavaScript keywords let and const provide Block Scope in JavaScript.

  Example:

  • Variables declared inside a { } block cannot be accessed from outside the block:

    {
    let x = 2;
    }
    // x can NOT be used here
    

  • Variables declared with the var keyword can NOT have block scope.

    Variables declared inside a { } block can be accessed from outside the block.

    {
    var x = 2;
    }
    // x CAN be used here
    

  2. Function scope:

  Variables defined inside a function are not accessible (visible) from outside the function.

  Variables declared with var, let and const are quite similar when declared inside a function.

  Example:

  • Variables declared with var inside a function.

    function myFunction() {
    var Name = "LCO";   // Function Scope
    }
    

  • Variables declared with let inside a function.

    function myFunction() {
    let Name = "LCO";   // Function Scope
    }
    

  • Variables declared with const inside a function.

    function myFunction() {
    const Name = "LCO";   // Function Scope
    }
    

  3. Global scope:

  Variables declared outside any function have Global Scope.

  Global variables can be accessed from anywhere in a program.

  Variables declared with var, let and const are quite similar when declared outside a block.

  Example:

  • Variables declared with var outside a block.

    var Name = "LCO";
    

  • Variables declared with let outside a block.

    let Name = "LCO";
    

  • Variables declared with const outside a block.

    const Name = "LCO";
    

---

---

Single Thread

Javascript is a single threaded language. This means it has one call stack and one memory heap. As expected, it executes code in order and must finish executing a piece code before moving onto the next. It's synchronous, but at times that can be harmful.

For example: if a function takes awhile to execute or has to wait on something, it freezes everything up in the meanwhile.

---

---

Call Stack

The call stack is used by JavaScript to keep track of multiple function calls. It is like a real stack in data structures where data can be pushed and popped and follows the Last In First Out (LIFO) principle. We use call stack for memorizing which function is running right now. The below example demonstrates the call stack.

Example:

function f1() {
console.log('LCO');
}

function f2() {
f1();
console.log('I write code');
}

f2();

Output:

LCO by f1 I write code by f2

Explanation:

Step 1: When the code loads in memory, the global execution context gets pushed in the stack.

Step 2: The f2() function gets called, and the execution context of f2() gets pushed into the stack.

Step 3: The execution of f2() starts and during its execution, the f1() function gets called inside the f2() function. This causes the execution context of f1() to get pushed in the call stack.

Step 4: Now the f1() function starts executing.

Step 5: similarly, Now the f2() function starts executing.

---

---

Hoisting

JavaScript Hoisting refers to the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code.

1. Function hoisting

• with Hoisting

  Name("LCO");

  function Name(name) {
  console.log(`${name}`);
  }
  /*
  The result of the code is: "LCO"
  */

• without Hoisting

  function Name(name) {
  console.log(`${name}`);
  }

  Name("LCO");
  /*
  The result of the code is: "LCO"
  */

---

2. Var hoisting:

Here we declare and then initialize the value of a var after using it. The default initialization of the var is undefined.

  console.log(num); // Returns 'undefined' from hoisted var declaration (not 6)
  var num; // Declaration
  num = 6; // Initialization
  console.log(num); // Returns 6 after the line with initialization is executed.

  console.log(num); // Returns 'undefined' from hoisted var declaration (not 6)
  var num = 6; // Initialization and declaration.
  console.log(num); // Returns 6 after the line with initialization is executed.

---

3. Class hoisting:

Classes defined using a class declaration are hoisted, which means that JavaScript has a reference to the class. However the class is not initialized by default, so any code that uses it before the line in which it is initialized is executed will throw a ReferenceError.