安全な比較のために：JavaScriptの === 演算子を使いこなそう

2024-04-05

JavaScriptにおける等価演算子：== と === の違い

== 演算子（緩い比較）

== 演算子は、値の型を変換して比較を行います。つまり、異なる型の値であっても、値が同じであれば true と判定されます。

例：

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

これらの例では、左辺と右辺の値は異なる型ですが、== 演算子によって true と判定されています。

=== 演算子（厳密な比較）

=== 演算子は、値の型と値を厳密に比較します。そのため、異なる型の値は常に false と判定されます。

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

型も含めて厳密に比較したい場合は === 演算子を使うべきです。
型の違いを無視して値のみを比較したい場合は == 演算子を使うことができます。

一般的には、=== 演算子の方がより安全で明確な比較ができるため、積極的に使用することをおすすめします。

その他の注意点

== 演算子は、NaN と NaN を比較すると false と判定されます。

これは、NaN は厳密には自分自身と等しくないと定義されているためです。

まとめ

== 演算子は、値の型を変換して比較する緩い比較演算子
どちらを使うべきかは、比較したい内容によって異なる
一般的には、=== 演算子の方がより安全で明確な比較ができる

// == 演算子の例
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

このように、== と === 演算子は、比較結果が異なる場合があります。

文字列の大文字と小文字を比較する場合

const str1 = "Hello";
const str2 = "hello";

console.log(str1 == str2); // false
console.log(str1 === str2); // false

オブジェクトを比較する場合

const obj1 = {
  name: "John",
  age: 30,
};
const obj2 = {
  name: "John",
  age: 30,
};

console.log(obj1 == obj2); // false
console.log(obj1 === obj2); // false

== と === 演算子は、一見似ているようですが、比較方法に違いがあります。

JavaScriptにおける等価比較のその他の方法

Object.is() メソッドは、2つの値が厳密に等しいかどうかを比較します。これは === 演算子と似ていますが、NaN の比較など、いくつかの点で異なる動作をします。

console.log(Object.is(1, "1")); // false
console.log(Object.is(true, 1)); // false
console.log(Object.is([], "")); // false
console.log(Object.is(NaN, NaN)); // true

型比較

特定の型の値を比較したい場合は、型ガードや instanceof 演算子を使用できます。

// 型ガード
function isNumber(value) {
  return typeof value === "number";
}

console.log(isNumber(1)); // true
console.log(isNumber("1")); // false

// instanceof 演算子
const obj = {
  name: "John",
  age: 30,
};

console.log(obj instanceof Object); // true

カスタム比較関数

特定の条件に基づいて値を比較したい場合は、カスタム比較関数を作成することができます。

function compareByName(obj1, obj2) {
  return obj1.name.localeCompare(obj2.name);
}

const obj1 = {
  name: "John",
  age: 30,
};
const obj2 = {
  name: "Alice",
  age: 25,
};

console.log(compareByName(obj1, obj2)); // 1