ECMAScript 之 void

ECMAScript 如同 C 語言也有 void ，但存在感很低，很多人甚至不知道 ECMAScript 有 void 。

Version

ECMAScript 5

Definition

void

無論搭配任何 expression，皆回傳 undefined

若以白話來說， void 相當於以下實作：

function void(expression) {
    return undefined;
}

Why ?

根據 JavaScript 爸爸 Brendan Eich 所言：

I added the void operator to JavaScript before Netscape 2 shipped to make it easy to discard any non-undefined value in a JavaScript URL.

<a href="javascript:void window.open('https://www.google.com')">Google</a>

window.open() 會開啟新的 tab，並回傳 window object，這會導致一些 browser 將目前頁面也導向新的連結，使用 void 會捨棄 window object 而回傳 undefined ，這使得 browser 不會改變原來頁面，這是 Brendan Eich 設計 void 的初衷。

void 0

if (x === void 0) // always safe

在 ECMAScript 3， undefined 為 global object，因此能夠被修改，而 void 0 永遠是 undefined ，不會被修改，所以可使用 void 0 取代 undefined 。

undefined 在 ECMAScript 5 之後被定義為 read-only，不能被修改，因此使用 void 0 取代 undefined 的動機已經不再如以往那麼強烈

使 Expression 成為 Undefined

<a href="javascript:void(0)" @click="onClick">Google</a>

以 Vue 而言， void 大概只有在這裡會看到，為了要讓 <a/> 有底線，所以一定得加上 href ，但實際卻是執行 @click 的 onClick() ，此時我們必須加上 javascript:void(0) 使 href 成為 undefined ，喪失原本 hyperlink 該有的功能。

IIFE

(function() {
    
})();

IIFE 的標準寫法，是將 function() {} 以括號刮起來，再加上 () 立即執行。

void function() {
    
}();

若你覺得加上 () 很醜不易閱讀，也可以在 function() {} 加上 void ，這會強迫 void 之後的 function 加以運算，然後可透過 () 立即執行。

Conclusion

• 以 void 0 取代 undefined 具有時代意義，目前已經不太需要
• href="javascript:void(0)" 是今日還可以看到 void 的少數情景
• 將 void 用於 IIFE 也是不錯的點子，可避免 () 不易閱讀

Reference

Dr. Axel Rauschmayer , Speaking JavaScript