DEV Community

Matheus Richard
Matheus Richard

Posted on • Originally published at matheusrich.com on

TIL: JavaScript's void Operator

#javascript #todayilearned

Today I discovered the voidoperator in JavaScript. It evaluates an expression but always returns undefined.

console.log(void "hello world") // prints `undefined`
Enter fullscreen mode Exit fullscreen mode

It can be used on a IIFE, which usually uses parenthesis to make the function definition be interpreted as an expression and not a declaration:

void function() {
  console.log("hello world")
}();
// prints "hello world"

(function() {
  console.log("hello world")
})();
// prints "hello world"

function() {
  console.log("hello world")
}();
// SyntaxError
Enter fullscreen mode Exit fullscreen mode

This operator is also useful to ensure that an arrow function always return undefined:

// changes to the return value of `doSomething` won't affect this code
button.onclick = () => void doSomething();
Enter fullscreen mode Exit fullscreen mode

Caveat

It’s important to note that this operator has a high precedence with right-to-left associativity, so you may want to use parenthesis to correctly construct some expressions:

void "hello" + " world" // parsed as: (void "hello") + " world"
// => 'undefined world'

void ("hello" + " world") // parsed as: void ("hello" + " world")
// => undefined
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
nickytonline profile image
Nick Taylor •

Fun fact. early on you used to be able to redefine the undefined keyword in ES5, e.g.

undefined = "potato"
Enter fullscreen mode Exit fullscreen mode

so Babel, would convert any undefineds it found to void 0

More on that here

Let's use "undefined" in favour of "void 0" #7492

revelt avatar
revelt posted on

I noticed that using env preset Babel turns all instances of undefined into void 0.

Arguments in favour of void 0 are mainly void (pun intended):

  • Allegedly it safeguards undefined from reassigning. This is not relevant now since ES5 spec was released a decade ago which prohibits that. Since then, you can't reassign undefined primitive.
  • Allegedly it takes less space than undefined. Three characters less. But minifying is not the purpose of Babel, is it?

Arguments against void 0:

  • void is operator, undefined is primitive type. By definition, primitive type is more efficient to process than operator whose result is the same primitive type. The difference might be negligible but I haven't seen void 0 vs undefined perf tests proving that.
  • ESLint flags up void 0 as a code bug, which means if you review Babel CommonJS build file (coming from Rollup typically), you'll see linting errors everywhere where you previously used undefined
  • For JS newcomers void 0 is an unnecessary burden to learn and obfuscated Babel builds make it more difficult to understand what Babel does.

I know, this is not a bug per se or a feature per se, but nonetheless it's an important, fundamental issue that needs to be looked at. I see no reason why we should transpile down to ES3 JS spec (because, technically, that's what we're doing at the moment).

Thank you.

View on GitHub

and here's the a plugin in regards to this as well.

babeljs.io/docs/en/babel-plugin-tr...