JavaScript Tutorial
JS - Introduction JS - Basic JS - Placement JS - Output JS - Statements JS - Syntax JS - Variables JS - Comments JS - Data Types JS - Operators JS - Operator Precedence JS - Condition JS - Switch JS - Functions JS - Objects JS - Loops For JS - Loops While JS - Break JS - Strings JS - String Methods JS - Numbers JS - Number Methods JS - Arrays JS - Array Methods JS - Array Iteration JS - Events JS - Event Listener JS - Event Propagation JS - Date JS - Math JS - Random JS - Boolean JS - Type Conversion JS - RegExp JS - Exception JS - Scope JS - Debugging JS - Hoisting JS - Strict Mode JS - this Keyword JS - Mistakes JS - Best Practices JS - Performance JS - Form Validation JS - ES6 Features
JS Objects
Object Definitions Object Properties Object Methods Object Constructors Object Prototypes
JS Functions
Function Definitions Function Parameters Function Call Function Apply Function Closures
JS HTML DOM
DOM Introduction DOM Methods DOM Selectors DOM HTML DOM CSS DOM Attributes DOM Navigation
JS Browser BOM
JS - Window JS - Screen JS - Location JS - History JS - Navigator JS - Popup Alert JS - Timing JS - Cookies
JS AJAX
AJAX - Introduction AJAX - XMLHttp AJAX - Request AJAX - Response AJAX - PHP
JS JSON
JSON - Introduction JSON - Syntax JSON - Data Types JSON - Parse JSON - Stringify JSON - Objects JSON - Arrays JSON - PHP JSON - JSONP
JS References
JavaScript Reference JavaScript Methods HTML DOM Reference

JavaScript Closures

JavaScript variables can belong to the local or global scope.

Global variables can be made local (private) with closures.


Why we need Closure?

Suppose we want to use a variable for counting something, and we want this counter to be available to all functions.

We could use a global variable, and a function to increase the counter:

Run code

There is a problem with the solution above: Any code on the page can change the counter, without calling increment().

A JavaScript inner function can solve this.


JavaScript Nested Functions

JavaScript supports nested functions. Nested functions have access to the scope above them.

In this example, the inner function has access to the counter variable in the outer function:

Run code

Nested function could have solved our previous problem, if we could reach the inner() function from the outside.

We also need to find a way to execute counter = 0 only once.


JavaScript Closures

A closure is the combination of a function and the lexical environment within which that function was declared.

A closure has access to the variable from another function’s scope. This is accomplished by creating a function inside a function. Of course, the outer function does not have access to the inner scope.

Run code

The variable increment is assigned the return value of a self-executing function.

The self-executing function only runs once. It sets the counter to zero (0), and returns a function expression.

A closure is a function having access to the parent scope, even after the parent function has closed.