5

I was looking at this very cool snippet and i came across this weird line in the js and deleting that prevent the function from being invoked

!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+! function(d, w){ ... }(document, window); 

,i wrapped the function with ( ) as it supposed to be and it works as intended.

(function(d, w){ ... })(document, window); 

so my question is what is that weird line and why does it work? my wild guest is that it is some kind IIFE...

4
  • its not ! operator tricky .. ! Commented Apr 23, 2013 at 13:21
  • 1
    To elaborate on the the duplicate: the +, -, and ! are all unary operators doing the same thing as the lone ! in the linked duplicate. Commented Apr 23, 2013 at 13:21
  • @apsillers so those duplicates are unnecessary ? Commented Apr 23, 2013 at 15:10
  • @MimiEAM Correct, only one +, -, or ! is needed for the function to be parsed as a function expression (rather than a function declaration). Commented Apr 23, 2013 at 15:39

2 Answers 2

11

And you are right, it is an Immediately-Invoked Function Expression (IIFE)

You can rewrite

!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+!+-+-+! function(d, w){ ... }(document, window); 

to

!function() { ... }() 

and it still works. This is because ! is a unary operator (just like +, -, and ~ -- see https://developer.mozilla.org/en-US/docs/JavaScript/Guide/Expressions_and_Operators). After an unary operator an expression is expected (and evaluated!). The expression can be a function call.

However

!function() { ... }() 

is just another expression, so you can put another unary operator in front of it:

+!function() { ... }() 

You can continue this pattern as you wish.

Note: Invoking an anonymous function this way, ignores the return value of the function. So only use this, if you are not interested in the return value.

Edit: Added an excellent reference to http://benalman.com/news/2010/11/immediately-invoked-function-expression/ which Daff mentioned in his answer.

Sign up to request clarification or add additional context in comments.

Comments

4

The trick is actually the single ! operator there (the entire first line actually does the same thing). This will work just as well:

!function(d, w){ ... }(document, window); 

As always I can recommend Ben Almans great article on Immediately-Invoked Function Expressions

1 Comment

thank you, i wish i could accept both answer

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.