The void operator in TypeScript and JavaScript

The void operator, present in both TypeScript and plain JavaScript, evaluates an expression and returns undefined. Although it may not initially seem particularly useful, the void operator plays a significant role in preventing unintended leakage of return values and handling Promises for side effects.

Contents

• What is the Void Operator?
• Preventing Unintended Return Values
• Promises with Side Effects
• Comparison between TypeScript and JavaScript
• Video Tutorial

What is the Void Operator?

The void operator evaluates a given expression and returns undefined. In both TypeScript and JavaScript, it can be used to turn an expression's result into undefined. For example, the expression (1 + 2) can be transformed into void (1 + 2), resulting in undefined:

const result = void (1 + 2);

Preventing Unintended Return Values

Consider the scenario of the addUser function below. In certain cases, using the shorthand braceless syntax can cause issues when working with methods like Array.push, which returns a number type. To prevent unintended leakage of this return type, the void operator can be used. By utilizing the void operator in the addUser function, the return value of Array.pushsis suppressed, ensuring that the function itself doesn't return anything:

type User = {
  props: {
    name: string;
  };
};
 
const users: User[] = [];
 
const addUser = (user: User) => void users.push(user);

Promises with Side Effects

Another common use case for the void operator is when dealing with Promises. If you simply want to initiate a Promise for its side effects and are not interested in handling its resolution, the void operator comes in handy. By using the void operator, you can bypass the need for explicitly handling the Promise's resolution, allowing you to focus solely on the side effects.

import axios from 'axios';
 
void axios.get('https://typescript.tv/send-ping');

Comparison between TypeScript and JavaScript

It's important to note that the void operator exists in both TypeScript and plain JavaScript. While TypeScript provides the benefits of static typing and additional language features, the void operator itself remains consistent in its behavior across both languages. It offers a concise and effective way to denote the absence of a return value.

Video Tutorial