Coder Perfect

What is the role of the exclamation mark before it?


!function () {}();

Asked by Sebastian Otto

Solution #1

The fundamentals of JavaScript syntax. Here’s an example of a function declaration:

function foo() {}

There is no semicolon here because this is just a function declaration. To actually run the function, you’d need to use the invocation foo().

Now, we can turn it into an expression by adding the seemingly innocuous exclamation mark:!function foo(). It has now been transformed into a function expression.

Of course, the! alone does not call the function, but we can now add () to the end:!function foo()!function foo()!function foo()!function foo()!function foo()!function foo()!function foo()!function foo()!function foo()!function foo()!function foo()!function foo()!function foo()

So the author is saving a byte for each function expression; a more legible way of expressing it would be:


Finally, the operator! causes the expression to evaluate to true. Because all instantly invoked function expressions (IIFE) return undefined by default, we have!undefined, which is true. It’s not really useful.

Answered by Neil

Solution #2

The function:

function () {}

nothing is returned (or undefined).

We may wish to call a function as soon as it is created. You might want to give this a shot:

function () {}()

However, this causes a SyntaxError.

The function is considered as an expression when the! operator is used before it, therefore we can call it:

!function () {}()

Because!undefined is true, this will also return the boolean opposite of the function’s return value, in this case true. If you want the call’s real return value to be the result, follow these steps:

(function () {})()

Answered by Michael Burr

Solution #3

On the airbnb JavaScript documentation, there is an excellent point for using! for function invocation.

This technique is best used on independent files (called modules) that are afterwards combined. The restriction is that files should be concatenated using tools that place the resultant file on a new line (which is anyway common behavior for most of concat tools). In that scenario, using! will assist to avoid an error if a previously concatenated module fails to include a terminating semicolon, while also allowing you to arrange them in any order you want.

!function abc(){}();
!function bca(){}();

Will function in the same way as

!function abc(){}();
(function bca(){})();

However, it saves one character and seems more random.

And by the way any of +,-,~,void operators have the same effect, in terms of invoking the function, for sure if you have to use something to return from that function they would act differently.

abcval = !function abc(){return true;}() // abcval equals false
bcaval = +function bca(){return true;}() // bcaval equals 1
zyxval = -function zyx(){return true;}() // zyxval equals -1
xyzval = ~function xyz(){return true;}() // your guess?

However, if you use IIFE patterns for one-file-one-module code separation and the concat tool for optimization (which results in a one-line-one-file task), construction becomes much easier.

!function abc(/*no returns*/) {}()
+function bca() {/*no returns*/}()

Will run the code in a safe manner, much as the first code sample.

This will result in an error since JavaScript ASI will be unable to complete its task.

!function abc(/*no returns*/) {}()
(function bca() {/*no returns*/})()

One note on unary operators: they would perform comparable tasks if they were not utilized in the first module. As a result, if you don’t have complete control over the concatenation order, they’re not as safe.

This works:

!function abc(/*no returns*/) {}()
^function bca() {/*no returns*/}()

This not:

^function abc(/*no returns*/) {}()
!function bca() {/*no returns*/}()

Answered by dmi3y

Solution #4

It tells you whether or not the assertion can be evaluated as untrue. eg:

!false      // true
!true       // false
!isValid()  // is not valid

It can be used twice to convert a value to a boolean value:

!!1    // true
!!0    // false

So, to answer your question more directly:

var myVar = !function(){ return false; }();  // myVar contains true

It also converts the function declaration to a function expression as a side effect. For example, the code below is invalid because it is regarded as a function declaration without the appropriate identifier (or function name):

function () { return false; }();  // syntax error

Answered by gilly3

Solution #5

When we conduct javascript minification, it’s merely to save a byte of data.

Consider the anonymous function below.

function (){}

To make the above a self-invoking function, we’ll update the code as follows:

(function (){}())

Apart from adding () at the end of the function, which is required to call the function, we now added two extra characters (,). We usually focus on reducing the file size throughout the minification process. As a result, the aforementioned function can alternatively be written as

!function (){}()

Both functions are self-invoking, and we save a byte in the process. We only used one character (,) instead of two (,,,,,,,,,,,,,,,,,,,,,,,

Answered by Varatharaj

Post is based on