存在感很低的 void

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

Version


ECMAScript 5

Definition


void
無論搭配任何 expression,皆回傳 undefined

若以白話來說, void 相當於以下實作:

1
2
3
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.

1
<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


1
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


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

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

IIFE


1
2
3
(function() {

})();

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

1
2
3
void function() {

}();

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

Conclusion


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

Reference


Dr. Axel Rauschmayer, Speaking JavaScript

2019-02-05