[等価演算子 / 同値演算子] 1 == "1"はtrueになるのに、1 === "1"はfalseになる理由

はじめに

お久しぶりです。およそ5ヶ月ぶりの投稿になりました。
現在、筆者は社会人でエンジニアとしてバックエンドの開発業務にどっぷり浸かっているのですが、フロントエンドの勉強もしたいと思い、今年から業務外でフロントエンドの勉強を少しずつ学習しています。学習していくにあたり、等価演算子「==」と同値演算子(厳密等価演算子)「===」の違いの謎がようやく解けたので、アウトプットしていこうと思います。

等価演算子と同値演算子の違い

等価演算子(==)と同値演算子(===)の違いについて、実際の値を比較した出力結果をもとにして説明します。

比較対象	等価演算子	同値演算子
「1」と「1」	true	true
「1」と「"one"」	false	false
「1」と「"1"」	true	false

「1」と「1」の比較

compareValue1.js

const value1 = 1
const value2 = 1
console.log(value1 == value2); // true
console.log(value1 === value2); // true

こちらについては完全に値が等しいので、等価演算子と同値演算子ともにtrueを返却します。

「1」と「"one"」の比較

compareValue2.js

const value1 = 1
const value2 = "one"
console.log(value1 == value2); // false
console.log(value1 === value2); // false

こちらについては値自体が異なっているので、等価演算子と同値演算子ともにfalseを返却します。

「1」と「"1"」の比較

compareValue3.js

const value1 = 1
const value2 = "1"
console.log(value1 == value2); // true
console.log(value1 === value2); // false

こちらについては等価演算子ではtrueが、同値演算子ではfalseがそれぞれ返却されています。一体なぜ「等しい」を表現する演算子で返却結果が異なってしまうのでしょうか？
その違いは、型の比較が含まれているかという点で発生しています。等価演算子と同値演算子のそもそもの性質として、下記のような違いがあります。

• 等価演算子(==)：値の違いを比較
• 同値演算子(===)：値と型の違いを比較

となっています。等価演算子の比較では、値(1)のみの比較であり、型の種類については判定対象外となるためtrueを返却していました。その一方で、同値演算子の比較では、値だけでなく型の比較も行われており、value1は整数型、value2は文字列型と型の違いが発生していたため、falseを返却していました。

そのため、型の違いを許容するのが「等価演算子」、許容しないのが「同値演算子」となります。

最後に

業務でバックエンド開発をする中では、動的言語(PHP, Rubyなど)で開発をしていたこともあり、型について気にしていませんでした。ただ、フロントエンドは静的言語で型定義が必要な言語になっていることから、演算子の違いにも注意して開発できればと思いました！