[JavaScript]==と===の違い

2021-02-21

JavaScriptのコードに出てくる==と===の比較演算子ですが、==と===どっちを使っても一緒じゃない？と思った時に読む記事です。

==の説明

ざっくり言うと==は等価であるか否かを比較します。===はさらに厳密に比較します。

まずは==の例を見ていきましょう。

var hoge = 1;
var huga = 1;

if (hoge == huga) {
    console.log('True!')
} else {
    console.log('False!')
}

=> True!

変数hogeとhugaには1が代入されており、hogeとhugaを比較(等価であるか？)ということを確認しています。

条件式のhoge == hugaは等価であるためtrueを返しています。

では、以下のような場合はどうでしょうか？

var hoge = 1;
var huga = '1';

hogeが数値(int型)、hugaは文字列(str型)の場合です。

結果はfalseを返しそうなのですが、、、

var hoge = 1;
var huga = '1';

if (hoge == huga) {
    console.log('True!')
} else {
    console.log('False!')
}

=> True!

なんとtrueを返しちゃうんですね。これは==が型を自動的に変換して比較してくれるためです。

そこで、厳密に比較を行いたい時、つまり勝手に型を変換せずにそのままやってくれよという時に===の出番です。

var hoge = 1;
var huga = '1';

if (hoge === huga) {
    console.log('True!')
} else {
    console.log('False!')
}

=> False!

期待通りの結果を得ることができました。

なお、==は自動で型を変換するという処理が走るので===に比べて処理速度に違いがあるのかな？と思いましたが誤差の範囲のようで、あまり違いはないようです。