What Is the Point of Void Operator in JavaScript

What is the point of void operator in JavaScript?

The JavaScript, the void operator is used to explicitly return undefined. It's a unary operator, meaning only one operand can be used with it. You can use it like shown below — standalone or with a parenthesis.

void expression;
void(expression);

Lets see some examples:

void 0; //returns undefined
void(1); //returns undefined

void 'hello'; //undefined
void {}; //undefined
void []; //undefined

void myFunction(); 
void(myFunction());

If you ask why do you need a special keyword just to return undefined instead of just returning undefined: the reason is that before ES5 you could actually name a global variable undefined, like so: var undefined = "hello" or var undefined = 23, and most browsers would accept it; the identifier undefined was not promised to actually be undefined¹. So, to return the actual undefined value, the void operator is/was used. It's not a very popular operator though and is seldom used.

Let's see an example of function with void:

//just a normal function
function test() {
    console.log('hello');
    return 2;
}

//lets call it
console.log(test()); //output is hello followed by 2

//now lets try with void
console.log(void test()); //output is hello followed by undefined

void discards the return value from the function and explicitly returns undefined.

You can read more from my tutorial post: https://josephkhan.me/the-javascript-void-operator/

¹ In ECMAScript 5 and later, the global variable undefined is guaranteed to be undefined (ECMA-262 5th Ed., § 15.1.1.3), though it is still possible to have a variable inside an inner scope be named undefined.

Why use the void keyword?

From the MDN Docs of void

Syntax

void expression

Uses

This operator allows inserting expressions that produce side effects
into places where an expression that evaluates to undefined is
desired.

The void operator is often used merely to obtain the undefined
primitive value, usually using "void(0)" (which is equivalent to "void
0"). In these cases, the global variable undefined can be used instead
(assuming it has not been assigned to a non-default value).

And why? See MDN Undefined

In older versions of JavaScript undefined could be overridden, but in starting in JavaScript 1.8.5, undefined is non-writable, as per the ECMAScript 5 specification.

What's a good use of void()

Jakob shows some practical use cases of void. However as he mentions void is not really required, but I use it to test for undefined. I use it to create my own typeOf function:

function typeOf(value) {
    if (value === null) return "null";
    if (value === void(0)) return "undefined";
    return Object.prototype.toString.call(value).slice(8, -1).toLowerCase();
}

You may read why I do so here.

What does javascript:void(0) mean?

The void operator evaluates the given
expression and then returns undefined.

The void operator is often used merely
to obtain the undefined primitive
value, usually using “void(0)” (which
is equivalent to “void 0”). In these
cases, the global variable undefined
can be used instead (assuming it has
not been assigned to a non-default
value).

An explanation is provided here: void operator.

The reason you’d want to do this with the href of a link is that normally, a javascript: URL will redirect the browser to a plain text version of the result of evaluating that JavaScript. But if the result is undefined, then the browser stays on the same page. void(0) is just a short and simple script that evaluates to undefined.

What is purpose of using `void` here?

I googled your code snippet and it looks like its typically embedded in a link with "javascript:" in front of it. To quote the Mozilla reference for the void operator:

JavaScript URIs

When a browser follows a javascript: URI, it evaluates the code in the URI and then replaces the contents of the page with the returned value, unless the returned value is undefined. The void operator can be used to return undefined. For example:

<a href="javascript:void(0);">Click here to do nothing</a>
<a href="javascript:void(document.body.style.backgroundColor='green');">Click here for green background</a>

Note, however, that javascript: URIs are now often discouraged over other alternatives, such as events.

source: https://developer.mozilla.org/en/JavaScript/Reference/Operators/Special/void

So it keeps the contents of the page from being overwritten when the code is executed inside of a link.

In this case, if the code is executed without the javascript: URI, the void operator should not make any difference. The void operator simply evaluates its input expression and returns undefined.

What does `void 0` mean?

What does void 0 mean?

void^[MDN] is a prefix keyword that takes one argument and always returns undefined.

Examples

void 0
void (0)
void "hello"
void (new Date())
//all will return undefined

What's the point of that?

It seems pretty useless, doesn't it? If it always returns undefined, what's wrong with just using undefined itself?

In a perfect world we would be able to safely just use undefined: it's much simpler and easier to understand than void 0. But in case you've never noticed before, this isn't a perfect world, especially when it comes to Javascript.

The problem with using undefined was that undefined is not a reserved word (it is actually a property of the global object ^[wtfjs]). That is, undefined is a permissible variable name, so you could assign a new value to it at your own caprice.

alert(undefined); //alerts "undefined"
var undefined = "new value";
alert(undefined) // alerts "new value"

Note: This is no longer a problem in any environment that supports ECMAScript 5 or newer (i.e. in practice everywhere but IE 8), which defines the undefined property of the global object as read-only (so it is only possible to shadow the variable in your own local scope). However, this information is still useful for backwards-compatibility purposes.

alert(window.hasOwnProperty('undefined')); // alerts "true"
alert(window.undefined); // alerts "undefined"
alert(undefined === window.undefined); // alerts "true"
var undefined = "new value";
alert(undefined); // alerts "new value"
alert(undefined === window.undefined); // alerts "false"

void, on the other hand, cannot be overidden. void 0 will always return undefined. undefined, on the other hand, can be whatever Mr. Javascript decides he wants it to be.

Why void 0, specifically?

Why should we use void 0? What's so special about 0? Couldn't we just as easily use 1, or 42, or 1000000 or "Hello, world!"?

And the answer is, yes, we could, and it would work just as well. The only benefit of passing in 0 instead of some other argument is that 0 is short and idiomatic.

Why is this still relevant?

Although undefined can generally be trusted in modern JavaScript environments, there is one trivial advantage of void 0: it's shorter. The difference is not enough to worry about when writing code but it can add up enough over large code bases that most code minifiers replace undefined with void 0 to reduce the number of bytes sent to the browser.

---

Related Topics