Left parenthesis before function

Question

I have some experience with Javascript but I would like to know why there is a left parenthesis right before the function keyword:

 requestAnimFrame = (function(callback) {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame ||
    function(callback) {
      window.setTimeout(callback, 1000 / 60);
    };
  })();

Also would you be able to explain why there are 2 callback functions. One more thing, why is there a bracket without any anything in it on the last line of code?

possible duplicate of [What do parentheses surrounding a JavaScript object/function/class declaration mean?](http://stackoverflow.com/questions/440739/what-do-parentheses-surrounding-a-javascript-object-function-class-declaration-m) — showdev, Mar 05 '14 at 18:49

score 2 · Answer 1 · answered Sep 26 '13 at 14:35

2

This is a self-invoking anonymous function:

(function() {
  // code in here
})();

Using this declaration, you can make sure that as soon as you declare that function it will be executed.

answered Sep 26 '13 at 14:35

vladzam

5,462
6
30
36

Just out of curiosity, why would you do that? Is there a point to wrapping it in a function? You could just write the lines in the function as well I assume? My best guess would be for readability and also maybe better garbage collection? – samuraiseoul Nov 11 '13 at 10:06
1

I would say that, probably, the main advantage of it would be to force a scope onto your code. Basically, you wrap all of your code inside a function, which makes it bound to that function's scope.(even if this function encapsulates all of your code) Basically, you are 'forcing' yourself to keep the global context clean. – vladzam Nov 11 '13 at 12:42

David · Answer 2 · 2013-09-26T14:41:51.060

There is a left parenthesis before the function definition because the entire function is being wrapped in parentheses so that it can be immediately called. Notice this structure:

(function () {})();

This defines an (empty) function, and then immediately executes that function by applying the second set of parentheses.

There aren't two callback functions. The purpose of this function seems to be to return another function. Understand that in JavaScript a function is an object. It can be passed around like any other variable. This is looking for such a variable and returning it.

This can basically be read as:

If `window.requestAnimationFrame` exists, return it.
Else, if `window.webkitRequestAnimationFrame` exists, return it.
Else, if ... and so on
Else, if none of them exist, return this custom function (the one that calls `setTimeout`)

Whichever function it returns is then stored in the requestAnimFrame variable.

Finally, the bracket on the last line isn't unmatched. It's the closing bracket for the outer function. The one that's returning an inner function.

score 1 · Answer 3 · answered Sep 26 '13 at 14:35

The pattern you're seeing (using a parentheses before the function and an empty pair at the end) is called an Immediately-invoked function expression (or IIFE)

(function() {
  // ....
})();

It runs the function right away, instead of waiting for it to be called.

Left parenthesis before function

3 Answers3