1. Home
  2. JavaScript Closures

The best JavaScript Closures Tutorial In 2024, In this tutorial you can learn Global Variables,Examples,Examples,Variable life cycle,Counter Dilemma,Examples,Examples,JavaScript nested functions,Examples,JavaScript Closures,Examples,Examples of analytical,

JavaScript Closures

JavaScript variables can be local or global variables.

Private variables can be used closure.

Global Variables

Function can access variables defined by the internal functions, such as?:

Examples

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

Function can also be accessed outside the function defined variables, such as:

Examples

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

An example of the back, a is a global variable.

In the web page belong to the global variable window object.

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

In the first instance, a is a local variable.

Local variables can only be used to define its internal function. For other function or script code is not available.

Even global and local variables of the same name, they are also two different variables. Modify one, it will not affect the value of the other.

Note If you do not declare a variable using the var keyword, then it is a global variable, even though it is defined within the function.

Variable life cycle

Scope of global variables are global, that is, throughout the JavaScript program, the global variables are everywhere.

In the variable declared inside a function, only work inside the function. These variables are local, local in scope; parameter of the function is localized, only inside the function work.

Counter Dilemma

If you want to imagine at some numerical statistics, and the counters are available in all of the functions.

You can use global variables, function sets the counter is incremented:

Examples

var counter = 0;

function add () {
counter + = 1;
}

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

// Counter is now 3

The counter value change occurred in the implementation of add () function.

But the question is, any script on the page can change the counter, even if there is no call to add () function.

If I declare a function within the counter, if not call the function will not modify the value of the counter:

Examples

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

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

// Intention is to output 3, but it did not, the output is 1!

The above code will not come out correctly, every time I call to add () function, the counter will be set to 1.

JavaScript inline function can solve this problem.

JavaScript nested functions

All functions can access global variables.

In fact, in JavaScript, all functions can access them on the floor of scope.

JavaScript supports nested functions. The nested function can access variables on the function layer.

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

Examples

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

If we can access plus outside () function, so that we can address the plight of the counter.

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

We need closure.

JavaScript Closures

Remember the function calls itself do? This function will do?

Examples

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

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

3 // counter

Examples of analytical

Add the word variable indicates the return value of the function calls itself.

Self-calling function is performed only once. Setting the counter to zero. And return to the function expression.

add variable as a function of use. The great part is that it can be accessed on the scope of the function layer counter.

This is called JavaScript closures. It has a private variable so that the function becomes possible.

Counter that the scope of protection of an anonymous function can only be modified by the add method.

Note Closures are accessible on one function scope variable inside a function, even if the layer function has been closed.

Hot Tools

Other Tools

Online Tutorial

Website Navigation

JavaScript Closures
10/30