Understanding Closure in JavaScript

 

Closure is unlike a function and part of enclosing function which can captures variable defined locally in enclosing function. And these captured local variables are accessible even when the function is invoked outside of their scope.
 
So closures functions are like storage (it remembers enclosing variables value even when function is invoked outside of their scope) for enclosing variables and functions which closure function can access later.
 
 
Closure Examples
//Simple Example of Closure.

function showName(firstName){
	var nameIntro = "Your Name is ";

	return function makeFullName(lastName){
		return nameIntro + firstName + " " + lastName;
	}

}

//call to closure functions can be done in following ways:

//ShowName is returning reference to closure function.
var  makeFullName = showName("Deepak"); 

/**
you will get ReferenceError: firstName name is not defined.
since it is not accessible outside of the scope.
*/
//alert(firstName); //ReferenceError: firstName name is not defined.

/**
 Now we are calling closure function by passing LastName 
 You can see here your closure function remembers firstName value passed earlier.
*/
alert(makeFullName("Singh"));  // Deepak Singh

alert(showName("Deepak")("Singh"));  // Deepak Singh
/** 
	Don't get confused, It is not closure.
	makeFullName() function will act as an inner function here.
*/
function showName(firstName, lastName){
	var nameIntro = "Your Name is ";

	function makeFullName(){
		return nameIntro + firstName + " " + lastName;
	}
	
	return makeFullName();
}

/**
you will get ReferenceError: makeFullName name is not defined., 
if you try to access "makeFullName()". 
Because it will act as a inner function and not accessible outside of the outer function.
*/
alert(makeFullName()); //ReferenceError: makeFullName name is not defined.
alert(showName("Deepak", "Singh")) // Your Name is Deepak Singh.
function doMathOperationOn(x){

	return {
		add : function(y){
			return x+y;
		},
		subtract: function(y){
			return x - y;
		}

	};
}

var mathOp = doMathOperationOn(10); // You got the reference to Outer 
/**
see the Magic of closure:). It remembers the value of x (which is 10). 
*/
console.log(mathOp.add(2)); // Output:12 
console.log(mathOp.subtract(2)); // Output:8

 


 

Closure will help you to implement Encapsulation in JavaScript. Below is the example of Encapsulation in JavaScript by applying closure. 

function Person(){
	 var firstName;
	 var lastName;
	return {
		
		 setFirstName: function(firstName){
		 	this.firstName = firstName;
		 },

		 getFirstName: function(){
		 	return this.firstName;
		 },

		 setLastName: function(lastName){
		 	this.lastName = lastName;
		 },
		 getLastName : function(){
		 	return this.lastName;
		 },

		 toString:function(){
		 	return this.firstName+ " "+this.lastName;
		 }
	};
}

var p = new Person();

p.setFirstName("Deepak");
p.setLastName("Singh");
/**
	You can access firstName and lastName using setter and getter only
*/
//alert(firstName); ReferenceError: firstName is not defined
//alert(lastName); ReferenceError: lastName is not defined

alert(p.getFirstName()); // Deepak
alert(p.getLastName()); // Singh
alert(p.toString()); // Deepak Singh
 
 
Hope you have got fare understanding of Closure concept in JavaScript.
 
Keep Reading and Keep Learning.