Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

In JavaScript, what is the advantage of !function(){}() over (function () {})()? [duplicate]

Possible Duplicate:
What does the exclamation mark do before the function?

I've long used the following for self-executing, anonymous functions in JavaScript:

(function () { /* magic happens */ })() 

Lately, I've started seeing more instances of the following pattern (e.g., in Bootstrap):

!function () { /* presumably the same magic happens */ }() 

Anyone know what the advantage is of the second pattern? Or, is it just a stylistic preference?

like image 357
Andrew Hedges Avatar asked Sep 28 '11 17:09

Andrew Hedges


People also ask

What is function () () in JavaScript?

A function in JavaScript is similar to a procedure—a set of statements that performs a task or calculates a value, but for a procedure to qualify as a function, it should take some input and return an output where there is some obvious relationship between the input and the output.

What are the advantages of function expressions?

There are some benefits of function expressions over statements, for example they are anonymous functions, they can be used as closures, as arguments to other functions and as IIFEs. Put simply a statement in the execution phase it does not return anything, an expression results to a value, an object is created.

Can you define a function twice in JavaScript?

functions are data in memory stack, so when you define another function with the same name, it overrides the previous one. Show activity on this post. Well obviously you're not meant to define the same function twice. However, when you do, the latter definition is the only 1 that applies.


1 Answers

These two different techniques have a functional difference as well as a difference in appearance. The potential advantages of one technique over the other will be due to these differences.

Concision

Javascript is a language where concision can be very important, because Javascript is downloaded when the page loads. That means that the more concise the Javascript, the faster the download time. For this reason, there are Javascript minifiers and obfuscators that compress the Javascript files to optimize the download time. For example, the spaces in alert ( "Hi" ) ; would be optimized to alert("Hi");.

Keeping this in mind, compare these two patterns

  • Normal closure:   (function(){})() 16 characters
  • Negated closure: !function(){}() 15 characters

This is a micro-optimization at best, so I don't find this a particularly compelling argument unless you are doing a code golf contest.

Negating the returned value

Compare the result value of a and b.

var a = (function(){})() var b = !function(){}() 

Since the a function does not return anything, a will be undefined. Since the negation of undefined is true, b will evaluate to true. This is an advantage to people who either want to negate the returned value of the function or have an everything-must-return-a-non-null-or-undefined-value fetish. You can see an explanation for how this works on this other Stack Overflow question.

I hope that this helps you understand the rationale behind this function declaration that would typically be considered an anti-pattern.

like image 108
Peter Olson Avatar answered Sep 22 '22 19:09

Peter Olson