Javascript closure definition says :
A "closure" is an expression (typically a function) that can have free
variables together with an environment that binds those variables
(that "closes" the expression).
Can some one explain to me the concept of free variables ? Is this concept Javascript specific or applies to other languages also ?
Free variables are simply the variables that are neither locally declared nor passed as parameter.
Source :
In computer programming, the term free variable refers to variables
used in a function that are not local variables nor parameters of that
function.1 The term non-local variable is often a synonym in this
context.
In javascript closures, those are simply the variables that the function takes (read and write) in the enclosing scope where is declared the closure or in a parent scope.
Look at this real world example :
Gol.prototype._ensureInit = function() {
...
var _this = this;
var setDim = function() {
_this.w = _this.canvas.clientWidth;
_this.h = _this.canvas.clientHeight;
_this.canvas.width = _this.w;
_this.canvas.height = _this.h;
_this.dimChanged = true;
_this.draw();
};
setDim();
window.addEventListener('resize', setDim);
...
};
In this example a closure points from the setDim function towards the variable _this declared in the enclosing scope (the _ensureInit function). This variable isn't declared in setDim nor passed. It's a "free variable".
Note that _this doesn't become a variable of the function setDim : another function declared in the same scope would share the same variable.
A "free-translation" could be: "out of scope" - variables.
Since ECMAscript uses lexical scoping, a free variable is a variable which was defined in a parent-scope and gets looked-up by a scope-chain search.
(function _outerScope() {
var foo = 42;
(function _innerScope() {
var bar = 100;
console.log( foo + bar ); // 142
}());
}());
In the above example, foo is a free variable within the context of _innerScope. it becomes very obvious if we have a quick glance into the underlying concepts of ECMAscript.
A Context is linked to an Activation Object (in ES3), respectively a Lexical Enviroment Record (in ES5), which contains things like: function declarations, variables declared with var and formal paramters, as well as a reference to all parent Activation Objects / Lexical Environments. If a variable needs to be accessed, the ECMAscript engine will first look into the AOs / LEs from the current Context itself; if it can't be found there, it looks into the parent AO's / LE's.
Since any Context stores this data in an array-like structure (don't forget we're talking about implementation level here, not Javascript itself), we are talking about Lexical Scope, because we search through all parent Contexts in order.
As an example:
var myModule = (function (){
var moduleVar; // closure variable
return function(){
// actual function
}
})();
the variable defined there is a closure variable. it can be used all over the closure itself but is not part of a global namespace.
I don't remember how many times I've read JS books and revise some topic in which the closure topic is there.
The answer is just an addition to the accepted answer.
The following example is excerpted from Modern JavaScript for the Impatient,
Cay Horstmann
// text is a free variable of the arrow function.
const sayLater = (text, when) => {
// vv
let task = () => console.log(text) // (heed no 'text' variable here) => console.log(text)
setTimeout(task, when)
}
Now you can grasp the meaning of
The term free variable refers to variables used in a function that are
not local variables nor parameters of that function.
Related
I can't figure out why an unexecuted closure can capture the outer variables.
I do read about some articles about execute context, lexical environment, memory management, but none of these can solve my question:
function foo() {
var a = 1;
return function() {
console.log(a);
}
}
var f = foo() // line 7
// HERE variable a was been captured
f = undefined // line 10
// HEAE variable a was been released
When the engine execute to line7, the foo execution context was created above global execution context, but after line7 the closure was never been execute, so the closure execution context was never been created, so was the lexical environment. foo execution context was been popped up, the variable a will be released.
I can't find what's wrong with my point.
So why and when the variable in closure be captured?
function foo() {
var a = 1;
return function() {
console.log(a);
}
}
Function inside function are known as closure.
When one function has another function inside it, and say top level function has some data like 'a' in this case, then all the inner functions will get access to that data, this will happen only if inner function has some reference about those variables.
Let's say if you have 'b' variable beside 'a' and you are not using it anywhere in inner functions this will be simply ignored by javascript. 'Closure' will not hold this value like 'a'.
This is actually where closure gives devs power.Check out below example -
const test = (num1) => (num2) => console.log(num1*num2);//closure is in action here
var s = test(100)
s(2); // this will give output of 200
Hope this helps.
Thanks.
Here is a discussion on bugs.chromium that is related to your question. As per this , even when the else block never executed , reference to an outer object used in function returned by else block is created and stored in heap. It is never garbage collected. Refer to below discussion :-
https://bugs.chromium.org/p/chromium/issues/detail?id=315190
The key point is lexical scope:
Lexical scope is the scope model used by the JavaScript language, which differs to some other languages which use dynamic scope. Lexical scope is the scope defined at lexing time.
Considering this:
var a = 1
console.log(a)
console.log(b)
var b = 2
console.log(c)
You can get the result:
1
undefinded
ReferenceError: c is not defined
So, you can see how JavaScript handling the variables: all variable are defined at lexing time and assignment at runtime. This is what they called hoisting.
Back to the question: closures capture variables at lexing time in which js engine read your code and defined variable and bind them.
Read more about compilation at: https://v8.dev/blog/background-compilation
I understand that every function in JavaScript is a first-class object and it has an internal property [[scope]] which hosts the binding records of the function's free variables. However, there are two special cases.
Is the function created by Function constructor also a closure? The function object created by Function constructor is special, because its [[scope]] may not refer to the lexical environments of its outer functions, but only the global context. For example,
var a = 1;
var fn = (function outer() {
var a = 2;
var inner = new Function('alert(a); ');
return inner;
})();
fn(); // will alert 1, not 2.
This is unintuitive. Is this also called closure?
If an inner function doesn't have any free variables, can we say a closure is formed when the inner function is created? For example,
// This is a useless case only for academic study
var fn = (function outer() {
var localVar1 = 1,
localVar2 = 2;
return function() {};
})();
In this case, fn refers to an empty function object which was created as an inner function. It has no free variables. In this case can we say a closure is formed?
Is the function created by Function constructor also a closure?
Yes, it closes over the global scope. That might be unintuitive because all other JavaScript closures close over their lexical scope, but it still matches our definition of a closure. In your example, a is a free variable, and resolves to the a in an other scope when the inner/fn function is called somewhere.
If an inner function doesn't have any free variables, can we still call it a closure?
Depends on whom you ask. Some say Yes, others call them "uninteresting closures", personally I say No because they don't reference an outer scope.
Note: Functions created with the Function constructor do not create
closures to their creation contexts; they always are created in the
global scope. When running them, they will only be able to access
their own local variables and global ones, not the ones from the scope
in which the Function constructor was called. This is different from
using eval with code for a function expression.
from https://developer.mozilla.org
According to the Closures concept it will store the variables of the outer lexical environment for future execution of its inner function. For example:
function makeYounger(age) {
function b() {
console.log("Original age is :" + age);
}
b();
return(function() {
return age / 2;
});
}
var displayAge = makeYounger(20);
console.log(displayAge());
In the above scenario, age is preserved by the Javascript engine to execute the inner function present in the return method.
Here comes the IIFE:
(function(window) {
var greeting = "Hello";
var fNameSpace1 = {
name : "Appu",
callName : function() {
console.log(greeting + fNameSpace1.name);
}
};
window.doer = fNameSpace1;
}) (window);
fNameSpace1.callName(); //To execute the inner function
In the above scenario according to the closures concept the variables greeting and fNameSpace1.name will be stored for future execution of the callname() function. Instead we are making use of the window object. I am confused why we are going with window if we have closures?
IIFE is useful to avoid global variable pollution when multiple functions are accessing a global variable
Closure functions are helpful when working with a local variable.
Difference between closures and IIFE's in javascript
An IIFE is just one specific way to A) Create a closure over the context in which it's defined, and B) Create a context in which to create other closures.
My question is what is the exact use of window object in this scenario if the javascript engine already stores fNameSpace1 object.Why are we creating a reference using window?
So it can be used outside the IIFE, by referring to it via the doer global that window.doer = ... creates.
There are dozens of different ways to do this. One of them does it by assigning to window like that. Another does it by returning the value and using a var statement:
var doer = (function() {
// ...
return fNamespace1;
})();
but again, there are dozens of different formations. The author of that particular one just preferred to write to a property on window as the way to create the global.
I understand that every function in JavaScript is a first-class object and it has an internal property [[scope]] which hosts the binding records of the function's free variables. However, there are two special cases.
Is the function created by Function constructor also a closure? The function object created by Function constructor is special, because its [[scope]] may not refer to the lexical environments of its outer functions, but only the global context. For example,
var a = 1;
var fn = (function outer() {
var a = 2;
var inner = new Function('alert(a); ');
return inner;
})();
fn(); // will alert 1, not 2.
This is unintuitive. Is this also called closure?
If an inner function doesn't have any free variables, can we say a closure is formed when the inner function is created? For example,
// This is a useless case only for academic study
var fn = (function outer() {
var localVar1 = 1,
localVar2 = 2;
return function() {};
})();
In this case, fn refers to an empty function object which was created as an inner function. It has no free variables. In this case can we say a closure is formed?
Is the function created by Function constructor also a closure?
Yes, it closes over the global scope. That might be unintuitive because all other JavaScript closures close over their lexical scope, but it still matches our definition of a closure. In your example, a is a free variable, and resolves to the a in an other scope when the inner/fn function is called somewhere.
If an inner function doesn't have any free variables, can we still call it a closure?
Depends on whom you ask. Some say Yes, others call them "uninteresting closures", personally I say No because they don't reference an outer scope.
Note: Functions created with the Function constructor do not create
closures to their creation contexts; they always are created in the
global scope. When running them, they will only be able to access
their own local variables and global ones, not the ones from the scope
in which the Function constructor was called. This is different from
using eval with code for a function expression.
from https://developer.mozilla.org
I've reading scope chain in Javascript but it didn't make any sense to me, could any one tell me what is scope chain and how it works with a graphic or something even an idiot can understand. I googled it but I didn't find something comprehensible :(
To understand the scope chain you must know how closures work.
A closure is formed when you nest functions, inner functions can refer to the variables present in their outer enclosing functions even after their parent functions have already executed.
JavaScript resolves identifiers within a particular context by traversing up the scope chain, moving from locally to globally.
Consider this example with three nested functions:
var currentScope = 0; // global scope
(function () {
var currentScope = 1, one = 'scope1';
alert(currentScope);
(function () {
var currentScope = 2, two = 'scope2';
alert(currentScope);
(function () {
var currentScope = 3, three = 'scope3';
alert(currentScope);
alert(one + two + three); // climb up the scope chain to get one and two
}());
}());
}());
Recommended reads:
JavaScript Closures
Closures
Any function call in ECMAScript ( core language that JS is based on ) produces a separate execution context, which run individually from one another. Inside of each execution context, this refers to the object in question, defaulting to whatever the function is attached to.
function foo() {
alert(this===window)
}
Would alert true, because the window is the object which owns the 'foo' method. Any variables defined in a function become accessed through that function's unique scope chain, environment.
function world() {
var name = 'global';
alert(name)
}
would alert 'global' obviously.
function world() {
var name = 'global';
(function() {
var name = 'country';
alert(name)
})();
alert(name)
}
In the latest example, when the first alert is invoked, Javascript determines that in the scope chain of the inner function that the identifier name is defined, so it doesn't have to look up the scope chain to grab it.
In the second alert invocation, name is also defined in the same context and alerts 'global';
function world() {
var name = 'global';
(function() { alert(name) })();
}
In this example, the name identifier is not defined in the same context and thus it has to travel up the scope chain to the outer function where name is defined, and it alerts global.
Reference:
http://www.digital-web.com/articles/scope_in_javascript/
http://www.jibbering.com/faq/faq_notes/closures.html
I know it's an old post but it is still helpful for developers. I wanted to do it little different way as it would be more friendly for beginners to understand scope chaining. Here is my modified version of code:
var currentScope = 0; // global scope
function a () {
var currentScope = 1, one = 'scope1';
alert(currentScope);
function b () {
var currentScope = 2, two = 'scope2';
alert(currentScope);
function c () {
var currentScope = 3, three = 'scope3';
alert(currentScope);
alert(one + two + three); // climb up the scope chain to get one and two
}
c();
}
b();
}
a();
This is about closure. You may use variables outer from scope in the inner scope:
function get_inner_scope () {
var outer = 'Outer variable value';
return function () {
alert(outer);
}
}
f = get_inner_scope();
f(); // alerts Outer variable value
More deatailed info with other samples by first google's link:
http://blogs.msdn.com/jscript/archive/2007/07/26/scope-chain-of-jscript-functions.aspx
Summary:
The scope chain is used to resolve the value of variable names in javascript. Without a scope chain the Javascript engine wouldn't know which value to pick for a certain variable name if there are multiple defined at different scopes. Scope chain in javascript is lexically defined, which means that we can see what the scope chain will be by looking at the code.
At the top of the scope chain is the global scope, which is the window object in the browser (global in NodeJS). Besides from the global scope, functions have their own scoping of variables. The scope chain can be determined by looking at where functions are defined.
When resolving a variable, inner functions first look at their own scope. If the variable cannot be found in its own scope it will climb up the scope chain and looks for the variable name in the environment where the function was defined. This look like this:
So in our image example when innerFoo uses the variable bar it first tries to find it within the scope of the innerFoo (code within function body). Then when it doesn't find it here it climbs up the scope chain to foo. In foo there is also no variable which is named bar. Therefore, it will climb up the scope chain and now look in the global scope. In the global scope is a variable named bar with a value of 10 to which bar will be resolved.
Example:
let foo = 1;
let bar = 1;
function test (bar) {
return function innerTestFunc () {
let foo = 10;
console.log(foo, bar);
}
}
const innerTestFunc1 = test(5);
const innerTestFunc2 = test(20);
innerTestFunc1(); // logs 10, 5
innerTestFunc2(); // logs 10, 20
In the above example we have a function which returns a function. We first store this function in the variables innerTestFunc1 and innerTestFunc2. This creates a closure which is basically a snapshot of the scope chain of the outer environment.
Then when the functions are executed the function requires a value for both the variables foo and bar. The value of foo can be resolved at the level of the innerTestFunc and is 10 for both. 10 is already found in innerFoo, so no need to climb the scope chain for foo.
In the case of the bar variable the function cannot find it in the innerFoo. Therefore, it will climb up the scope chain. It first encounters the variable bar in the function test, therefore it will resolve value of bar to whatever the value is in the test function (5, 20 in our example).
Scope chain in Javascript explained in layman terms
Alex is a happy guy,One fine day,walking down the road with his monthly salary in hand gets mugged.
Later he realizes that tomorrow is the last day to pay for his daughters tuition of 1000$.
He runs home,finds his savings of 400$,worries about the rest(600$).The immediate thought that flashes,is to borrow some from his father Mathew.
Mathew,the poor carpenter,devoid from any money sells his inherited bracelet for 300$ and lends it to his son Alex.
Alex having a good reputation in the society,gets the remaining 300$ from a local bank immediately and pays his daughter tuition on time.
Coming back to Scope chain in Javascript:
Alex-A function in javascript
Mathew-The immediate function,Alex is nested in.
Mathews parents-The immediate function Mathew is nested in.
Bank-Global variables.
function Bank() {
loan=300;
Mathew();
function Mathew() {
mathew=300;
Alex();
function Alex() {
savings:400;
alert('I need some money');
}
}
}
Bank();
Scope chain of Alex at this point looks like:
[savings:400]+[mathew:300]+[loan:300];