本記事では、JavaScriptの==と===の違いについて解説しています。
この違いを知らないで処理を実装すると、条件に一致しないはずなのに何故か条件に一致していまい関係のない処理が実行されている。。なんてこともあるので、本記事でしっかり違いについて理解しましょう。
- 誰でも分かるように嚙み砕いて説明してくれる
- アニメーションの知識が深く学べる
- 1つのWebサイトを作りながら学べる
ポチップ
先輩くんAmazon Kindle Unlimitedに登録すると、月額980円で読み放題だからオススメだよ！
後輩ちゃん初回30日間は無料だから、まだ登録したことのない人はぜひ試してみてね！
変数名/関数名にもう悩まない！
- 美しいコードが書けるが自然と書けるようになる
- 他の開発者が理解しやすいコードになる
ポチップ
==と===の違いは型の比較
==は等価演算子と呼ばれています。MDNに記載されている情報は以下の通りです。
等価演算子 (==) は、二つのオペランドが等しいことを検査し、論理値で結果を返します。厳密等価演算子とは異なり、オペランドの型が異なる場合には型の変換を試みてから比較を行います。
引用元：MDN
上記の引用を分かりやすく訳すと、等価演算子は代入されている値が等しいかを検査します。比較対象する2つの型が異なる場合は、型の変換をしてから検査します。
オペランドとは、数式を構成する要素のうち+や-などの演算子ではない要素のことを指します。
「1+1」の数式があった場合、演算子ではない「1」がオペランドになります。
===は厳密等価演算子と呼ばれています。MDNに記載されている情報は以下の通りです。
厳密等価演算子 (===) は、二つのオペランドが等しいことを検査し、論理値で結果を返します。等価演算子とは異なり、厳密等価演算子はオペランドの型が異なる場合、常に異なるものと判断します。
引用元：MDN
上記の引用を分かりやすく訳すと、厳密等価演算子は等価演算子と同様に代入されている数値が等しいかを検査します。もし、比較対象する2つの型が異なる場合は異なるものと判断されます。
つまり、等価演算子と厳密等価演算子の違いは比較する2つを値だけで検査するのか、それとも値と型を両方セットで検査するかの違いです。
数値と文字列
数値と文字列を等価演算子と厳密等価演算子を使って比較してみましょう。
console.log(1 == "1"); // -> true
console.log(1 === "1"); // -> false数値と真偽値
数値と文字列を等価演算子と厳密等価演算子を使って比較してみましょう。
真偽値はtrueとfalseですが、trueには「1」がfalseには「0」がデフォルトで設定されています。
console.log(0 == false); // -> true
console.log(0 === false); // -> false
console.log(1 == true); // -> true
console.log(1 === true); // -> false