Closures in JavaScript

Closures are not hard to understand once you understand the core concept behind it. You won't understand it better if you read academic papers or anything like that so lets start by looking at some examples. 

Most basic closure example

	function func1(){
	var name = "Chrome";
	function displayName(){
	alert(name);
	}
	displayName();
	}
	func1(); //alerts Chrome

view raw closure-1.js hosted with ❤ by GitHub

	function func2(){
	var name = "Chrome";
	function displayName(){
	alert(name);
	}
	return displayName;
	}
	var myFunc = func2();
	myFunc(); //alerts Chrome

view raw closure-2.js hosted with ❤ by GitHub

Here func1 creates local variable name and a function. the function doesn't have a local variable but reuses the variable defined in the parent function. 

In the func2 there's a slight difference. Unlike in func1 here you return the displayName function. so in the displayName function definition gets assigned to the variable myFunc. But it also alerts 'Chrome' which was not a local variable to the displayName function.

You'll see Chrome in the alert is because displayName has become a closure. Closure is a special kind of object which combines

1. a function
2. and the environment in which that function was created (environment consists of local variables that were in-scope at that time)

The environment consists of any local variable that were in-scope at the time that closure was created. It will be kept alive even after the function returns. In other words, whenever you see a function keyword within another function, the inner function has access to the variables in outer function. It's a stack-frame which is not de-allocated when the function returns. The local variables are not copied, they are kept by reference.

	//Nested closures
	function func1(){
	var var_func1 = "1";
	function func2(){
	var var_func2 = "2";
	console.log(var_func1);
	function func3(){
	var var_func3 = "3";
	console.log(var_func2);
	}
	func3();
	}
	func2();
	}
	func1();
	//1
	//2

view raw nested-closure.js hosted with ❤ by GitHub

Closures in practice

Closures can be used to different things. You can emulate private methods using closures (module pattern)

	var counter = (function () {
	var privateCounter = 0;
	function changeBy(val) {
	privateCounter += val;
	}
	return {
	increment: function (val) {
	changeBy(val);
	},
	decrement: function (val) {
	changeBy(-val);
	},
	value: function () {
	return privateCounter;
	}
	}
	})();
	console.log(counter.value()); //0
	counter.increment(5);
	counter.decrement(2);
	console.log(counter.value()); //3

view raw closure-private-variables.js hosted with ❤ by GitHub

Creating closures in loops

You must be careful when creating a closure inside a loop. Read more about it here at MDN article. Stackoverflow

Performance considerations

Creating closures will have some impact on the script performance from processing speed and memory consumption. When creating new object/class, methods should normally be associated to the object prototype rather than defined into the object constructor. This is because whenever constructor is called, the method will get reassigned for every object creation. (However redefining the prototype is not recommended). 

Closure vs object performance (marijnhaverbeke)

Resolving this with Closures

	var outerObj = {
	myName: "outer",
	outerFunction : function () {
	var self = this;
	var innerObj = {
	myName: "inner",
	innerFunction: function () {
	console.log(self.myName, this.myName); //outer inner
	}
	};
	innerObj.innerFunction();
	console.log(this.myName); //outer
	}
	};
	outerObj.outerFunction();

view raw advanced-closure1.js hosted with ❤ by GitHub

sources:

SO: How closures work, Closures MDN, SO: Practical use of Closures, SO Closures