First of all - yes, I know there are plenty of posts regarding this, or at least very similar ones. Having looked through those I still haven't found the answer to what I'm looking for:

I've learned that there are two main ways to create functions in javascript:

var test = function(a){
   console.log(a);
}

Which is created at runtime, and:

function test(a){
    console.log(a);
}

Which is created before runtime.

Today I saw this one:

(function test(a){
    console.log(a);
})();

I have never seen that before. What separates this one from the two above?

First of all - yes, I know there are plenty of posts regarding this, or at least very similar ones. Having looked through those I still haven't found the answer to what I'm looking for:

I've learned that there are two main ways to create functions in javascript:

var test = function(a){
   console.log(a);
}

Which is created at runtime, and:

function test(a){
    console.log(a);
}

Which is created before runtime.

Today I saw this one:

(function test(a){
    console.log(a);
})();

I have never seen that before. What separates this one from the two above?

• javascript
• function
• runtime

• 2 Self-executing anonymous function: markdalgleish./2011/03/self-executing-anonymous-functions – CodingIntrigue Commented Nov 5, 2013 at 13:34

3 Answers 3

This is immediately-invoke function, it will call itself immediately after declaration.

You can read more about Immediately-invoked function expression at wikipedia.

What separates them is that the first 2 just define the function, whilst the last one defines and executes the function. Typical use for the last one is to reduce global namespace pollution as variables will be scoped to the function not the window.

Your function examples would be considered in Javascript as follows:

1. Function expression
2. Function declaration
3. Immediately invoked function also called a Immediately invoked function expression "IIFE" and self-executing anonymous function.

What happens in what you call 'runtime' is two things. The Javascript engine makes two passes over your code. First pass could be called the declaration pass where variables and function declaration are identified. However, a funny thing happens with variables in this first pass they are said to be 'hoisted' but not initialized. The second pass is the execution pass. Those are the two things that happen in what I think you are referring to as 'runtime'.

The first function what will happen is the same behavior that happens to variables since is assigned to a variable it will be "hoisted" to the top of it functional context and declared but not initialized. So JS will know its a variable but its recognized as undefined until it reaches the section of code that says 'oh' initialize this variable to a function. So you have to wait until after the initialization step to use.

/* This is how function expression looks after 
   first pass identified but not assigned(initialized) to function 
   its hoisted and undefined just like a reg variable. */

var test;

//test is undefined here    
console.log(test); 

//test is initialize here
var test = function (a) {
  console.log(a);
}

//test is recognized as a function here
console.log(test);

The second function will be declared(identified) as function in the first pass and you can use it since JS will know right that this function is a function.

//this is recognized as function
console.log(test);

 function test (a) {
   console.log(a);
}

//test is recognized as function here as well
console.log(test);

The third function will execute itself right away after being declared in the first pass and create it own execution context, self containing.

//test is not recognized here
console.log(test); 

(function test(a) {
  console.log(a);

  //surprise test is recognized here
  console.log(test);
})();

//test is not recognized here
console.log(test);

You also have anonymous functions, and named function expressions. Functions are very powerful in JS. Happy Coding!!