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
undefinedcannot be changed in ES5 and newer environments - local variables with the name
undefinedcan be disallowed with the ESLint rule no-undefined - minifiers can replace
undefinedwithvoid 0when 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.