From previous guides, you already know that JavaScript relies upon the use of operators. One of those is the void operator that evaluates the specified expression. As a result, the void operator returns the undefined output when needed.

It might seem a bit illogical to look for the undefined output. Still, this specific operator will always return the same output, regardless of what parameters or data set you're using. That's why we review the syntax of the JavaScript void operator and explain how you can utilize it for your regular programming goals.

Introduction to void expression

Before studying practical use cases, let's explore the syntax. In JavaScript, the void operator is expressed in the following manner:

void expression

Because this operator is mostly used to obtain the primitive value, which is undefined, it is often depicted like this: void(0). Due to the technical specifications of this operator and its pre-defined return, it's best to illustrate its functionality with a few examples. Take a look at what outputs the void operator has when working with the next statement:

const myvar = void 0;
console.log(myvar); // Output: undefined
console.log(void(0)); // Output: undefined
console.log(void(null)); // Output: undefined
console.log(void(true)); // Output: undefined
console.log(void(false)); // Output: undefined

In this case, we've tried manipulating the void operator, including various parameters, such as 0, null, true, or false. Yet, due to the nuances of how the JavaScript void operator works, the output you see equals undefined in all of our examples. But what if we also try using void with some other values, such as:

console.log(void "test"); // Output: undefined
console.log(void {}); // Output: undefined

As you can see, the output also equals undefined, even if we include the string (as represented in the first code line).

Recursion example

The void operator in JavaScript always returns the undefined value. Now let's make the task a bit more complex and add the recursion function with the intent of getting the numbers 3, 2, 1, alongside getting the true value of the recursion. Take a look:

void function aRecursion(i) {
    if(i > 0) {
      console.log(i--)
      aRecursion(i)
    }
  }(3)
  console.log(typeof aRecursion) // Output: undefined

While we get the desired numbers, the typeof command we're using here returns to the void function in the first code line. In this instance, the output we get is undefined, regardless of what recursion method we're trying to use.

Immediately invoked function expressions

When attempting to work with immediately invoked function expressions (IIFE in JavaScript), the void operator can manipulate the keyword. More precisely, you can easily force the function keyword to be treated and processed as an expression but not a declaration. Consider this code as an example:

void function iife() {
    console.log("Get things done!");
  }();
  // Output: "Get things done!"

In this case, when we try to log the void function iife, we include the keyword "Get things done!" That's why the output you see treats the keyword as an expression, not a declaration. If you intentionally omit including the iife to this code sample, the return will be invalid.

Evaluation and return

Knowing the difference between the evaluation and the actual return is necessary to understand the void operator in JavaScript better. Let's review the example of using the const to represent the crucial distinction between the evaluation and the return:

const result = void(5 + 5);
console.log(result);
// Output: undefined

We also specify the 5 + 5, which JavaScript actually evaluates, but the output you get will always be undefined when using the const. It might be complicated to understand how this difference is visible, but let's make another example:

console.log(void(5 + 5) === undefined)
// Output: true

We use the same 5 + 5 numbers in this instance but ask whether a void operator is actually undefined, getting a true value. That's why you should understand that regardless of what parameters you're trying to manipulate, the outcome for the void operator in JavaScript always remains the same.

Non-leaking arrow functions

Another quite representative approach, which you're welcome to use with the JavaScript void operator, is the work with non-leaking arrow functions. When using Arrow functions, we can get an expression return if requested.
However, it can also have side effects, such as returning the function call result, which previously showed nothing as a return. For this purpose, the use of the void operator can have a following look:

button.onclick = () => void doSomething();

When this code line is included, the void statement guarantees that irrespective of the returned value of doSomething(), the code behavior will remain unchanged. An important note here is to insert the void operator before doSomething() all the time to get the expected return.

Test yourself

Even though the use cases of the JavaScript void operator are pretty limited, we've prepared a few tasks to test yourself.

  • Task 1. Obtain the undefined primitive value by writing a character, a string, and an empty bracket, followed by logging the results through a console.

Solution:

console.log(void 0); // Output: undefined
console.log(void "test"); // Output: undefined
console.log(void {}); // Output: undefined

  • Task 2. Using the void expression, include the immediately invoked function expression with the wording "Task 2 getting done!"

Solution:

void function iife() { 
    console.log("Task 2 getting done!");
  }();
  // Output: "Task 2 getting done!"

  • Task 3. Try including the immediately invoked function expression with the same wording as in Task 2, but without using the void operator and log the return through a console:

function iife() {
    console.log("Task 2 getting done!");
  }();
  // Expected Output: "Uncaught SyntaxError"

Summary

As a reminder, take a look at how you can use the void operator:

  • To get the primitive value of undefined regardless of the parameters you indicate.

  • To work with the non-linear Arrow functions and cement their behavior not to change in certain conditions.

  • To manipulate the immediately invoked function expressions to treat the function keyword as an expression instead of a declaration.