Lexical Scope and Closure in JavaScript

 

Understanding Lexical Scope and Closure in JavaScript

Introduction

JavaScript is a powerful programming language that has some unique concepts which can be a bit tricky to understand, especially for beginners. Two of these concepts are lexical scope and closure. Let’s break them down in a simple and easy-to-understand manner.

What is Lexical Scope?

In JavaScript, scope refers to the visibility or accessibility of variables, functions, and objects in some particular part of your code during runtime. In other words, it defines the portion of the code where a variable or a function can be accessed.

Lexical scope, also known as static scope, is a type of scope in JavaScript. The word “lexical” refers to the fact that lexical scoping uses the location where the variable was declared within the source code to determine where that variable is available. Nested functions have access to variables declared in their outer scope.

Let’s look at an example:

function outerFunc() {
    var outerVar = 'I am outside!';
    
    function innerFunc() {
        console.log(outerVar); // Output: I am outside!
    }
    
    innerFunc();
}

outerFunc();

In the above code, innerFunc is able to access the variable outerVar because it’s defined in its lexical scope - the area of code where it’s physically written.

What is Closure?

A closure is a JavaScript feature where an inner function has access to the outer (enclosing) function’s variables—scope chain—even after the outer function has returned. This means that a closure gives you access to an outer function’s scope from an inner function.

Let’s modify the previous example to illustrate closure:

function outerFunc() {
    var outerVar = 'I am outside!';
    
    function innerFunc() {
        console.log(outerVar);
    }
    
    return innerFunc;
}

var myInnerFunc = outerFunc();
myInnerFunc(); // Output: I am outside!

In this example, outerFunc returns innerFunc. We assign the returned function to the variable myInnerFunc and then we call myInnerFunc(). Even though outerFunc has finished executing and its execution context is gone from the stack, myInnerFunc still has access to outerVar. This is closure.

Lexical Scope vs Closure

The key difference between lexical scope and closure is how they relate to function execution and variable access:

• Lexical Scope is about where variables and blocks of scope are authored, at write time.
• Closure is about preserving access to variables from their original scope, even when that scope has finished executing.

In simpler terms, lexical scope is about where things are physically written in the code. Closure is about keeping variables around even after the function has returned.

Conclusion

Understanding lexical scope and closures is crucial for writing efficient JavaScript code. They are fundamental concepts that underpin many of the powerful features of the JavaScript language. Remember, practice makes perfect. So, keep coding and exploring these concepts in different scenarios!

Happy coding! 🚀