Scopes & Scope Chain in JavaScript

Scope refers to when and where within our code a variable exists.

In JavaScript, scope refers to the context in which variables and functions are accessible. The scope chain is a series of scopes that the JavaScript engine uses to resolve variable names. There are generally 3 types of scopes in JavaScript.

Different Scopes in JavaScript

1. Global Scope: Variables declared outside any function or block are in the global scope. They are accessible from anywhere in the code.

2. Function Scope: Variables declared inside a function are only accessible within that function. Each function creates a new scope. So, there can be multiple function scopes.

3. Block Scope: Variables declared with let and const are block-scoped, meaning they are only accessible within the block they are defined. A block can be any code wrapped inside curly braces. For e.g., a for loop, an if statement etc.

Scope Chain

Note: Before ES6 (2015), JavaScript variables had only Global Scope and Function Scope. ES6 introduced two important new JavaScript keywords: let and const . These two keywords provide Block Scope in JavaScript.

The scope chain is a hierarchy of scopes that JavaScript uses to resolve variable names. When a variable is accessed, JavaScript looks for it in the following order:

1. Local Scope: The innermost scope where the variable is being accessed.
2. Parent Scope: The scope in which the current function or block is contained.
3. Global Scope: The outermost scope, available throughout the program.

If a variable isn’t found in the local scope, JavaScript continues looking in the parent scope and so on, until it reaches the global scope.

Example

Here’s an example demonstrating the scope and scope chain in JavaScript:

// Global scope
let globalVar = "I'm a global variable";

function outerFunction() {
    // Function scope of outerFunction
    let outerVar = "I'm an outer variable";
    
    function innerFunction() {
        // Function scope of innerFunction
        let innerVar = "I'm an inner variable";
        
        console.log(innerVar); // Logs: "I'm an inner variable"
        console.log(outerVar); // Logs: "I'm an outer variable"
        console.log(globalVar); // Logs: "I'm a global variable"
    }
    
    innerFunction();
}

outerFunction();

Explanation

1. globalVar is declared in the global scope and is accessible from anywhere in the code.
2. outerVar is declared in outerFunction and is accessible within outerFunction and any nested functions inside it, like innerFunction.
3. innerVar is declared in innerFunction and is only accessible within innerFunction.

When innerFunction is called, it has access to innerVar (its own scope), outerVar (from the outer function scope), and globalVar (from the global scope).

Scope Chain Illustration

Here’s a breakdown of the scope chain when accessing innerVar from innerFunction:

• innerFunction Scope: innerVar is found here.
• outerFunction Scope: outerVar is found here if innerVar isn’t present.
• Global Scope: globalVar is found here if neither innerVar nor outerVar are present.

This hierarchical structure allows JavaScript to resolve variables correctly, providing a way to manage variable scope and avoid naming conflicts.