undefined vs void

#Difference

void 0 === undefined; // true
void 1 === undefined; // true
void 'Foo' === undefined; // true

// In ES3
console.log(undefined);
var undefined = 'foo';
console.log(undefined); // 'foo'

#Good to know

1. `void` is an operator, not a function. So we don't need to wrap the expression in parentheses. `void 0` is equivalent to `void(0)`.
2. There are minifiers which use `void 0` to shorten `undefined`.
3. If you use immediately-invoked function expression (known as IIFE), `void` can be used to treat the `function` keyword as an expression, not a declaration.
   Assume that we want to execute the following IIFE function:
   function run() {
       console.log('Executed');
   }();

   then we can either use `void`
   void (function run() {
       console.log('Executed');
   })();

   or wrap the function in parentheses as below:
   (function run() {
       console.log('Executed');
   })();

4. `void` can be used to avoid the side effect when using with arrow functions.
   As we know, ES6 arrow functions allow to use the return value of function by omitting the braces from the function body.
   const sum = (a, b) => a + b;

   In some cases, we don't intend to use the return value of function, because it can lead to a different behavior. Let's say that we are going to handle the `click` event of a button:
   button.onclick = () => doSomething();

   It works as usual until someone changes `doSomething`, and makes it return a `boolean` value. In the case it returns `false`, the default behavior of the `click` event will be skipped, and it maybe the thing you don't want to.
   Passing the result to `void` will ensure that it doesn't change the behavior of arrow function regardless the result of executed functions:
   button.onclick = () => void doSomething();

5. The advantage of using `void` with arrow functions can be seen in modern libraries such as React, Svelte.
   These libraries allow us to execute a function right after a component mounted to the DOM. For example, React provides `useEffect`, Svelte has `onMount`.
   If we return a function inside the callback, then the function will be invoked to clean up things, free the memory before the component is removed from the screen.
   // React example code
   useEffect(() => doSomething());

   It can produce bugs at run time. To avoid that, we can either use `void`
   useEffect(() => void doSomething());

   or using the braces:
   useEffect(() => {
       doSomething();
   });

#Good practice

<a href="javascript: void(0);" onclick="doSomething">
    ...
</a>

<a href="javascript: alert('unsanitized input')">...</a>

#See also

• variable === undefined vs. typeof variable === "undefined"