JavaScript anonymous function expression vs IIFE

Question

Encountered some code that's using IIFEs in an expression rather than just a normal function.

var custom_type = (function() {
    return $('#myDiv').attr('custom_type');
})();

Normally I would write this as something like:

var custom_type = function() {
    return $('#myDiv').attr('custom_type');
};

What's the reason for the IIFE? The only thing I can think of is that the IIFE might assign the custom_type variable only once at the beginning whereas the second might continue to check for the updated type every time the variable is referenced.

The first one executes the function and store its result, the seconds stores function as definition. — Rolice, Apr 09 '14 at 22:51
The first one is equivalent to `var custom_type = $('#myDiv').attr('custom_type')`. So both examples have different results (in the first one, `custom_type` is a string, and in the second one it's a function) and without context it's impossible to tell why the first one was used. Presumably whoever wrote the code didn't want `custom_type` to be a function. — Felix Kling, Apr 09 '14 at 22:51

score 6 · Accepted Answer · answered Apr 09 '14 at 22:53

In this example, you can dispense with the function altogether and just do:

var custom_type = $('#myDiv').attr('custom_type');

However in general you can use an IIFE for more complex "just-in-time" computation of variable assignments - I like to use them if I need to iterate over something, so I can have i without polluting the current scope.

In your second example, though, the result is completely different - you will need to call the function custom_type() to get the current value, whereas the first piece of code will get its value once, and the variable will hold that value.

I guess that was the better question, why the IIFE instead of assigning it to the `.attr` return value directly. Seems needlessly complex. — diplosaurus, Apr 10 '14 at 00:49

score 3 · Answer 2 · answered Apr 09 '14 at 22:51

The IIFE will actually run (immediately-invoked function expression), so the variable will be set to its response.

Here's a JSFiddle to demonstrate this, watch your JS console for the output: http://jsfiddle.net/Y4JmT/1/

Code Here:

var custom_type = (function() {
    return 'foo';
})();

var custom_type2 = function() {
    return 'bar';
};

console.log('iife = ' + custom_type);
console.log('non-iife = ' + custom_type2);

In your JS console you'll see something similar to:

iife = foo

and

non-iife = function () {
    return 'bar';
}

Rolice · Answer 3 · 2014-04-09T23:25:36.037

The first one of yours (IIFE) executes the function and store its result, the seconds stores function as definition.

(function(x) {
    return x * 2;
})(5);

You are making a call like to normal funciton: func(arg1, arg2), but instead of function name you pass whole function definition, so the above would return 10 like:

function multiply(x) {
    return x * 2;
}

multiply(5);

They mean the same thing, you are making calls. Unlikely the first, second is definition plus a call.

score 1 · Answer 4 · answered Apr 09 '14 at 22:57

1

IIFEs allow you to invoke a function (anonymous or otherwise) at the point of creation. Have you looked at this? http://benalman.com/news/2010/11/immediately-invoked-function-expression/

answered Apr 09 '14 at 22:57

Chris Walsh

3,423
2
42
62

JavaScript anonymous function expression vs IIFE

4 Answers4