ES6 - Void Keyword

ES6 - The void Operator

The void operator is a unary operator that evaluates a given expression and then returns undefined. It’s often used in specific contexts where an expression needs to be evaluated for its side effects without its result interfering, or to explicitly obtain the undefined primitive value.

Syntax:

void expression
// or
void(expression)

void and Immediately Invoked Function Expressions (IIFEs)

Historically, void was sometimes used to force the function keyword to be treated as an expression in an IIFE, especially when the standard parentheses (function(){...})(); were less common or to avoid JSLint warnings. However, this usage is rare in modern JavaScript.

Old IIFE pattern using void (less common now):

void function() {
  const message = "IIFE executed using void!";
  console.log(message);
}();
// Output: IIFE executed using void!

Modern IIFE patterns are preferred:

(function() {
  console.log("Standard IIFE.");
})();

(() => {
  console.log("Arrow function IIFE.");
})();

In ES modules, IIFEs for scoping are less necessary as modules have their own scope.

void and JavaScript URIs (javascript:)

A common use case for void is in javascript: URIs within HTML <a> tag href attributes. When a javascript: URI is executed, the browser typically replaces the page content with the string representation of the expression’s result. If the result is undefined, the page remains unchanged. void 0 (or void(0)) is a concise way to get undefined.

Using void 0 to prevent navigation:

<!-- Prevents navigation, alert is executed for its side effect -->
<a href="javascript:void(alert('Hello! Page will not change.'))">
  Click Me (void example)
</a>

<br /><br />

<!-- Without void, if alert() returned something other than undefined,
     the browser might try to display it. Alert itself returns undefined. -->
<a href="javascript:alert('Hello again!');">
  Click Me (alert only)
</a>

<br /><br />

<!-- Common pattern to make a link do nothing on click by itself -->
<a href="javascript:void(0);" onclick="myJsFunction(); return false;">
  Do something with JS (old pattern)
</a>

When the first link is clicked, the alert appears, but the page content doesn’t change because void ensures the expression evaluates to undefined. The second link also works because alert() itself returns undefined.

Modern Best Practices for Clickable Elements:

While javascript:void(0); works, it’s often better to use more semantic HTML and JavaScript for event handling:

• Use <button> elements for actions that don’t navigate.
• If using an <a> tag for JavaScript actions, use event.preventDefault() in the event handler and provide a meaningful href (e.g., # or a fallback URL) for accessibility and SEO.
• Attach event listeners using JavaScript (element.addEventListener('click', handler);) rather than inline onclick attributes.

HTML:
```html
<a href="#" id="jsActionLink">Perform JS Action</a>
<button type="button" id="jsActionButton">Perform JS Action (Button)</button>

JavaScript:

document.getElementById('jsActionLink').addEventListener('click', function(event) {
  event.preventDefault(); // Prevent navigation if href is not just "#"
  console.log('Link clicked, action performed!');
  // Perform your JavaScript action here
});

document.getElementById('jsActionButton').addEventListener('click', function() {
  console.log('Button clicked, action performed!');
  // Perform your JavaScript action here
});

In summary, `void` is a niche operator. Its primary modern use is `javascript:void(0)` or `javascript:void(expression)` in `href` attributes, but even this has alternatives. Understanding it is useful for reading older code or specific scenarios.