Closures in javascript seems a hard topic as it is portrayed by the majority of people, in this simple explanation i will break it down and show you that in reality it is not.
Let's start with a simple well known example:
function createCounter(){
var i = 0;
return function(){
console.log(i++);
}
}
var x = createCounter();
In this example i firstly have defined a function createCounter that contains a var definition i initialized to 0 then i return an anonymous function.
Inside this function i simply increment the value of i.
At the end i have defined the variable x that once executed it will contain the returned anonymous function, to clarify it will contain something like this:
function(){
console.log(i++);
}
I said "something like this" because it will not only contain the function seen before but it will enclose the i variable, what i mean is that this function will have a reference to the outer scope's previously defined i variable.
Now... What happens when we execute the x variable? It prints out the value 0, 1, 2, 3.... but the strange thing is that it remembers the state of the i variable and it increments it, well, this feature it's the so called closure.
You have access from your function to the outer scope to a reference of i, if you see the definition given in the Javascript MDN you will see that fits in perfectly:
Another example
Let's do another example, this time i will add a new little little difference:
function createCounter(){
var i = 0;
var m = 5;
return function(){
console.log(i++);
}
}
var x = createCounter();
If we execute this example you will see that inside the x variable enclosed in you have only the i variable and you can't see the m variable; That means that you have only enclosed the used variables.
To try this type console.dir(x)
I hope that in this breaf explanation i have clarified a lot of misconceptions about closures.
Top comments (0)