JavaScript - Closures

A closure is fact of 'remembering' variables of the scope chain by the function when it is defined. Since function argument is just a local variable during execution, this:

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

is an equivalent to:

function makeSizer() { var size = 1; // or some other value return function() { document.body.style.fontSize = size + 'px'; }; } 

In the above case, the anonymous function, which is the return value, will 'remember' value of size variable and use it each time it is called.

MakeSizer should be treated as a 'factory' function that provides different values for local variable size.

You cannot acheive this kind of 'remembering' without using a function definition statement inside of 'factory' function.

Onclick of 18 your calling makeS. It does not return anything to size18,siz18 would be undefined here,if you want to make it work through clousre change makeS(),to return a method as similar to makeSizer

check this snippet

function makeSizer(size) { return function() { document.body.style.fontSize = size + 'px'; }; } var size12 = makeSizer(12); var size14 = makeSizer(14); var size16 = makeSizer(16); document.getElementById('size-12').onclick = size12; document.getElementById('size-14').onclick = size14; document.getElementById('size-16').onclick = size16; function makeS(size) { return function() { document.body.style.fontSize = size + 'px'; } } /* Let's see if that works */ var size18 = makeS(18); document.getElementById('size-18').onclick = size18; /* What about that? */ document.getElementById('size-20').onclick = makeS(20);

body { font-family: Helvetica, Arial, sans-serif; font-size: 12px; } h1 { font-size: 1.5em; } h2 { font-size: 1.2em; }

<h1>How closures work</h1> <a href="#" id="size-12">12</a> <a href="#" id="size-14">14</a> <a href="#" id="size-16">16</a> <div> <a href="#" id="size-18">18</a> <a href="#" id="size-20">20</a> </div>

Hope this helps

A closure refers to the concept of a function retaining access to variables in the lexical scope that it was declared within, even as it is passed, and called in different locations and scopes throughout a program.

Huh?

What does this mean then? Consider the below piece of code

function functionFactory() { var x = 1; return function () { return ++x; }; } var first = functionFactory(); var second = functionFactory(); console.log(first()); // outputs 1 console.log(first()); // outputs 2 console.log(first()); // outputs 3 console.log(second()); // outputs 1 

Each time functionFactory is called, it declares a private variable x, and then returns an anonymous function that mutates that variable. We can see in the output that each subsequent call of that returned function, first, returns a different value.

When we call second though, it returns 1. Why? Because it was created by a separate invokation of functionFactory, and so it has its own reference to its own closure over x.

Why do I care?

Because this is super-useful. In programming languages (like javascript, but other functional languages too) which treat functions as first-class variables, we can use closures for encapsulation of private variables.

So to your actual question...

The reason why your code is not working, is because onclick expects you to assign a function to it - instead you are assigning the output of your makeS function, which is void. makeSizer is returning a function, that establishes a closure over whatever number value is passed into it as a parameter, and is then assigned to the onclick variable of each element.

Hope this makes things clearer for you.