Scope and Lexical Environment in JavaScript

Hi there, another fan of JavaScript! 🚀

We're exploring JavaScript's scope and lexical environment today, which is an exciting topic. To comprehend how variables are accessed and changed in your code, you must grasp some basic ideas.

Let's embark on this journey with some intriguing examples:

Case 1: Accessing Global Variables

function outer() {
    console.log(outerVariable); // Output: 42
}

var outerVariable = 42;
outer();

Surprisingly, in Case 1, function outer can access the variable outerVariable from the global scope. It seems like JavaScript has some magic going on behind the scenes.

Case 2: Nesting Functions

function outer() {
    inner();
    function inner() {
        console.log(outerVariable); // Output: 99
    }
}

var outerVariable = 99;
outer();

In Case 2, even within a nested function (inner), we can still access the global variable outerVariable. This suggests that the scope chain goes beyond the immediate parent function.

Case 3: Local Variable Takes Precedence

function outer() {
    var localVar = "I'm local!";
    inner();
    function inner() {
        console.log(localVar); // Output: I'm local!
    }
}

var localVar = "I'm global!";
outer();

Now, in Case 3, a local variable localVar inside function outer takes precedence over the global variable. It's all about hierarchy!

Case 4: Scope Chain Limitations

function outer() {
    var localVar = 10;
    inner();
    function inner() {
        console.log(localVar); // 10
    }
}
outer();
console.log(localVar); // ReferenceError -> Not Defined

In Case 4, a function can access a global variable, but the global execution context can't access any local variable. It's like a one-way street.

Understanding Lexical Environment

To demystify this magic, let's talk about Lexical Environment. It's a fusion of local memory and the lexical environment of its parent.

function outer() {
    function inner() {
        // logic here
    }
    inner(); // inner is lexically inside outer
} // outer is lexically inside global execution

The process of going one by one to the parent and checking for values is called the scope chain or lexical environment chain. It's like a treasure hunt through your code hierarchy. Whenever an execution context is created, a lexical environment(LE) is also created and is referenced in the lexical execution context(in memory space) of parent.

Lexical or Static Scope

Lexical or static scope refers to the accessibility of variables, functions, and objects based on their physical location in the source code. Imagine it as a set of nested boxes, where the inner box can access everything in the outer boxes.

Global {
    Outer {
        Inner
    }
}
// Inner is surrounded by the lexical scope of Outer

In the TLDR version, an inner function can access variables in outer functions, no matter how deep it's nested. However, anything outside its scope is off-limits.

Scope Chain Unveiled

The whole chain of lexical environments is called the scope chain. It defines whether a function or variable is present inside a scope or not. Each function has its unique scope chain, and understanding it is key to mastering JavaScript's behaviour.

So, there you have it!

Thank you! 💻✨