In JavaScript code, especially in older legacy code, you sometimes find the expression void 0
.
The void operator evaluates an expression and returns the primitive value undefined. void 0
evaluates 0
, which does nothing, and then returns undefined
. It is effectively an alias for undefined
.
Why is void 0 used as an alias for undefined?
One of JavaScript's quirks is that undefined
is not a reserved keyword. Instead, it is a property of the global object.
Before ES5 (2009), it was possible to modify the undefined
global property, which could lead to unexpected behavior for undefined
.
Consider the following example (which does not work in modern JavaScript engines):
// Pre-ES5 example - does not work in modern JS engines:
// changes property 'undefined' on the global object:
undefined = "something else";
// potentially in some other JavaScript file or script section:
if (aVariable === undefined) {
// aVariable is equal to "something else",
// but not to the primitive value 'undefined'
doSomething();
}
Modifying the undefined
global could even happen in 3rd party code, e.g., libraries imported via the script tag. Since void 0
always returns the actual primitive value undefined
, it was commonly used before ES5 to make the code failsafe against the re-definition of the undefined
global property.
The global property 'undefined' after ES5
The problem that undefined
could be modified on the global object was so big that the JavaScript standard was changed.
With ES5, the global property undefined
became read-only. Attempting to change the value does nothing in modern JavaScript:
globalThis.undefined = "something else";
console.log(undefined); // prints undefined in modern browsers
Undefined can still be shadowed by a local variable
However, while changing the undefined
global property is no longer possible, undefined
is still not a reserved keyword in JavaScript. Therefore it can still be shadowed by a local variable:
const undefined = "something else";
let check = aVariable === void 0; // void 0 is needed here
Having a local variable with the name undefined
is a pitfall that you want to avoid. The ESLint rule no-undefined disallows the use of undefined as a variable name and prevents shadowing issues.
Can void 0 help reduce the bundle size?
The expression void 0
is shorter than undefined
. JavaScript bundle sizes are essential for creating websites that load quickly, and shaving off a few bytes can help.
However, it is best to leave basic code size optimizations to minifiers such as Terser as part of the product bundling process. They can perform many different optimizations, and the source code remains more readable without any manual code size optimizations like using void 0
instead of undefined
.
Avoid void 0 in modern JavaScript
To summarize, in modern browsers and JavaScript engines, there is no reason to use void 0
any longer:
- the global property
undefined
cannot be changed in ES5 and newer environments - local variables with the name
undefined
can be disallowed with the ESLint rule no-undefined - minifiers can replace
undefined
withvoid 0
when creating the production bundle
On the contrary, void 0
makes JavaSCript code harder to read and understand because you need to know the meaning of void 0
and process different terms (void 0
, undefined
) for the same concept (undefined
).
TLDR: You can use undefined
and remove the unnecessary void 0
complication.