JavaScript closures

1. JavaScript Closures

JavaScript variables can be local variables or global variables.

Private variables can use closures.

1.1 Global variables

Functions can access variables defined inside the function, such as:

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

Functions can also access variables defined outside the function, such as:

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

In the latter instance, a is a global variable.

Global variables in web pages belong to the window object.

Global variables apply to all scripts on the page.

In the first instance, a is a local variable.

A local variable can only be used inside a function that defines it. Not available for other functions or script code.

Global and local variables are two different variables even though they have the same name. Modifying one will not affect the value of the other.

1.2 Variable life cycle

The scope of global variables is global, that is, in the entire JavaScript program, global variables are everywhere.

Variables declared inside a function only work inside the function. These variables are local variables, and the scope is local; the parameters of the function are also local and only work inside the function.

1.3 The Counter Dilemma

Imagine if you want to count some number, and the counter is available in all functions.

You can use global variables, functions that set the counter to increment:

var counter = 0 ;
 
function add() {
   return counter += 1;
}
 
add();
add();
add();
 
// counter is now 3

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

But here comes the problem, any script on the page can change the counter, even if the add() function is not called.

If I declare the counter inside the function, the value of the counter cannot be modified without calling the function:

function add() {
    var counter = 0;
    return counter += 1;
}
 
add();
add();
add();
 
// The original intention was to output 3, but it backfired, the output is all 1!

1.4 JavaScript Embedded Functions

All functions can access global variables.

In fact, in JavaScript, all functions have access to the scope above them.

JavaScript supports nested functions. Nested functions can access function variables one level above.

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

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

This solves the counter dilemma if we can access the plus() function externally.

We also need to make sure that counter = 0 is only executed once.

1.5 JavaScript Closures

Remember when functions called themselves? What will this function do?

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

1.6 Instance Analysis

The variable add specifies the return word value of the function call itself.

A self-invoking function is executed only once. Set the counter to 0. and returns a function expression.

The add variable can be used as a function. The cool part is that it has access to counters that are scoped one level above the function.

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

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

Guess you like