JavaScript - void Keyword

The void keyword in JavaScript is used as an operator that evaluates a given expression and returns undefined. The void is an important keyword in JavaScript. The meaning of the void is null or empty.

The void keyword can be used as a unary operator that appears before its single operand, which may be of any type. This operator specifies an expression to be evaluated without returning a value or returning the undefined.

Syntax

The syntax to use the void keyword in JavaScript −

void operand;

In the above syntax, the operand can be any expression.

Return Value

It returns the undefined.

Example

In the below code, we used the 10 with the 'void' keyword. In the output, you can observe that it returns undefined.

<html>
<body>
   <div id = "output">The value of the ans variable is:  </div>
   <script>
      let ans = void 10;
      document.getElementById("output").innerHTML += ans;
   </script>
</body>
</html>

Output

The value of the ans variable is: undefined

Importance of Precedence of void Keyword

Generally, the JavaScript 'void' keyword is used to return the primitive undefined value, but if you don't take precedence in the consideration, it can return a different value.

Let's understand it via the example below.

Example

In the below code, the void operator takes precedence over the strict equality operator in the first expression. So, it first evaluates 'void 10' to undefined and compares it with 20. So, it returns false.

The second expression evaluates '10 === 20' first to false and evaluates 'void false' to undefined.

<html>
<body>
   <div id = "output1"> </div>
   <div id = "output2"> </div>
   <script>
      let res1 = void 10 === 20;
      let res2 = void (10 === 20);
      document.getElementById("output1").innerHTML += res1;
      document.getElementById("output2").innerHTML += res2; 
   </script>
</body>
</html>

Output

false
undefined

What is javascript:void(0)?

Let's break down the javascript:void(0) into two parts and understand both separately.

javascript:

You can use the 'javascript:' to create a pseudo URL. Using 'javascript:' you can create the interactive URL.

You need to write the expression after 'javascript:', and when users click the anchor text, it executes the JavaScript code.

Let's understand it via the example below.

Example

In the below code, we have created the link text and used the JavaScript URL as a href. When you click the anchor text, it writes it in the HTML document.

<html>
   <body>
      <a href = "javascript:document.write('Anchor text is clicked!')"> Click me! </a>
   </body>
</html>

In this way, you can use the 'javascript:uri' to create the pseudo URL.

void(0)

The void(0) evaluates the JavaScript expression, but it returns undefined. So, when you want to execute the expression without performing any action, you can use the void(0).

javascript: void(0)

When you don't want to navigate users to another web page when they click on the link, you can use the 'javascript:void(0)' as a href value of the anchor tag.

Let's understand it via the example below.

Example

It won't do anything Whenever you click the anchor text in the code below.

<html>
   <body>
      <a href = "javascript:void(0)"> Click me! </a>
   </body>
</html>

You can also use the 'javascript:void(0)' when you want to update the web page using the URI but don't want to navigate to another web page.

Example

In the below code, when you click the anchor text, it will change the background color of the body, rather than navigating to another web page.

<html>
<body>
   <a href = "javascript:void(0);" 
   	  onclick = "document.body.style.backgroundColor = 'blue'"> 
   	  Change Background Color 
   </a>
</body>
</html>

The void Keyword with Functions

When you use the void keyword with JavaScript functions, it returns undefined. After that, if you try to execute the function, it will throw an error, as the 'void' operator considers the function as its operand and evaluates it as undefined.

Example

In the below code, we have defined the test() function and used the 'void' keyword with it.

Also, used the try…catch block to catch the error.

In the try block, we execute the function, and in the output, you can observe that control goes into the catch block.

<html>
<body>
<div id = "demo"> </div>
<script>
   const output = document.getElementById('demo');
   try {
      void function test() {
         output.innerHTML += "The test function is executed!";
      }
      test();
   } catch (error) {
      output.innerHTML += "The test function is undefined!";
   }
</script>
</body>
</html>

Output

The test function is undefined!

The void Keyword with Immediately Invoked Function

When you use the 'void' keyword with the JavaScript immediately invoked function, it invokes the function expression first and evaluates it as undefined.

Example

In the below code, we have defined the immediately invoked function with the void keyword. You can observe that it invokes the function first and returns undefined.

<html>
<body>
   <div id = "demo"> </div>
   <script>
      const output = document.getElementById("demo");
      void function () {
         output.innerHTML = "Unknown function is executed!";
      }();
   </script>
</body>
</html>

Output

Unknown function is executed!

Also, you can use the 'void' keyword with the arrow function to return undefined from the arrow function. The JavaScript:void() URI can also be used to prevent the web page reloading by default, like the preventDefault() method.

Print Page