JavaScript Scope: A Complete Guide

                        
// Declare a block

{

      // Declare a local variable inside the block

      let name = "Bob";

  

    // Access the local variable inside the block

    console.log(name); // Bob

}



// Try to access the local variable outside the block

console.log(name); // ReferenceError: name is not defined

                        
                    

In the example above, the variable name is declared inside a custom block. It has block scope, which means that it can only be accessed and used within that block. If you try to access it outside the block, you will get a reference error, because the variable name is not defined in the global scope.

Block scope is only available for variables and functions declared with the let and const keywords, which are introduced by the ES6 standard. The let keyword is used to declare variables that can be reassigned, while the const keyword is used to declare variables that cannot be reassigned. For example:

                        
// Declare a block

{

      // Declare a variable with let

      let x = 10;

  

    // Reassign the variable

    x = 20;

  

    // Declare a variable with const

    const y = 30;

  

    // Try to reassign the variable

    y = 40; // TypeError: Assignment to constant variable

}

                        
                    

In the example above, the variable x is declared with the let keyword, which means that it can be reassigned within the block. The variable y is declared with the const keyword, which means that it cannot be reassigned within the block. If you try to reassign it, you will get a type error, because the variable y is a constant.

Block scope is useful when you want to create variables and functions that are specific to a certain block of code, and that are not needed outside of that block. Block scope helps to avoid naming conflicts and memory leaks, by creating a separate scope for each block. Block scope also enables the use of temporal dead zone, which is a feature that prevents the access and use of variables before they are declared. For example:

                        
// Declare a block

{

      // Try to access the variable before it is declared

      console.log(x); // ReferenceError: Cannot access 'x' before initialization

  

    // Declare the variable with let

    let x = 10;

}

                        
                    

In the example above, the variable x is declared with the let keyword, which means that it has block scope. However, unlike the var keyword, the let keyword does not hoist the variable to the top of the block. This means that you cannot access or use the variable before it is declared. If you try to do so, you will get a reference error, because the variable x is in the temporal dead zone.

Block scope is a more modern and flexible type of scope in JavaScript, and it is generally recommended to use the let and const keywords instead of the var keyword. However, there are some cases where you might.

Lexical scope

A function that is declared inside another function is said to have lexical scope. Lexical scope means that the inner function can access and use the variables and functions of the outer function, even if the outer function has returned. For example:

                        
// Declare an outer function

function makeGreeting(name) {

      // Declare a local variable inside the outer function

      let greeting = "Hello, ";

  

    // Return an inner function

    return function() {

        // Access and use the name and greeting variables from the outer scope

        console.log(greeting + name);

      };

}



// Assign the returned function to a variable

let greetAlice = makeGreeting("Alice");



// Call the greetAlice function

greetAlice(); // Hello, Alice

                        
                    

In the example above, the function makeGreeting returns another function that uses the name and greeting variables from the outer scope. The returned function is a closure, because it can access and use the name and greeting variables, even after the makeGreeting function has returned. The name and greeting variables are not accessible from the global scope, but they are preserved in the closure scope.

Lexical scope is useful when you want to create functions that can access and use variables from their outer scope, even after the outer function has returned. Lexical scope helps to create private variables and functions, by hiding them from the global scope. Lexical scope also enables the use of currying, which is a technique that transforms a function that takes multiple arguments into a sequence of functions that each take one argument. For example:

                        
// Declare a function that takes two arguments

function add(x, y) {

      // Return the sum of the arguments

      return x + y;

}



// Call the function with two arguments

console.log(add(2, 3)); // 5



// Declare a function that takes one argument and returns another function that takes one argument

function add(x) {

      // Return a function that takes one argument

      return function(y) {

            // Return the sum of the arguments from the outer and inner scope

            return x + y;

          };

}



// Call the function with one argument and assign the returned function to a variable

let addTwo = add(2);



// Call the addTwo function with one argument

console.log(addTwo(3)); // 5

                        
                    

In the example above, the function add is transformed into a curried function that takes one argument and returns another function that takes one argument. The curried function can access and use the argument from the outer scope, even after the outer function has returned. The curried function can be used to create partial functions, such as addTwo`, that can be reused with different arguments.