How to understand closures in Javascript?
closures, javascript
Solution
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
Problem
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"?