Self invoking function is undefined

function, javascript

Solution

Your function does not return anything, so its return value is `undefined`.

A self-executing function is executed and the function is not stored anywhere - only its return value survives (and any external variables the function sets/modifies).

For example, this code would be equivalent to `var x = 'hi';`:

var x = (function(){
    return 'hi';
})();

The purpose of self-invoking functions is usually to create a new scope, e.g. when creating callback functions in a loop:

for(var i = 0; i < 5; i++) {
    window.setTimeout(function(){ alert('i = ' + i); }, 1000 * i);
}

This would use the same `i` in all callbacks so it would alert `i = 5` 5 times.

for(var i = 0; i < 5; i++) {
    (function(i) {
        window.setTimeout(function(){ alert('i = ' + i); }, 1000 * i);
    })(i);
}

By using a self-executing function we create a new scope and thus a new `i` in each loop.

Another use of self-executing functions is to create a new scope where certain variables are ensured to be available and set to the correct value:

(function($, window, undefined) {
    // here the following always applies:
    // $ === jQuery
    // window === the global object [assuming the function was executed in the global scope]
    // undefined is well, undefined - in some js engines someone could have redefined it
})(jQuery, this);

Problem

If I declare a function literal: ``` var x = function(){ alert('hi'); }; console.log(x); // returns the function code. ``` However: ``` var x = (function(){ alert('hi'); })(); console.log(x); // returns undefined? ``` I don't understand why this happens. Isn't the point of writing a function as a literal is to still be able to access it by its variable reference name? I know this may be silly but I'm just learning javascript so don't judge too harshly.

Original source