What is Closure, help me to understand?

JavaScript
1

I learned a quite little about closures but I want someone to tell me in an easy way with the example of using closures?? :unhappy:

2 
function getCounter()
{
    var counter = 0;

    return function count() {
        return ++counter;
    }
}

var count1 = getCounter();
count1(); // 1
count1(); // 2
var count2 = getCounter();
count2(); // 1
count1(); // 3
3

This offers a little more explanation:

1 Like
4

What is the meaning of function die but closure still exist and return the value?

5

that’s the meaning of Closures.

6

Taking Dormiliich’s example above, you have a function getCounter() which initializes a counter variable and returns a second function count().

You then call getCounter() and assign the function it returns to a count1 variable. At this point the getCounter() function has effectively “died” — it has been executed, returned a value and ceases to exist. However, thanks to closure, the count() function still retains a reference to the counter variable declared in its parent function and can manipulate this variable accordingly (i.e. by incrementing it).

Does that make sense?

1 Like
7

The easiest way I’ve heard it explained is:

A function has access to the variables that were available when the function was created.

This is why the count function continues to have access to counter.

8

Yup understood but when to use closures, I mean what is the main purpose of using closures instead of only default function?

9

You could try to code the above counter example without a closure. then you know why you’d use one.

10

The purpose of using closure is for when you need to use a function but cannot provide any arguments for it.
The most fundamental understanding of what a closure is, without a lot of mumbo jumbo, is that the technique of closure allows a returned inner function to retain knowledge of variables from its parent.

Using that getCounter example, the inner function count is returned from the parent called getCounter. That inner function still retains knowledge of the variable called counter, which is from the parent function.

The following image from http://opensourceforgeeks.blogspot.co.nz/2016/05/hide-variable-from-console-access.html helps to explain the bulk of the technique:

942×466 177 KB

2 Likes
11

To start with, I think that Closure isn’t such a great name and isn’t really descriptive. I needed it described to me in a few different ways before it sunk in.

Remember that scope is where a variable is available in your code. Here are a couple of descriptions and links to chapters about how they work. If you have a quick read of these resources they might help.

Closure is when a function is able to remember and access its lexical scope even when that function is executing outside its lexical scope. - Kyle Simpson https://github.com/getify/You-Dont-Know-JS/blob/master/scope%20%26%20closures/ch5.md

and

This has to do with the vitality of the state of a function…The function has access to the context in which it was created. - Douglas Crockford https://www.safaribooksonline.com/library/view/javascript-the-good/9780596517748/ch04s10.html

and

Closures are functions that refer to independent (free) variables (variables that are used locally, but defined in an enclosing scope). In other words, these functions ‘remember’ the environment in which they were created. https://developer.mozilla.org/en/docs/Web/JavaScript/Closures

1 Like
12

Is it sometimes called private variables?

13

you could call it that, but ‘private variable’ is AFAIK no official term and could easily be confused with ‘private property’, which is something completely different.

14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.