JavaScript初心者必見！==と===の徹底解説

2024-04-02

JavaScriptにおける==と===の違い

等価演算子 (==)

これらの演算子は一見似ていますが、比較の仕方に重要な違いがあります。

等価演算子 (==)

== 演算子は、2つの値が同じ値かどうかを判断します。ただし、データ型は考慮されません。

つまり、以下の例のように、異なるデータ型であっても、値が同じであれば true となります。

1 == "1" // true
true == 1 // true
[] == "" // true

このように、== 演算子はデータ型を考慮しないため、意図しない結果になる可能性があります。

厳密等価演算子 (===)

=== 演算子は、2つの値が同じ値で同じデータ型かどうかを判断します。

つまり、以下の例のように、データ型が異なると false となります。

1 === "1" // false
true === 1 // false
[] === "" // false

=== 演算子は、データ型も含めて厳密に比較を行うため、より安全で正確な比較が可能です。

一般的には、=== 演算子を使用することを推奨します。=== 演算子は、データ型も含めて比較を行うため、意図しない結果になる可能性が低くなります。

ただし、以下の場合のように、== 演算子の方が適切な場合もあります。

データ型が異なる可能性があることを承知の上で、値のみを比較したい場合
互換性のあるデータ型を比較する場合 (例: 数字型と文字列型)

一般的には、=== 演算子を使用することを推奨します。

// == 演算子の例

console.log(1 == "1"); // true
console.log(true == 1); // true
console.log([] == ""); // true

// === 演算子の例

console.log(1 === "1"); // false
console.log(true === 1); // false
console.log([] === ""); // false

このコードを実行すると、以下の出力が得られます。

true
true
true
false
false
false

この出力から、== 演算子はデータ型を考慮せずに値のみを比較し、=== 演算子はデータ型も含めて厳密に比較を行うことがわかります。

以下に、== と === 演算子の違いを示すその他の例を示します。

// 型変換

console.log(1 == "1"); // true (1 が "1" に型変換される)
console.log(1 === "1"); // false

// null と undefined

console.log(null == undefined); // true
console.log(null === undefined); // false

// NaN

console.log(NaN == NaN); // false
console.log(NaN === NaN); // false

== と === 演算子は、値の比較に使用されますが、データ型の扱い方に違いがあります。

== 演算子は、データ型を考慮せずに値のみを比較します。
=== 演算子は、データ型も含めて厳密に比較を行います。

JavaScriptにおける==と===の違いを説明する他の方法

図を用いる

以下のような図を用いることで、== と === 演算子の違いを視覚的に説明することができます。

表を用いる

演算子	比較対象	詳細
`==`	値	データ型を考慮せず、値のみを比較する
`===`	値とデータ型	データ型も含めて厳密に比較する

具体的な例を用いる

ログイン処理: ユーザーが入力したパスワードとデータベースに保存されているパスワードを比較する場合、=== 演算子を使用する必要があります。これは、パスワードが文字列型であるため、== 演算子を使用すると、誤って一致してしまう可能性があるためです。
データ型変換: 数値型を文字列型に変換する場合、== 演算子を使用することができます。これは、== 演算子はデータ型を考慮せずに値のみを比較するためです。