What is the point of void operator in JavaScript?

I've seen some people using void operator in their code. I have also seen this in href attributes: javascript:void(0) which doesn't seem any better than javascript:;

So, what is the justification of using the void operator?

27508 次浏览
小开

Explanation of its use in links:

This is the reason that bookmarklets often wrap the code inside void() or an anonymous function that doesn't return anything to stop the browser from trying to display the result of executing the bookmarklet. For example:

javascript:void(window.open("dom_spy.html"))

If you directly use code that returns something (a new window instance in this case), the browser will end up displaying that:

javascript:window.open("dom_spy.html");

In Firefox the above will display:

[object Window]
小开

Consider the following:

<a href="javascript:void(fish=document.getElementById('foo').value);void(document.getElementById('bar').value=fish);">With Void</a>


<a href="javascript:fish=document.getElementById('foo').value;document.getElementById('bar').value=fish;">Without Void</a>


<input type="text" id="foo" value="one fish" />
<input type="text" id="bar" value="no fish" />

The first link will swap the values of the text fields. The second link will open a new page with the text "one fish". If you use a javascript: link, the minute an expression returns something other than null or undefined, the browser will interpret that as what the link should do. By wrapping all expressions/statments in a void() function, you ensure your entire snippet of code will run. These days, this is primarily of use in Bookmarklets, as using an onclick attribute, or setting up event handlers in separate Javascript blocks/files is the "norm".

As for javascript: vs. javascript:void(), the first statement is ambiguous. You're saying, "hey, I want to run some javascript", but then you don't provide any code. It's not necessarily clear what the browser should do here. With the second statement you're saying "hey, run some javascript", and your code eventually returns undefined, which the browser knows means "do nothing".

Since I'm here, I'll also point out that using either javascript: or javascript:void(); has fallen out of favor with most people who care about markup. The better thing to do is have your onclick handler return false, and have the link pointed towards a page/resource that makes sense for people who have javascript turned off, or are using a javascript blocker such as NoScript.

小开

The undefined value was not directly accessible in JavaScript until ES1.3.

An operator void <expression> was therefore included to permit access to this value.

It is sometimes useful, particularly when working with the Web API (e.g. event handlers), to ensure that the result of an expression is consistently undefined.

When the undefined property was added to the global object in ES1.3 the utility of void became non-obvious.

Hence your question.

小开
最佳答案

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.


提交答案