What do parenthesis after curly braces mean?

Question

I have seen Javascript code that uses parenthesis immediately after a function's closing curly brace, I can't understand what they're used for.

Example:

function foo(bar){
  return bar;
}(0);

What does (0) do?
What is this called?
When should you use this technique?

If you just provided a bad example, then your question is a 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). — Felix Kling, Jun 21 '12 at 10:59

score 12 · Answer 1 · edited May 23 '17 at 11:46

12

They immediately invoke the function similar to when you call a function:

function foo() {
   alert('hello');
}

foo(); // call

You can also call it directly:

(function foo(){
   alert('hello');
})(); // <--------------

Currently you have Function Declaration. To actually self-invoke it, you need to have it like this in parenthesis (to make it an expression):

(function foo(bar){
  return bar;
})(0);

And now it is Function Expression and will invoke immediately. To know difference between Function Declaration and Function Expression, check out this excellent article by Kangax:

Named function expressions demystified

What does (0) do?

It is argument passed to foo function so bar would be 0 inside function.

What is this called?

It is a self-inovking or self-executing function. You may also want to see this.

When should you use this technique?

When you want to invoke a function straight away and keep variable scope inside that function expression only. It won't be available to outside world or rather the code outside that function expression.

Learn More:

Self-invoking functions explained line by line

edited May 23 '17 at 11:46

Community

1
1

answered Jun 21 '12 at 10:31

Sarfraz

377,238
77
533
578

Tip: `(function (...){ ... })(...);` works every time, even with anonymous functions, where the return value isn't assigned to a var – K.. Jun 21 '12 at 10:37
1

This is not correct unfortunately. See my answer. But maybe the OP only gave a bad example. – Felix Kling Jun 21 '12 at 10:44
@FelixKling: +1 to you. I overlooked the OP's syntax, added more details. – Sarfraz Jun 21 '12 at 10:59
I can confirm Felix and the parenthesis after de curly bracket does not call the function. – Caco Aug 26 '20 at 13:08

score 10 · Accepted Answer · edited May 23 '17 at 12:34

In your example, you simply have two statements and it is equivalent to:

function foo(bar){
  return bar;
}
0;

This is not a self-invoking function. The first statement is a function declaration, the second statement is simply the number literal 0, which does not do anything. The parenthesis don't execute the function, they are the grouping operator.

How can we prove this? Try:

function foo(bar){
  return "bar";
}(0);

and tell me what the output is.

It would be a self-invoking function, if we had a function expression. For that you can use the grouping operator to force it being evaluated as expression.

For example:

(function foo(bar){
  return bar;
})(0);

This is a named function expression. The result of the expression ((function ....)) is a function reference, and (0) executes the function, passing 0 as argument.

The position of the parenthesis could also be:

(function foo(bar){
  return bar;
}(0));

Maybe this is what you have seen.

This technique was already extensively discussed here: What is the purpose of a self executing function in javascript?

Thank you Felix, you must have eagle eyes :) – jon Jun 21 '12 at 11:01 — jon, Jun 21 '12 at 11:01

score 1 · Answer 3 · answered Jun 21 '12 at 10:35

1

This is a self invoking function. You passing 0 as a parameter. Therefore your function will be returning bar which equals 0.

For eg the below function is the equivalent:

function foo(bar) {
    return bar;
}

foo(0); // returns 0

answered Jun 21 '12 at 10:35

TYRONEMICHAEL

4,174
4
30
47

What do parenthesis after curly braces mean?

3 Answers3