Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Difference between using void vs wrapping in parens for IIFE void function() vs (function())

The common practise for creating modules is to wrap them in parens so you won't leak any variables outside of the module (when concatenating etc).

There is also void operator, which evaluates a given expression and returns undefined. (See on MDN)

I wonder what is the reason behind preferring wrapping functions in parens instead of using void. Is it historical, is it something related to concatenation, else?

I know that you can have problems with concatenation when one of the files has a missing a semicolon, leading to nasty problems till you notice it.

Examples

Say, module1.js (notice the missing comma):

(function () {
    return function () {
        console.log('module1. I should not be called');
    };
})()

and, module2.js:

(function () {
    return function () {
        console.log('module2. I should not be called either');
    };
})();

If you concat these scripts into a bundle, it will produce this:

(function () {
    return function () {
        console.log('module1. I should not be called');
    };
})()(function () {
    return function () {
        console.log('module2. I should not be called either');
    };
})();

Since both modules(files) return a function, the second supposedly IIFE becomes an invocation of the return value of the first module, effectively calling console.log. The common workaround for this is to declare your module with !(function (){})(); which forces the returned value to be a boolean.

If however, you were to use void, like:

void function () {
    return function () {
        console.log('module1. I should not be called');
    };
}()

The concatenated file will still be wrong, but you will notice the error on the first run, therefore more easily noticed. See below.

void function () {
    return function () {
        console.log('module1. I should not be called');
    };
}()void function () {
    return function () {
        console.log('module2. I should not be called either');
    };
});

This throws Unexpected token void. As fas as the modules are concerned, I believe !(function(){}() and void function(){}() achieve the same effect. But I feel like void looks more clean (subjective) than wrapping a function with params and prepending ! to it.

I am missing something? Wouldn't it be better if we used void?

like image 566
Umur Kontacı Avatar asked Mar 03 '15 09:03

Umur Kontacı


People also ask

What does JavaScript void () do?

The void operator is often used merely to obtain the undefined primitive value, usually using void(0) (which is equivalent to void 0 ). In these cases, the global variable undefined can be used.

Which best describes void in JavaScript?

The void keyword in JavaScript, is used to evaluate an expression which does not return any value. The void operator is an unary operator that accepts the single operand, which may be of any type.

How do you call a void function in JavaScript?

void is an important keyword in JavaScript which can be used as a unary operator that appears before its single operand, which may be of any type. This operator specifies an expression to be evaluated without returning a value.

Why we use JavaScript void 0?

JavaScript void 0 means returning undefined (void) as a primitive value. You might come across the term “JavaScript:void(0)” while going through HTML documents. It is used to prevent any side effects caused while inserting an expression in a web page.


1 Answers

Well, many JavaScript programmers think void is confusing and redundant, especially Douglas Crockford who calls it one of the "Bad Parts" of JavaScript.

Preceding a function definition with void can be especially confusing. In languages like C++, it means "This is a type of function that doesn't return a value." In JavaScript, void doesn't define anything; instead it evaluates the function (or other expression) and returns the value undefined. So you don't see it much in JavaScript code.

For more info on using ! to precede modules, check out this StackOverflow answer.

Also make sure to read Ben Allman's original blog post on IIFE's.

like image 52
jkdev Avatar answered Sep 18 '22 00:09

jkdev