Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to understand closures in Javascript? [duplicate]

How can one understand closures in Javascript?

In general terms, a closure is a function bound to one or more external variables. When it is called, the function is able to access these variables. In JavaScript, closures are often implemented when functions are declared inside another function. The inner function accesses variables of the parent one, even after the parent function has terminated

In this statement, "a closure is a function bound to one or more external variables", does it mean we can do this : var myFun = Function(msg){...}; is it correct ?

What does it mean "even after the parent function has terminated"?

like image 297
user595234 Avatar asked Mar 27 '13 18:03

user595234


People also ask

How will you explain closures in JavaScript?

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function's scope from an inner function.

Is closure unique to JavaScript?

Closures are a very powerful yet underused feature unique to of JavaScript (and other ECMAScript languages). They essentially provide your code with private variables that other scripts can't access.

Is closure and lexical scope same?

The lexical scope allows a function scope to access statically the variables from the outer scopes. Finally, a closure is a function that captures variables from its lexical scope. In simple words, the closure remembers the variables from the place where it is defined, no matter where it is executed.

What are the disadvantages of closures in JavaScript?

There are two main disadvantages of overusing closures: The variables declared inside a closure are not garbage collected. Too many closures can slow down your application. This is actually caused by duplication of code in the memory.


3 Answers

closure is a function bound to one or more external variables

An example of this concept is that the function bar is bound to the external variables x, y, and z:

function foo(x, y) {
  var z = 3;

  return function bar(a, b, c) {
    return (a + b + c) * (x + y + z);
  };
}

var closure = foo(1, 2);
closure(5, 6, 7); // (5 + 6 + 7) * (1 + 2 + 3) = 24

The variable closure refers to the inner function bar returned from the call to foo. Invoking closure is like reentering the scope within foo, which gives visibility into all of foo's local variables and parameters.

even after the parent function has terminated

This means that after foo is executed, the returned function stored in the closure variable persists the state of foo. You can even create multiple independent closures by invoking foo again:

var closure = foo(1, 2);
closure(5, 6, 7); // (5 + 6 + 7) * (1 + 2 + 3) = 24

var closure2 = foo(0, 0);
closure2(5, 6, 7); // (5 + 6 + 7) * (0 + 0 + 3) = 21

/* closure2 does not affect the other closure */
closure(5, 6, 7); // (5 + 6 + 7) * (1 + 2 + 3) = 24
like image 143
Rick Viscomi Avatar answered Oct 17 '22 10:10

Rick Viscomi


I'm not sure where you are quoting from, but it sounds like it's referencing when the parent function has finished running.

like image 34
Dusty Avatar answered Oct 17 '22 10:10

Dusty


Your interpretation of external variables is incorrect. It really means it can do this:

function make_closure() {
  var x = 20;
  return function() {
    console.log(x);
  };
}

var closure = make_closure();
closure(); // Displays 20
like image 3
Dark Falcon Avatar answered Oct 17 '22 11:10

Dark Falcon