D4mations.com

Closures in JavaScript



Link for all dot net and sql server video tutorial playlists
http://www.youtube.com/user/kudvenkat/playlists

Link for slides, code samples and text version of the video
http://csharp-video-tutorials.blogspot.com/2014/12/closures-in-javascript.html

In this video we will understand closures in JavaScript with an example.

What is a closure
A closure is an inner function that has access to the outer function’s variables in addition to it’s own variables and global variables. The inner function has access not only to the outer function’s variables, but also to the outer function’s parameters. You create a closure by adding a function inside another function.

JavaScript Closure Example

function addNumbers(firstNumber, secondNumber)
{
var returnValue = “Result is : “;
// This inner function has access to the outer function’s variables & parameters
function add()
{
return returnValue + (firstNumber + secondNumber);
}
return add();
}

var result = addNumbers(10, 20);
document.write(result);

Output : Result is : 30

The following code Returns the inner function expression

function addNumbers(firstNumber, secondNumber)
{
var returnValue = “Result is : “;
function add()
{
return returnValue + (firstNumber + secondNumber);
}
// We removed the parentheses. This will return the inner function expression without executing it.
return add;
}

// addFunc will contain add() function (inner function) expression.
var addFunc = addNumbers(10, 20);
// call the addFunc() function and store the return value in result variable
var result = addFunc();

document.write(result);

Returning and executing the inner function

function addNumbers(firstNumber, secondNumber)
{
var returnValue = “Result is : “;
function add()
{
return returnValue + (firstNumber + secondNumber);
}
// We removed the parentheses. This will return the inner function add() expression without executing it.
return add;
}

// This returns add() function (inner function) definition and executes it. Notice the additonal parentheses.
var result = addNumbers(10, 20)();

document.write(result);

Original source

d4mer

, , , , , ,

17 responses to “Closures in JavaScript”

  7. Very well explained. But why do we need to use Closure? What is it for? Why is it important? There are many definitions of Closures.. "it retains state and scope after executes", it's simply a function that refer to a variable in its parent scope", "making your code more efficient by only creating single instance of objects".. too many definitions, and I don't know which one is true. Can you please explain what is the purpose of Closure and why we need to use it? Thanks!

Leave a Reply