Javascript Closures

Closures in Javascript are (internal or nested) functions that refer to (outer) independent variables. Simply put, the function declared in the closure remembers the environment in which it was created.

Lexical scope

Consider the following:

function outerFunc() {
    var outerVar;
    var func = function () {
        var innerVar
        //Do something here
        x = innerVar + outerVar
    };
    return func
}

outerFunc() creates a local variable outerVar and then a function called func(). func() is an inner function that is defined inside outerFunc() and is only available within the body of that function. func() has its own local variable called innerVar, and also it has access to the variable of the outer function. Thus, it can use the variable name declared in the parent function.

This is an example of lexical scoping. The scope of a variable, in JavaScript, is defined by its location within the source code and nested functions have access to variables declared in their outer scope.

Assume, you need to add buttons to a web page to adjust the text size. To do this, you can specify the font-size of the body element in px, and then set the size of other elements on the page using em.

Closure

Consider the following:

function Func() {
    var name = "SomeName";
    function showName() {
        alert(name);
    }
    return showName;
}

var someFunc = Func();
someFunc();

n this example, the showName() inner function was returned from the outer function before being executed.

This code may confuse you because generally, local variables within functions only exist during the function’s execution. As soon as Func() has finished executing, there are grounds to assume that the name variable will no longer be accessible.

However, this is possible, because the someFunc()  has become a closure.

A closure is a special kind of object that combines two things: a function, and the environment in which that function was created. The environment consists of any local variables that were in-scope at the time that the closure was created.

In this example, someFunc() is a closure that combines both the showName function and the“SomeName” string that existed when the closure was created.

Closures in practice

Why are closures actually useful? A closure allows you to bind some data to a function that takes action on that data. This has the analogy with OOP where objects allow us to bind data with methods.

You can utilize closures anywhere instead of just an object with only a single method. There are a lot of situations across the web, where you might want to use closures.

A significant part of the JavaScript code in the web is event-based. A programmer defines behavior and attaches it to an event. Eventually, the event is triggered by a user. It may be a click or a keypress. The code is basically attached as a callback — a single function that is executed in the response to the event.

body {
    font-family: Segoe, SegoeUI, Verdana;
    font-size: 12px;
}

h1 {
    font-size: 1.5em;
}

h2 {
    font-size: 1.2em;
}

Buttons will change the font-size property of the body element. This change will affect other page elements, because of the relative units.

function makeSizer(size) {
    return function () {
        document.body.style.fontSize = size + 'px';
    };
}

var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);

We have three size functions that resize the body. To attach them to buttons:

document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;

Test on JSFIDDLE

Further Read

To get more in-depth info about closures, you must study the following resources:

GitHub Online Book: You Don’t Know JS: Scope & Closures

stackoverflow.com: How do JavaScript closures work?

stackoverflow.com: What is a practical use for a closure in JavaScript?

dmitrysoshnikov.com: ECMA-262-3 in detail. Chapter 6. Closures

dmitryfrank.com: How do JavaScript closures work under the hood

Pluralsight course: Advanced JavaScript

YouTube: JavaScript Closures 101: What is a closure?

tutsplus.com: Closures: Front to Back

medium.com: Master the JavaScript Interview: What is a Closure?