點燈坊

學而時習之,不亦悅乎

存在感很低的 void

Sam Xiao's Avatar 2019-09-06

ECMAScript 如同 C 語言也有 void,但存在感很低,甚至很多人從來沒使用過。

Version

ECMAScript 5

Definition

void << expression >>
無論搭配任何 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,但實際卻是執行 @clickonClick(),此時我們必須加上 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