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?