A note on void in JavaScript and TypeScript

If, before you became interested in JavaScript, you wrote in traditional languages ​​with strong typing, then you may be familiar with the concept of void . This is the type whose use tells the programmer that the corresponding functions and methods do not return anything when called.



The void entity is also available in JavaScript and TypeScript. In JS, this is an operator. In TS, this is a primitive data type. And here and there, void does not behave as many of those who came across void in other languages ​​would expect.

JavaScript void statement

In JavaScript, the void operator evaluates the expression passed to it. At the same time, no matter which expression is evaluated, void always returns undefined .

 let i = void 2; // i === undefined 

Why do we need such an operator?
Firstly, it should be noted that in the early years of JS-programming, developers could redefine undefined and write some value to it. But void always returns the true value of undefined .

Secondly, using the void operator is an interesting way to work with immediately called functions:

 void function() {  console.log('What') }() 

And all this - without pollution of the global namespace:

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

Since the void operator always returns undefined and always evaluates the expression passed to it, we have a very expressive way to return from the function without returning some value, but with a call, for example, some callback:

 //  -  undefined      function middleware(nextCallback) {  if(conditionApplies()) {    return void nextCallback();  } } 

This leads us to the most important way to use void . This operator is a kind of "guard post" application. If a certain function should always return undefined , this can be achieved using the void operator.

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

Void data type in TypeScript

Type void in TypeScript can be called something like the opposite of type any . Functions in JavaScript always return something. This can be either a value set by the programmer or undefined :

 function iHaveNoReturnValue(i) {  console.log(i) } //  undefined 

Since JavaScript functions, from which nothing is explicitly returned, always return undefined , void in TypeScript is the appropriate type to tell developers that the function returns undefined :

 declare function iHaveNoReturnValue(i: number): void 

The void entity in the form of a type can also be used for parameters and for any other variable declarations. The only value that can always be passed to the void parameter is undefined .

 declare function iTakeNoParameters(x: void): void iTakeNoParameters() //  iTakeNoParameters(undefined) //  iTakeNoParameters(void 2) //  

As a result, it turns out that in TS the void and undefined types are almost the same thing. But there is one small difference between them, which, in fact, is extremely important. The returned void type can be replaced with other types, which allows you to implement advanced patterns for working with callbacks.

 function doSomething(callback: () => void) {  let c = callback() // callback   undefined  // c -  undefined } //     function aNumberCallback(): number {  return 2; } // ;    doSometing doSomething(aNumberCallback) 

Developers expect such designs, often used in JS applications, to do just that. Here is the material on this topic.

If you want a function to accept only functions that return undefined , you can change the method signature accordingly:

 //  // function doSomething(callback: () => void) { //  function doSomething(callback: () => undefined) { /* ... */ } function aNumberCallback(): number { return 2; } //  -    doSomething(aNumberCallback) 

Summary

The void operator in JavaScript and the void data type in TypeScript are fairly simple entities. The range of situations in which they are applicable is limited. However, it should be noted that the programmer who uses them, most likely, will not encounter any problems when working with them.

Dear readers! Do you use void in JS and TS?