JavaScript Closure

JavaScript variables can be local or global.

Private variables can be utilized with closures.

Global Variables

A function can access variables defined inside the function, like this:

Example

function myFunction() {
    var a = 4;
    return a * a;
}

A function can also access variables defined outside the function, like this:

Example

var a = 4;
function myFunction() {
    return a * a;
}

In the latter example, a is a global variable.

In a web page, global variables belong to the window object.

Global variables can be used by all scripts on the page.

In the first example, a is a local variable.

Local variables can only be used within the function they are defined. They are not available to other functions or script code.

Global and local variables with the same name are different variables. Modifying one does not affect the other.

| | If a variable is declared without using the var keyword, it becomes a global variable, even if it is defined inside a function. | | --- | --- |

Variable Lifecycle

Global variables have a global scope, meaning they are accessible throughout the entire JavaScript program.

Variables declared within a function are local and only function within that function. These are local variables, and their scope is local; function parameters are also local and only function within the function.

Counter Dilemma

Imagine you want to count some values, and this counter should be accessible by all functions.

You can use a global variable and a function to increment the counter:

Example

var counter = 0;

function add() {
   return counter += 1;
}

add();
add();
add();

// The counter is now 3

The counter value changes when the add() function is executed.

However, any script on the page can change the counter, even without calling the add() function.

If I declare the counter inside a function, it cannot be modified without calling the function:

Example

function add() {
    var counter = 0;
    return counter += 1;
}

add();
add();
add();

// The intention was to output 3, but it outputs 1 each time!

The above code will not output correctly. Each time I call the add() function, the counter is reset to 1.

JavaScript nested functions can solve this problem.

JavaScript Nested Functions

All functions can access global variables.

In fact, in JavaScript, all functions can access their parent scope.

JavaScript supports nested functions. Nested functions can access variables of the parent function.

In this example, the nested function plus() can access the counter variable of the parent function:

Example

function add() {
    var counter = 0;
    function plus() {counter += 1;}
    plus();    
    return counter; 
}

If we could access the plus() function externally, this would solve the counter dilemma.

We also need to ensure that counter = 0 only executes once.

We need a closure.

JavaScript Closure

Remember the self-invoking function? What does this function do?

Example

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

// The counter is 3

Example Explanation

The variable add is assigned the return value of a self-invoking function.

The self-invoking function only runs once. It sets the counter to 0 and returns a function expression.

The add variable can be used as a function. The great part is that it can access the counter in the parent scope.

This is called a JavaScript closure. It makes it possible for a function to have private variables.

The counter is protected by the scope of the anonymous function and can only be changed using the add method.

| | A closure is a mechanism for protecting private variables. It forms a private scope during function execution, shielding private variables from external interference. Essentially, it creates a non-destructible stack environment. | | --- | --- |