JavaScript Closures

"What is JavaScript Closure?"

This question frequently arises during interviews. If you're unsure, here is everything you should know!

Lexical Scope

To understand closures, we need to grasp the concept of lexical scope.

Lexical scope refers to how variable names are resolved in a programming language. It defines the visibility and accessibility of variables based on their location in the source code.

How Lexical Scope Works

When a function or block is defined, it creates a scope.

Variables declared within that scope are accessible within that scope and any nested scopes (such as inner functions or blocks).

However, variables declared in an inner scope do not affect the outer scope.

Common Scenarios

Let's explore two scenarios where new lexical scopes are created in JavaScript.

01. Function Definitions

When you define a function, it creates a new lexical scope. Variables declared within the function are accessible only within that function.

function sayHello () {
    const message = 'Hello, World!';
    console.log(message);
}

02. Block Scopes (using let or const)

ES6 introduced block-scoped variables (let and const). Variables declared with let or const respect block boundaries.

if (isValid()) {
    const message = 'hello';
    console.log(message);
} else {
    const message = 'error';
    console.log(message)
}

What is a Closure?

A closure in JavaScript is the combination of a function bundled together (enclosed) with references to its surrounding state, known as the lexical environment.

In simpler terms, a closure allows you to access an outer function's scope from an inner function. These closures are created every time a function is defined, at the moment of function creation.

Example

Let's consider an example:

function init() {
    const message = "Hello, World!";

    function showMessage() {
        console.log(message);
    }

    showMessage();
}

init(); // Outputs: "Hello, World!"

In this example:

• init() creates a local variable called message and defines an inner function called showMessage().
• The showMessage() function has no local variables of its own but can access the name variable declared in its parent function, init().

This behavior exemplifies lexical scoping, where nested functions have access to variables declared in their outer scope.