Talk about the void operator in Javascript

Since JS expressions tend to be verbose, I have recently begun to use Coffeescript to reduce the burden. For example, when I want to retrieve the first dog in the house, I must first determine whether the house object exists, then determine whether house.dogs exists, and finally retrieve house.dogs[0]. In JS, I need to write like this

var dog = (typeof house !== 'undefined && house !== null) && house.dogs && house.dogs[0]

In Coffee, I only need to write like this:

dog = house?.dogs?[0];

After writing this, readers will ask, does this have anything to do with the title "void in Javascript"? The essence of Coffee is JS. The reason why Coffee works so well is because it generates efficient and robust JS code. We can take a look at its generated results.

var dog, _ref;
dog = typeof house !== "undefined" && house !== null ? (_ref = house.dogs) != null ? _ref[0] : void 0 : void 0;

Just one line of Coffee code generated such a long JS code, which seems to be more reliable and safer than the one I wrote in JS earlier. There are two void 0s at the end. Who is this?

Structure the above example:

dog = (typeof house !== "undefined" && house !== null) ?
        ((_ref = house.dogs) != null ? _ref[0] : void 0 )
        : void 0;

If house is undefined or house is null, void 0 is returned

If house.dogs is null, void 0 is returned

But what is the value of void 0? This is It’s easy to test:

typeof void 0 //得到"undefined"console.log(void 0) //输出undefined

It seems that void 0 is undefined, but this method is too wild and not rigorous enough, that is, it is impossible to answer: What are the values ​​​​of the countless possible combinations of void 100, void hello(), void i++?

Let’s take a look at what the standards say.

The specification says this

In the ECMAScript 262 specification, there is the following description:

The void Operator
The production UnaryExpression : void UnaryExpression is evaluated as follows:
Let expr be the result of evaluating UnaryExpression.
Call GetValue(expr).
Return undefined.
NOTE: GetValue must be called even though its value is not used because it may have observable side-effects.

Translation:

void操作符
产生式 UnaryExpression : void UnaryExpression 按如下流程解释:
令 expr 为解释执行UnaryExpression的结果。
调用 GetValue(expr).
返回 undefined.
注意：GetValue一定要调用，即使它的值不会被用到，但是这个表达式可能会有副作用(side-effects)。

The key point is: no matter what the expression after void is, the void operator will return undefined. Therefore, the above is given by We can think of the code compiled by Coffee as follows:

dog = (typeof house !== "undefined" && house !== null) ?
        ((_ref = house.dogs) != null ? _ref[0] : undefined )
        : undefined ;

The question is, since (void 0) === undefined, wouldn’t it be enough to just write undefined?

Why use void?

Because undefined is not a reserved word in javascript. In other words, you can write:

function joke() {
    var undefined = "hello world";
    console.log(undefined); //会输出"hello world"
}
console.log(undefined); //输出undefined

Yes, you can use undefined as the variable name in a function context, so the code written in this context can only get undefined from the global scope, such as:

window.undefined //浏览器环境
GLOBAL.undefined //Node环境

But it should be noted that even if window, GLOBAL can still be defined in the function context, so taking undefined from window/GLOBAL is not 100% reliable. For example:

function x() {
   var undefined = 'hello world',
       f = {},
       window = {
           'undefined': 'joke'
       };
   console.log(undefined);// hello world
   console.log(window.undefined); //joke
   console.log(f.a === undefined); //false
   console.log(f.a === void 0); //true
}

So, using void to obtain undefined has become a general rule. For example, isUndefined in underscore.js is written like this:

_.isUndefined = function(obj) {
    return obj === void 0;
}

In addition to using void to ensure that the undefined value is obtained, are there any other methods? Yes, another way is through function calling. For example, the source code of AngularJS uses this method:

(function(window, document, undefined) {    //.....
})(window, document);

By not passing parameters, it ensures that the value of the undefined parameter is undefined.

Other functions

Besides taking undefined, are there any other uses for void?

There is also a common function, filling href. Below is a screenshot of Weibo. Its forwarding, favorites, and discussions are all hyperlinks, but users do not want to click on them to jump to another page, but to trigger some interactive operations.

Theoretically, these three hyperlinks have no URL, but if you don’t write it, hehe, clicking it will refresh the entire page. So we used href="javascript:void(0) to ensure that clicking it will execute a purely boring void(0).

Another situation is that if we want to generate an empty src image, The best way seems to be src='javascript:void(0)'

Written at the end

Back to the definition of void, there is a sentence that is particularly confusing:

Note: GetValue must be called, even if its value Will not be used, but this expression may have side-effects

.

这是什么意思？这表示无论void右边的表达式是什么，都要对其求值。这么说可能不太明白，在知乎上winter大神有过阐述关于js中void，既然返回永远是undefined，那么GetValue有啥用？，我且拾人牙慧，代入一个场景，看代码：

var happiness = 10;
var girl = {
    get whenMarry() {
        happiness--;
        return 1/0; //Infinity
    },
    get happiness() {
        return happiness;
    }
};

console.log(girl.whenMarry); //调用了whenMarry的get方法
console.log(girl.happiness); // 9

void girl.whenMarry; //调用了whenMarry的get方法
console.log(girl.happiness); // 8

delete girl.whenMarry; //没有调用whenMarry的get方法
console.log(girl.happiness); //还是8

上述代码定义了一个大龄文艺女青年，每被问到什么时候结婚呀(whenMarry)，happiness都会减1。从执行情况可以看出，无论是普通访问girl.whenMarry，还是void girl.whenMarry都会使她的happiness--。而如果把void换成delete操作符写成delete girl.whenMarry，她的happiness就不会减了，因为delete操作符不会对girl.whenMarry求值。