Using closures in Javascript

Question

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?

• user166390: Search for "javascript self invoking function" e.g. stackoverflow.com/questions/5367988/…
• Bergi: The names variable is local to the anonymous function
• Jeremy Rodi: What happens if you remove the parentesis on line 6?
• j08691: possible duplicate of javascript syntax: function calls and using parenthesis and stackoverflow.com/questions/592396/…
• Andreas: Immediately-Invoked Function Expression (IIFE)

Answer 1

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.

Answer 2

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?

Answer 3

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.

Answer 4

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

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

Answer 5

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

Answer 6

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.