How to use void keyword in JavaScript?

In this tutorial, let us discuss how to use the void keyword in JavaScript.

We use the void keyword as the return type of function that does not return any value. It evaluates an expression and returns undefined. We can use this with a single operand because this is a unary operator.

We should not wrap the expression in parentheses because void is not a function. void 0 is the same as void(0).

Users can follow the syntax blocks to deal with each use case.


void expression

The expression can be a variable or a function.

Use void Keyword with Immediately Invoked Function Expressions

Immediately Invoked Function Expression (IIFE) lets the void keyword work as an expression rather than a declaration.

For example, we need to run the below code snippet.

function execute(){}()


void (function execute() {})();
(function execute() {})();

We can write the first code snippet in two ways, as given above, with the void.


In this program, we add a void to an IIFE function. Therefore, the function returns undefined.

<html> <body> <h2>Program:<i>IIFE with void</i></h2> <div id="IIFEVoidBtnWrap"> <button onclick="IIFEVoidOutput()">Click Me</button> </div> <p id="IIFEVoidOut"></p> <script> function IIFEVoidOutput() { var IIFEVoidBtnWrap = document.getElementById("IIFEVoidBtnWrap"); var IIFEVoidOut = document.getElementById("IIFEVoidOut"); = "none"; const IIFEFunction = void function IIFEFunction1() { return 'IIFEFunction1'; }(); IIFEVoidOut.innerHTML = "<b>Output</b> : " + IIFEFunction; } </script> </body> </html>

Use void keyword with URI

The browser evaluates the URI code and returns the value to the page when we use the void keyword with the URI.

Hyperlinks open by reloading the page when the user clicks on the link. When you need to run some other code in such cases, you can use javascript: void(0).


javascript:void 0

It returns nothing.


In this program, the first link reloads the page when the user clicks on it. The second link remains the same because void 0 restricts page reload.

<html> <body> <h2>Program:<i>javascript: void(0)</i></h2> <a href=""ondblclick="alert('Twice')">Page reload</a><br><br> <a href="javascript: void(0)" ondblclick="alert('Twice')">No page reload</a> </body> </html>

Use void keyword with a conditional statement


if(value===void(0)) {}

Void can compare an undefined variable or data to an undefined one.


In this program, the first function call has no arguments. Therefore, it displays undefined with the condition check with the void. The second function call has a value, and hence user can see that value in the output.

<html> <body> <h2>Program: <i>conditions with void</i></h2> <div id="checkVoidBtnWrap"> <button onclick="checkVoidOutput()">Click Me</button> </div> <p id="checkVoidOut"></p> <script> function checkVoidOutput() { var checkVoidBtnWrap = document.getElementById("checkVoidBtnWrap"); var checkVoidOut = document.getElementById("checkVoidOut"); // = "none"; var checkVoidCbk = function(value) { if(value===void(0)) return "Nothing"; else return value; }; checkVoidOut.innerHTML = "<b>Output</b><br><br> " + checkVoidCbk() + "<br><br>"+ checkVoidCbk("Hello"); } </script> </body> </html>

Use void keyword with non-leaking arrow functions

Arrow functions return an expression. In a few cases, it returns unexpected results of a function call that returns nothing. In such cases, the void can help because it does not return anything.


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

It returns nothing, even if an unexpected outcome comes in.


In this program, we set an arrow function with the void key to avoid any wrong actions that may happen.

<html> <body> <h2>Program: <i>arrow function with void</i></h2> <div id="arrowVoidBtnWrap"> <button id="arrowVoidBtn">Click Me</button> </div> <p id="arrowVoidOut"></p> <script> var arrowVoidBtnWrap = document.getElementById("arrowVoidBtnWrap"); var arrowVoidBtn = document.getElementById("arrowVoidBtn"); var arrowVoidOut = document.getElementById("arrowVoidOut"); function arrowVoidOutput() { arrowVoidOut.innerHTML = "Returns Nothing"; } arrowVoidBtn.onclick = () => void arrowVoidOutput(); </script> </body> </html>

Use void keyword with asynchronous calls


(async () => {
   try {
      const resp = await fetch('API');
      const res = await response.result();
   catch(e) {}

Void can help in the case of asynchronous API calls.


This program uses invalid syntax with an asynchronous function and displays the result.

<html> <body> <h2>Program: <i>asynchronus calls with void</i></h2> <div id="asyncVoidBtnWrap"> <button id="asyncVoidBtn" onclick="asyncVoidDoAction()">Click Me</button> </div> <p id="asyncVoidOut"></p> <script> var asyncVoidBtnWrap = document.getElementById("asyncVoidBtnWrap"); var asyncVoidOut = document.getElementById("asyncVoidOut"); function asyncVoidDoAction() { (async () => { try { const resp = await fetch('API'); const res = await response.result(); asyncVoidOut.innerHTML = res; } catch(e) { asyncVoidOut.innerHTML = e; } })(); } </script> </body> </html>

Use void keyword to generate undefined values



It returns undefined.


In this program, we use the void keyword to return the value undefined and display both actual and undefined values to the user.

<html> <body> <h2>Program: <i>undefined value with void</i></h2> <div id="undefValVoidBtnWrap"> <button id="undefValVoidBtn">Click Me</button> </div> <p id="undefValVoidOut"></p> <script> var undefValVoidBtnWrap = document.getElementById("undefValVoidBtnWrap"); var undefValVoidBtn = document.getElementById("undefValVoidBtn"); var undefValVoidOut = document.getElementById("undefValVoidOut"); undefValVoidBtn.onclick = function() { var num1, num2, num3, num4; num1=10, num2=void (num3=30, num4=40); undefValVoidOut.innerHTML = ('num1 = ' + num1 + '<br><br>num2 = ' + num2 + '<br><br>num3 = ' + num3 + '<br><br>num4 = ' + num4); }; </script> </body> </html>

Use void keyword to generate one-time functions


void function doAction()

Void makes the function undefined for the second time.


In this program, we define a function with the void keyword. The function call throws an error when we call it for the second time. The try-catch block handles the error case.

<html> <body> <h2>Program: <i> one-time function with void</i></h2> <div id="oneTimeFnVoidBtnWrap"> <button id="oneTimeFnVoidBtn">Click Me</button> </div> <p id="oneTimeFnVoidOut"></p> <script> var oneTimeFnVoidBtnWrap = document.getElementById("oneTimeFnVoidBtnWrap"); var oneTimeFnVoidBtn = document.getElementById("oneTimeFnVoidBtn"); var oneTimeFnVoidOut = document.getElementById("oneTimeFnVoidOut"); var oneTimeFnStr = ""; oneTimeFnVoidBtn.onclick = function() { void function oneTimeFnVoid() { oneTimeFnStr += "One-time function<br><br>"; }(); try { oneTimeFnVoid(); } catch(e) { oneTimeFnStr += e; } oneTimeFnVoidOut.innerHTML = oneTimeFnStr; }; </script> </body> </html>


void console.log("test"); //test void("test"); //undefined (void(2 =="2")); //undefined (void(2)=="2"); //false (void(2)==undefined);// true

Operator Precedence

If there is more than one operand, we should put parenthesis.

void 10+20;//void(10)+20


void is a keyword. We can not use it as a variable name. Therefore, we cannot change its definition.

eval('const void=100');
//Uncaught SyntaxError: Unexpected token 'void'

This tutorial taught us the void keyword uses. It just helps to minimize code but affects code readability.

Updated on: 31-Oct-2022


Kickstart Your Career

Get certified by completing the course

Get Started