【JavaScript】==（等価演算子）と===（厳密等価演算子）の違いについて

2018/2/1 2018/7/25 JavaScript

ここのところとあるお仕事に備えてJavaScriptの基礎をまとめるという作業をしていました。

その中でふとMDNのページを見ていたところ、「あれそういえばこれよくわかってなかったなー」という内容がちらほらあることに気づいたので、自分への忘備録用に今回はJavaScriptの等価演算子と厳密等価演算子についてのブログを書いてみたいと思います。

1 JavaScriptの等価演算子と厳密等価演算子について
2 まとめ「

JavaScriptの等価演算子と厳密等価演算子について

JavaScriptにおける等価演算子と厳密等価演算子は、要するに==と===のことを指しています。

よくif文を使用する際に合わせて使用することが多いのですが、一体これらにはどんな違いがあるのでしょうか。

等価演算子(==)について

例えば、下記のコードを例にしてみたいと思います。

const data1 = 1;
const data2 = "1";

console.log(data1==data2); //trueが返される

２つの定数に「1」と「”1″」が代入されており、それらが等しいかどうかをconsole.log()の中で比較しています。

このプログラムの結果、console.log()の中身はtrue、つまり左と右が等しいですよという結果が返されるようになります。

厳密等価演算子(==)について

次に、下記のコードをみてましょう。

const data1 = 1;
const data2 = "1";

console.log(data1===data2);//falseが返される

先ほどと同じように、２つの定数に「1」と「”1″」が代入されており、それらが等しいかどうかをconsole.log()の中で比較しています。

このプログラムの結果は等価演算子の時と違い、console.log()の中身はfalse、つまり左と右が等しくないですよという結果が返されるようになります。

等価演算子と厳密等価演算子の違いについて

等価演算子と厳密等価演算子の違いについてここでは触れてみたいと思います。

JavaScriptでは（JavaScriptに限らずですが）、様々なデータ型を扱います。

厳密等価演算子の場合は、左辺の値およびデータ型（例えば数値なのか文字なのか）も含めて比較するようになるので、上記のコード例でいえば、同じ1という値であっても、「文字データ」と「数値データ」というデータの種類の違いによって、データ比較の結果、２つのデータは等しくない（false）が返される形になるのです。

それに対して等価演算子の場合は、データの種類が違う場合はデータ型を変換した上で値を比較するようになるので、「1」と「”1″」は等しい（true）という結果が返されるようになるのです。

等価演算子を用いた場合のデータ型変換の基本的なルールについては、MDNのページに下記の情報が掲載されていました。

・数値と文字列を比較するとき、文字列は数値に変換されます。JavaScript は文字列の数値リテラルを Number 型の値に変換しようとします。まず、文字列の数値リテラルから数学的な値を引き出します。次に、その値を最も近い Number 型に丸めます。
・もしオペランドの片方が Boolean ならば、Boolean オペランドが true の場合 1 に、false の場合 +0 に変換されます。
・オブジェクトを数値または文字列と比較すると、JavaScript はそのオブジェクトのデフォルト値を返そうとします。演算子は、オブジェクトの valueOf や toString といったメソッドを用いて、プリミティブな値、String か Number の値に変換しようとします。変換に失敗したら、ランタイムエラーを生成します。
・オブジェクトがプリミティブ値に変換されるのは、比較対象がプリミティブ値であるときだけです。両方のオペランドがオブジェクトなら、オブジェクトとして比較され、両方が同じオブジェクトを参照するときだけ真となります。
（MDN：JavaScript比較演算子のページより引用）

ここまでの厳密なルール、知らないことも多いですよね。。。