CODEWITHSUNDEEP
javascriptfunctionclosures
Vicky
Vicky

Reputation: 3310

Using closures in Javascript

I have come across this javascript code. 

var digit_name = function() {
    var names = ['zero', 'one','two'];
    return function(n) {
        return names[n];
    };
}();

alert(digit_name(1));

The output is one. I understand that the inner function is being assigned to the variable digit_name. What is the need for adding parentheses in the 6th line after the code of outer function. Can anyone tell what exactly is going on?

Upvotes: 2

Views: 185

Answers (6)

LetterEh
LetterEh

Reputation: 26696

There are two very quick processes here.

If we were to write this:

function makeDigitReader () { var names; return function (n) { return names[n]; }; }
var myDigitReader = makeDigitReader();

You would correctly guess that myDigitReader would be given the inner function.

What they're doing is skipping a step. By adding the parentheses, what they're doing is firing the function the instant that it's defined.

So you're getting this happening:

var myDigitReader = function () {
    var names = [...];
    return function (n) { return names[n]; };
};

myDigitReader = myDigitReader();

See what's happened? You've returned the inner function as the new value to what used to be the outer function. So the outer function doesn't exist anymore, but the inner function still has access to the names array.

You can return an object instead of a function, as well. And those object properties/functions would have access to what was initially inside of the function, as well.

Normally, you will either see these immediately-invoking functions wrapped in parentheses var myClosure = (function() { return {}; }());.

If you intend to run one without assigning its return to a value, then you need to put it in parentheses, or add some sort of operand to the front of it, to make the compiler evaluate it.

!function () { doStuffImmediately(); }(); // does stuff right away
function () { doStuffImmediately(); }(); // ***ERROR*** it's an unnamed function

Hope that answers all of the questions you might have.

Upvotes: 0

mostar
mostar

Reputation: 4821

var digit_name = function() {...}; => digit_name is a function

var digit_name = function() {...}(); => digit_name is an object returned by the function

Upvotes: 1

Sergiu Dumitriu
Sergiu Dumitriu

Reputation: 11601

Let's give some names to these functions to better understand what's going on:

var digit_name = function outer() {
    var names = ['zero', 'one','two'];
    return function inner(n) {
        return names[n];
    };
}();

alert(digit_name(1));

So, there are two functions at play here: inner and outer. You're defining a function called outer, whose purpose is to create a closure scope capturing the names array, and defining and returning another function that has access to this closure. The parentheses at line 6 mean call the function, so the value that gets assigned to the digit_names variable isn't the outer function, but the inner one.

Upvotes: 1

WouterH
WouterH

Reputation: 1356

var digit_name = function() { // Create outer function
    var names = ['zero', 'one','two']; // Define names array, this is done when the outer function is ran
    return function(n) { // Return the new inner function, which gets assigned to digit_name
        return names[n];
    };
}(); // Execute the outer function once, so that the return value (the inner function) gets assigned to digit_name

Upvotes: 0

Chris Cherry
Chris Cherry

Reputation: 28554

The ending () you see make that outer function execute immediately. So digit_name ends up storing the resulting inner function, as opposed to a pointer to the outer function.

For more information see: What is the purpose of a self executing function in javascript?

Upvotes: 4

Ankur
Ankur

Reputation: 12774

The added parentheses makes the outer function execute, if you omit it it will assign outer function to your digit_name instead of the inner function.

Upvotes: 9

Related Questions