Blog Single

JS Closures

Whenever a function is invoked, a new scope is created for that call. The local variable declared inside the function belong to that scope – they can only be accessed from that function -. It’s very important to understand that before moving further. Remember: The function scope is created for a function call, not for the function itself Every function call creates a new scope When the function has finished the execution, the scope is usually destroyed. A simple example of such function is this:

	function buildName(name) { 
	var greeting = "Hello, " + name; 
	return greeting;
		}
		 

It doesn’t get more simple than that. The function buildName() declares a local variable greeting and returns it. Every function call creates a new scope with a new local variable and. After the function is done executing, we have no way to refer to that scope again, so it’s garbage collected.

	function buildName(name) { 
		var greeting = "Hello, " + name + "!"; 
		var sayName = function() {
		var welcome = greeting + " Welcome!";
		console.log(greeting); 
			};
		return sayName; 
			}
			
		var sayMyName = buildName("Irie");
		sayMyName();  // Hello, Irie. Welcome!
		sayMyName();  // Hello, Irie. Welcome!
		sayMyName();  // Hello, Irie. Welcome!	
			
						
		 

A closure is a function which has access to the variable from another function’s scope. This is accomplished by creating a function inside a function. Of course, the outer function does not have access to the inner scope. The sayName() function has it’s own local scope (with variable welcome) and has also access to the outer (enclosing) function’s scope. It this case, the variable greeting from buildName().

After the execution of buildName is done, the scope is not destroyed in this case. The sayMyName() function still has access to it, so it won’t be garbage collected. However, there is not other way of accessing data from the outer scope except the closure. This is the big gotcha of the entire concept. The closure serve as the gateway between the global context and the outer scope. I cannot access directly variables from the outer scope if the closure is not allowing it. This way, I can protect the variables from the outer scope. They are – by all means – private and the closure can serve as a getter or setter for them.

#2.Why closures are so important?

Use closures to store private data

Javascript’s object system does not particularly encourage or enforce information hiding. The name of every property is a string, and any piece of a program can get access to any of the properties of an object simply by asking for it by name. Features such as for...in, loops and ES5’s Object.keys() and Object.getOwnPropertyNames() functions even make it easy to learn all the property names of an object.

Through closure, you can achieve real private data in Javascript. As we saw above, the closure is the gateway between the outer scope and the rest of the program. It can choose what data to expose and what not. Let’s see in example:

	function initializeData() {
		var myVar = 1; 
		return { 
			getVar: function() {
			return myVar;
				},
		setVar: function(v) {
			myVar = v;
			}
		};
	}
						
	obj = initializeData();
						
	console.log(obj.getVar()); // 1
						
		obj.setVar(2);
		console.log(obj.getVar()); // 2
						
		obj.setVar("string");
		console.log(obj.getVar()); // string
						
							 

Here the function returned an object which has 2 functions. Because they are properties of the object which is bound to the local scope, they are closures. Through getVar and setVar, I can manipulate the myVar property but I don’t have direct access to it.

Use closures to create iterators

Due to the fact that the data from outer scope is preserved, creating iterators with closures is fairly easy. The buildContor() function from above it’s actually an iterator. Every call creates a new iterator with a fixed start index. Then, at every successive invocation of the iterator, the next value is returned.

?