JavaScript void Keyword Tutorial with Examples

Void Keyword
Void and JavaScript URIs
One-time use function

1. Void Keyword

void is an important keyword in ECMAScript. It has the following characteristics:

void acts as an operator, standing before a single operand with any type.
void is used to evaluate an expression. It will not return any value, or in other words it returns undefined value.

The void operator precedes any expression to get an undefined value

void-expression-example.js

void console.log("Test1");  // Test1

console.log( void ("Test2") ); // undefined

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

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

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

2. Void and JavaScript URIs

<a href ="javascript:URI">..</a> is common in HTML. Browsers will evaluate the URI and take the value returned by the URI to replace the content on the current page.

href-javascript-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Href Javascript</title>
      <script>
         function getHtmlContentToShow()  {
           console.log("Do something here...");
           alert("Do something here..");
           // Return new HTML content to replace current Page.
           return "<h1 style='color:red;'>Other HTML Content!</h1>";
         }
      </script>

   </head>
   <body>
        <h1>Href:javascript example</h1>

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

If the URI returns undefined the browser will not replace the content of the current page.

href-javascript-void-example.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Href Javascript Void</title>
      <script>
         function getHtmlContentToShow()  {
           console.log("Do something here...");
           alert("Do something here..");
           // Return new HTML content to replace current Page.
           return "<h1 style='color:red;'>Other HTML Content!</h1>";
         }
      </script>
   </head>
   <body>
        <h1>Href:javascript void example</h1>
        <a href="javascript:void getHtmlContentToShow()">Click me!</a>
   </body>
</html>

3. One-time use function

Normally, you need to define a function and then call it.

function-example.js

// Defind a function
function sayHello()  {
  console.log("Hello Everyone");
}
// Call function
sayHello();

The following example shows you how to create a function only for one time use purpose. It is called immediately. You will not be able to use this function anywhere else in the program because it does not exist after being used.

used-once-function-example.js

// Defind a function, and call it.
(function sayHello()  {
  console.log("Hello Everyone");
}) ();

try  {
  // This function does not exist.
  sayHello();
}
catch(e)  {
  console.log(e); // ReferenceError: sayHello is not defined
}

You can also create a function to use only one time with the void keyword. It is called immediately, and no longer exists after being called.

void-function-example.js

// Defind a function, and call it.
void function sayHello()  {
  console.log("Hello Everyone");
}();

try  {
  // This function does not exist.
  sayHello();
}
catch(e)  {
  console.log(e); // ReferenceError: sayHello is not defined
}

JavaScript void Keyword Tutorial with Examples

1. Void Keyword

2. Void and JavaScript URIs

3. One-time use function

ECMAScript, Javascript Tutorials

ECMAScript, Javascript Tutorials

Newest Articles