JavaScript plus sign in front of function name

JavaScript plus sign in front of function name

I’ve been looking on info about self-invoking functions, and somewhere I stumbled on this notation:

Can someone explain to me what the + sign in front of the function means/does?


Solution 1:

It forces the parser to treat the part following the + as an expression. This is usually used for functions that are invoked immediately, e.g.:

+function() { console.log("Foo!"); }();

Without the + there, if the parser is in a state where it’s expecting a statement (which can be an expression or several non-expression statements), the word function looks like the beginning of a function declaration rather than a function expression and so the () following it (the ones at the end of the line above) would be a syntax error (as would the absense of a name, in that example). With the +, it makes it a function expression, which means the name is optional and which results in a reference to the function, which can be invoked, so the parentheses are valid.

+ is just one of the options. It can also be -, !, ~, or just about any other unary operator. Alternately, you can use parentheses (this is more common, but neither more nor less correct syntactically):

(function() { console.log("Foo!"); })();
// or
(function() { console.log("Foo!"); }());

Solution 2:

Subsidiary to @TJCrowder’s answer, + is usually used to force numerical casting of a value as this SO answer explains. In this instance it is called the ‘unary plus operator’ (for ease of googling).

var num = +variant;

So in front of a function it can be a way to force the function’s result to be interpreted as a number. I doubt it happens yet, but theoretically the JIT could use that to compile the function as a numerical-only function etc. However, to prevent the unary plus being a concatenation when used in a larger expression, you would need parentheses:

blah + (+(function(){ var scope; return "4"; })());

Solution 3:

So the short answer is that it prevents a syntax error, by using the function results in one way or another.

You can also instruct the engine that you’re not even interested in the return value by using the void operator:

void function() { console.log("Foo!"); }();

Of course, putting braces around the whole thing also serves that purpose.