More than 3 years have passed since last update.

JavaScript voidってなんぞや？

Last updated at 2020-08-15Posted at 2019-06-14

qiita初投稿ですよろしくお願いします。

発端

なんとなくtypescriptのコンパイル結果を見ていた時のこと、

デフォルト引数を指定した関数で見慣れない表記が

ソース

const fn = (arg : string, opt : string = "initial") => 
    console.log(`arg: ${arg}, option: ${opt}`)

コンパイル後

var fn = function (arg, option) {
    if (option === void 0) { option = ""; }
    return console.log("arg: " + arg + ", option: " + option);
};

んんん。。。？

void 0

おまえだれや。。。？

まずコンパイル後のjsファイルなのでtypescriptのvoid型とは関係なさそう？

ということでmozillaのjsリファレンスを見てみる。

なるほど、どうやらこいつの正体は演算子。

受け取った式を実行後undefinedを返してくれるみたいですね。

これ

option === undefined

やればいいだけなのに遠回りなのでは？と思ってた僕はまだ甘かったです。

undefined は、グローバルオブジェクトのプロパティであり、すなわちグローバルスコープ内の変数です。>undefined の初期値はプリミティブ値である undefined です。

モダンブラウザ (JavaScript 1.8.5 / Firefox 4 以降) での undefined は、ECMAScript 5 仕様により、設定不可、書込不可のプロパティとなります。そうでない場合でも、上書きは避けてください。

つまり環境によってはプロパティundefinedはプリミティブ値のundefinedではない可能性があるので
それをケアしてるんですね。

とはいえこれのうまい使いどころあんまり思いつかないですね。。。

リファレンス内サンプルだと

<a href="javascript:void(0);">
  Click here to do nothing
</a>

のようにページ遷移しないよう,hrefを上書きしてたりでした。

コンパイル後の吐き出されたjs追っかけてみるといろいろ気づきがあって面白かったです。

これ以外にも見慣れない記述があったので後に記事にできたらなぁ、と思います。

最後までお読みいただきありがとうございました！