Closures Flashcards
What is a simple definition of closures?
The inner function can access the variables of the enclosing function due to closures in JavaScript. In other words, the inner function preserves the scope chain of the enclosing function at the time the enclosing function was executing, and thus can access the enclosing function’s variables.
what is the more elaborate explanation of closures?
function outer() {
var b = 10;
function inner() {
var a = 20;
console.log(a+b);
}
return inner; }
var X = outer();
var Y = outer();
Both X and Y are set to the following:
function inner() {
var a = 20;
console.log(a+b);
}
So when executing X, JavaScript has preserved the value of b, even though it would appear that b no longer exists. Therefore, on executing X the first time, the console will log 30.
But here’s the thing, if in the inner function we had incremented b (ie b++), the incrementation would occur and stick each time that X was executed. So the console would log 11, 12, 13, etc. The incremented value of b would be preserved even though if you did a console.log of X, there would be no sign of the variable b!!
What is the MDN definition of a closure?
A closure is the combination of a function and the lexical environment within which that function was declared.
The environment consists of any local variables that were in-scope at the time the closure was created.
Why are closures useful?
Closures are useful because they let you associate some data (the lexical environment) with a function that operates on that data. This has obvious parallels to object-oriented programming, where objects allow us to associate some data (the object’s properties) with one or more methods.
Where might you use a closure?
You can use a closure anywhere that you might normally use an object with only a single method.
What are the scopes of a closure?
For every closure, we have three scopes:
Local scope (own scope)
Outer function’s scope
Global scope
What are some common mistakes made with closures?
To be completed from the following url:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures
Creating closures in loops:
Prior to the introduction of the let keyword in ECMA2015, a common problem with closures occurred when they were created inside a loop.
What performance considerations exist with closures?
It is unwise to unnecessarily create functions within other functions if closures are not needed for a particular task, as it will negatively affect script performance both in terms of processing speed and memory consumption.
For instance, when creating a new object/class, methods should normally be associated to the object’s prototype rather than defined into the object constructor. The reason is that whenever the constructor is called, the methods would get reassigned (that is, for every object creation).
Give a code example of a closure where performance would be affected, together with a solution.
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
this.getName = function() {
return this.name;
};
this.getMessage = function() {
return this.message;
};
}
We could instead rewrite the previous code to avoid closures, as follows:
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
}
MyObject.prototype = {
getName: function() {
return this.name;
},
getMessage: function() {
return this.message;
}
}
However, redefining the prototype is not recommended. Better still is the following solution, which appends to the existing prototype:
function MyObject(name, message) {
this.name = name.toString();
this.message = message.toString();
}
MyObject.prototype.getName = function() {
return this.name;
}
MyObject.prototype.getMessage = function() {
return this.message;
}
So in the previous two solutions/examples, the inherited prototype can be shared by all objects and the method definitions need not occur at every object creation.
