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.
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
?
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.
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With