Self Invoked Anonymous Function? Sounds iffy…

(Coined by Ben Alman, circa 2010). It was once widely known as a self-invoked (or self-executing) anonymous function, but that name was not accurate, because:

It’s not self invoked (that would be recursion), and

they don’t have to be anonymous.

Before we get into detail, let’s see what we’re talking about:

1

2

3

(function(){

console.log('do some stuff...');

}());

The outer parens around the whole thing turn the function into a function expression (as opposed to a function declaration). There are other ways to do that, but the parens are the common convention. The () at the end of the function expression is what triggers the immediate function invocation.

This is not a self-invoked anonymous function, though many would call it that. The pattern is called an IIFE (pronounced “iffy”). It’s commonly used in the module pattern, but it’s also used relatively often to assign the result of a small, inline function to a variable. Regular old invoked-later function expressions (without the () at the end) are also commonly passed as callbacks or assigned to variables, or used inline in object literals to define methods.

What is a function expression?

An expression in computer science is a bit of code that is evaluated in order to produce a value. In the case of the function expression, evaluated does not mean invoked! Instead, the function itself is the value. JavaScript functions can be passed around just like any other value. You can assign them to variables, pass them to functions, return them from functions, and assign them to object literals or array elements. Any time you’re treating a function like a value in-line, you’re using a function expression.

1

2

3

setTimeout(function(){

console.log('done');

},1000);

1

2

3

vardoSomething=function(){

console.log('done');

};

1

2

3

4

5

vardog={

bark:function(){

console.log('woof!');

}

};

Remember how I said they don’t have to be anonymous? The way it’s written now, dog.bark(); won’t show up properly in the call stack. It will say “Anonymous function”. Not very helpful. You can define it this way, instead:

1

2

3

4

5

vardog={

bark:functionbark(){

console.log('woof');

}

};

Now it has a name, and it’ll appear properly in the call stack. Just make sure not to duplicate another function name that has already been defined in the same scope, or IE8 will behave badly (a bug which has been corrected in later versions of IE).

An example of a real self-invoked anonymous function is the inner function in this fibonacci implementation:

1

2

3

4

5

functionfib(n){

returnfunction(n,a,b){

returnn>0?arguments.callee(n-1,b,a+b):a;

}(n,0,1);

}

The inner function calls itself from within (self-invocation / recursion), and the function is anonymous, using the deprecated arguments.callee() to call itself. I don’t recommend doing that. Instead, you can name the inner function. This version does the same job with a named function expression:

1

2

3

4

5

functionfib(n){

returnfunctioniterate(n,a,b){

returnn>0?iterate(n-1,b,a+b):a;

}(n,0,1);

}

Note, both versions are IIFEs. The first is a genuine self-invoked anonymous function, but the latter is not. When people say “self invoked anonymous function”, they’re really talking about IIFEs.