You don’t need void 0

In JavaScript code, particularly in older legacy code, you generally discover the expression void 0.

The void operator evaluates an expression and returns the primitive worth undefined. void 0 evaluates 0, which does nothing, after which returns undefined. It’s successfully an alias for undefined.

Why is void 0 used as an alias for undefined?

Certainly one of JavaScript’s quirks is that undefined is just not a reserved key phrase. As a substitute, it’s a property of the global object.

Earlier than ES5 (2009), it was attainable to change the undefined international property, which might result in surprising habits for undefined.

Take into account the next instance (which doesn’t work in trendy JavaScript engines):

// Pre-ES5 instance - doesn't work in trendy JS engines:

// adjustments property 'undefined' on the worldwide object:
undefined = "one thing else"; 

// doubtlessly in another JavaScript file or script part:
if (aVariable === undefined) {
  // aVariable is the same as "one thing else", 
  // however to not the primitive worth 'undefined'
  doSomething();
}

Modifying the undefined international might even occur in third get together code, e.g., libraries imported by way of the script tag. Since void 0 all the time returns the precise primitive worth undefined, it was generally used earlier than ES5 to make the code failsafe towards the re-definition of the undefined international property.

The worldwide property ‘undefined’ after ES5

The issue that undefined may very well be modified on the worldwide object was so large that the JavaScript normal was modified.
With ES5, the worldwide property undefined grew to become read-only. Trying to vary the worth does nothing in trendy JavaScript:

globalThis.undefined = "one thing else";
console.log(undefined); // prints undefined in trendy browsers

Undefined can nonetheless be shadowed by a neighborhood variable

Nonetheless, whereas altering the undefined international property is not attainable, undefined remains to be not a reserved key phrase in JavaScript. Subsequently it might probably nonetheless be shadowed by a neighborhood variable:

const undefined = "one thing else";
let test = aVariable === void 0; // void 0 is required right here

Having a neighborhood variable with the identify undefined is a pitfall that you just need to keep away from. The ESLint rule no-undefined disallows the usage of undefined as a variable identify and prevents shadowing points.

Can void 0 assist cut back the bundle dimension?

The expression void 0 is shorter than undefined. JavaScript bundle sizes are important for creating web sites that load shortly, and shaving off a couple of bytes may help.

Nonetheless, it’s best to depart fundamental code dimension optimizations to minifiers equivalent to Terser as a part of the product bundling course of. They will carry out many alternative optimizations, and the supply code stays extra readable with none guide code dimension optimizations like utilizing void 0 as a substitute of undefined.

Keep away from void 0 in trendy JavaScript

To summarize, in trendy browsers and JavaScript engines, there isn’t a purpose to make use of void 0 any longer:

• the worldwide property undefined can’t be modified in ES5 and newer environments
• native variables with the identify undefined could be disallowed with the ESLint rule no-undefined
• minifiers can exchange undefined with void 0 when creating the manufacturing bundle

Quite the opposite, void 0 makes JavaSCript code more durable to learn and perceive as a result of it is advisable to know the which means of void 0 and course of completely different phrases (void 0, undefined) for a similar idea (undefined).

TLDR: You should utilize undefined and take away the pointless void 0 complication.