LoginSignup
5

More than 1 year has passed since last update.

【JavaScript】voidについて

Last updated at Posted at 2019-07-16

今日、voidというものを初めて見知ったので、調べたことをまとめてみます。

voidとは?

void演算子は、式を評価して、絶対にundefinedを返します。
一体どういうところで使うんでしょうか。

この演算子は、「戻り値が undefined であってほしい場所に、それ以外の戻り値を持つ式を挿入したい場合」に有用です。
[参考:MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/void)

ふむふむ。
...?
ということで、実際の使用例をみてみます。

voidの活躍場所
<a href="javascript:void(0)">リンク</a>

javascript:擬似プロトコル

これはhttp:とかfile:とかと同じURIスキームの1つです。

javascript: から始まる URI をサポートしたブラウザに於いて、それは、URI 内のコードを評価し、戻り値が undefined でなければ、返された値にページコンテンツを置き換えます。
[参考:MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/void)

リンク内でJavaScriptが実行できちゃうんですね。
MDNでは控えめなイベントハンドラ以外多用しない方が良いと書かれていることにも留意しておきます。

つまり上の例のjavascript:void(0)でアンカータグ本来の動きを抑制しています。
わざわざイベントハンドラでpreventDefaultを設定しなくて良いので楽ですね。

ギモン:javascript:undefinedじゃだめ?

これは昔の仕様ではundefinedが予約語じゃなかった為、
undefinedに値を定義したりできてしまっていたからみたいです。

昔のundefined
var undefined = 5;  //最悪
var num = 5;
if(num === undefined){
  alert('未定義です');       //定義してるのに実行されちゃう
}

昔のものと互換性をつけるために、
void(0)で本来のundefinedを保証しています。

なのでこの例に限らず、確実にundefinedを保証したい場合は、
void(0)に置き換えたほうが良いんじゃないかと思います。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5