Please explain the differences between this "Immediately-Invoked Function Expression" and "Self Invoked Anonymous Function"

Question

Inspired from this Stackoverflow question, the answer by João Silva: setTimeout with arguments

I was wondering if someone could explain to me exactly how this code snippet differs from the latter:

// Parameter to use
var bar = 'bar';

// Go
setTimeout(
  (function(arg1){
    return function () {
        console.log(arg1); //ya arg1 has the value: 'bar'!
    }
  }(bar)), 2000);

I was expecting the parentheses to be slightly different and I understand that this is a Immediately-Invoked Function Expression (coined by Ben Alman I believe) combined with a closure but I don't exactly understand how this code executes.

I was picturing a self invoked anonymous function invoked by a closure, which I understand how it works, at least mildly.

 // Parameter to use
    var bar = 'bar';

// Go
setTimeout(
  (function(arg1){
    return function () {
        console.log(arg1); //ya arg1 has the value: 'bar'!
    }
  })(bar), 2000);

So both work, and it is only one parentheses difference between the two code snippets, and again I am not a javascript expert but I intuitively feel both of these javascript snippets are extremely cross browser compatible. But what really is the different between the two?

Your examples doesn't make much sense, Your IIFE are supposed to return a func reference to be set as callback for setTimeout? What you have will just get invoked immediately. — PSL, Nov 22 '13 at 04:08
But neither snippet gets evoked immediately, both are invoked after the allotted 2 secs for the timeout... — Brian Ogden, Nov 22 '13 at 04:10
Oops, sorry, you are right, I updated my answer, now both js snippets get called after the allotted 2 sec time out — Brian Ogden, Nov 22 '13 at 04:14
FYI, "Immediately-Invoked Function Expression" and "Self Invoked Anonymous Function" are synonyms. — Felix Kling, Nov 22 '13 at 05:38

score 1 · Accepted Answer · edited May 23 '17 at 12:28

There is no difference at all between two variants of code.

Moreover, actually parenthesis are redundant there. It'd work even if you write this piece of code the following way:

// Go
setTimeout(
  function(arg1){ // let's get rid of braces
    return function () {
        console.log(arg1); //ya arg1 has the value: 'bar'!
    }
  }(bar), 2000);

It works because of FunctionExpression concept. Parenthesis are only needed to differentiate FunctionExpressions from FunctionDeclaration. In fact, parenthesis could be replaced with any operator, like ~, for example.

Note: even thought this code could be written without parenthesis, I strongly object doing it, because of parenthesis now are something like a pattern or a keyword saying "Look! I'm useless bracket, probably placed here for reason like immediately invokation of this function". So code becomes a bit more clear this way.

There are plenty discussions on FunctionExpression vs FunctionDeclaration on the web, so I won't repeat once again. Take a look at past SO question: What is the difference between a function expression vs declaration in Javascript?

Please explain the differences between this "Immediately-Invoked Function Expression" and "Self Invoked Anonymous Function"

1 Answers1