What do these characters do in Javascript

Question

I was going through a piece of code here http://cssdeck.com/labs/bjiau4dy and I saw this in the Javascript box -

!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!

What does that do ? and why does it not throw errors in the console ?

Thanks!

Answer 1

Any of those symbols turn the function that follows it into a function expression, instead of a function declaration. Putting them all in there together is just for fun.

---

If you try to call a regular function by putting () right after the declaration:

function () {
    // this is a syntax error...
}();

you'll get a syntax error:

SyntaxError: Unexpected token (

since you cannot call a function declaration.

---

So people usually wrap an anonymous function in parentheses to turn it into a function expression:

(function () {
    // this will execute immediately
}());

You can achieve the same thing be prepending any of those symbols:

!function () {
    // this will also execute immediately
}();

---

For more information, see here: http://kangax.github.com/nfe/#expr-vs-decl

Answer 2

There is zero point to doing the long set of symbols except as a stylistic watermark.

That set of symbols acts as an operation on the function that follows, but does nothing.

In JS you can write 1 or +1 (one) or !1 (false) or !+1 (still false). This is just a long chain of those that are acting on the following function.

So !+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!1 doesn't throw an error. Its value is false though.

And !+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!function(){ ... } just executes the function and evaluates to false (but nothing is done with the value anyway)

However, since something is there, it turns the function definition into an operation and evaluates the function immediately. But just +function(){ ... } would do the same thing.

Answer 3

To elaborate a bit more, each of these operators will actually perform type coercion on the operand proceeding it. + will convert the operand following it into a number, as will the - operator. ! is the not operator, and will convert the operand into a boolean (true/false).

Another thing to bear in mind is that in Javascript, everything can have evaluate to some kind of value. That could be a "truthy" or "falsey" value, and can also have a "number" value (even if that value is not a number, AKA NaN).

So, if you open up JSFiddle, or Firebug, and mess around with what these values do to functions, you can see that they'll also yield some kind of new return value.

For example:

1. !function(){} will evaluate to a value of false (since coercing a function object to a boolean yields a value of true).
2. +function(){} will evaluate to a value of NaN (since coercing a function object to a number yields NaN). The same result can be seen by using -.
3. !+function(){} yields true (coercing a number of value NaN will yield false and not false yields true.
4. !+-+-+!function(){} yields true (because !function(){} yields false, +false yields 0, and will continue to throughout all those + and - operators until finally !0 is evaluated to true).
5. Applying the operators like they're listed in your example will go back and forth between false, -1, 0, 1, true until all of the operators have been evaluated.

Note that I checked these using Firebug. There could possibly be differences between browsers, and perhaps what Firebug shows us on evaluation. The TL;DR is that Javascript does lots of type coercion, and will evaluate expressions differently than declarations.