Lexical Scope in JavaScript

Lexical scope is a fundamental concept in programming that determines the accessibility of variables and functions within a program. In simple terms, the lexical scope is the scope of a variable or function based on where it is defined in the source code. The scope is determined by the placement of variables and functions in the code, and it remains the same throughout the execution of the program. Global variables can be accessed from anywhere within the program, while local variables can only be accessed within the function or block in which they are defined. The nested scope allows functions to access variables defined in parent functions, and block scope allows variables to have limited accessibility within a block of code.

In this article, we’ll explore lexical scope in JavaScript with different code examples provided to illustrate how it works.

Global Scope: When a variable is defined outside of any functions or blocks, it has a global scope. This means that it can be accessed from anywhere within the program, including within functions.

Example:

Javascript

let name = "John"; // Global variable

function sayHello() {
      console.log("Hello " + name);
}

sayHello(); // Output: "Hello John"

Output

Hello John

In the example above, the variable name is defined outside of any functions or blocks, making it a global variable. The function sayHello is then able to access the name variable and output “Hello John” to the console.

Local Scope: When a variable is defined within a function or block, it has a local scope. This means that it can only be accessed within that function or block.

Example:

Javascript

function sayHello() {
      let name = "John"; // Local variable

      console.log("Hello " + name);
}

sayHello(); // Output: "Hello John"

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

Output:

In the example above, the variable name is defined within the sayHello function, making it a local variable. The console.log statement within the function is able to access the name variable and output “Hello John” to the console. However, the console.log statement outside of the function is not able to access the name variable and throws a “Uncaught ReferenceError” error.

Nested Scope: When a function is defined within another function, it has access to variables defined in the parent function. This is known as nested scope.

Example:

Javascript

function outer() {
    let name = "John"; // Outer function variable

    function inner() {
        console.log("Hello " + name);
    }

    inner(); // Output: "Hello John"
}

outer();

Output

Hello John

In the example above, the function inner is defined within the outer function. The inner function is able to access the name variable defined in the parent outer function, outputting “Hello John” to the console.

Block Scope: ES6 introduced the let and const keywords, which allow variables to have block scope. This means that variables defined within a block of code (such as within an if statement or a for loop) can only be accessed within that block.

Example:

Javascript

function sayHello() {
    let name = "John"; // Function variable

    if (true) {
        let message = "Hello"; // Block variable
        console.log(message + " " + name);
        // Output: "Hello John"
    }

    console.log(message);
    // Output: Uncaught ReferenceError:
    // message is not defined
}

sayHello();

Output:

In the example above, the variable message is defined within the if block, making it a block variable. The console.log statement within the if block is able to access both the message and name variables and output “Hello John” to the console. However, the console.log statement outside of the if block is not able to access the message variable and throws an “Uncaught ReferenceError” error.

Conclusion: In JavaScript, the lexical scope is used to determine the accessibility of variables and functions within a program. Understanding lexical scope is crucial for writing clean, organized, and maintainable code. By properly scoping variables and functions, we can avoid naming conflicts, improve code readability, and reduce the risk of unintended side effects.

It’s important to note that JavaScript also has dynamic scope, which is determined at runtime rather than at compile time. This means that the scope of a variable can change depending on how it is called or invoked. However, dynamic scope is less commonly used in JavaScript and is beyond the scope of this article.