JavaScriptの===(イコール3つ)を活用！10のサンプルコードでプロが解説

はじめに
●JavaScriptのイコール3つ（===）とは
- ○イコール2つ（==）との違い
●イコール3つ（===）の使い方
- ○サンプルコード1：基本的な比較
- ○サンプルコード2：条件分岐
●イコール3つ（===）の応用例
●注意点と対処法
まとめ

はじめに

この記事を読めば、JavaScriptのイコール3つ（===）を使いこなすことができるようになります。

JavaScript初心者にもわかりやすく、イコール3つの使い方、注意点、応用例を10のサンプルコードで解説します。

JavaScriptのイコール3つを理解し、スキルアップにつなげましょう。

●JavaScriptのイコール3つ（===）とは

イコール3つ（===）は、JavaScriptにおいて厳密な等価性を判断する比較演算子です。

値だけでなく、データ型も同じである場合にのみtrueを返します。

○イコール2つ（==）との違い

イコール2つ（==）は、データ型が異なる場合でも、型変換を行ってから値を比較します。

これに対し、イコール3つ（===）は型変換を行わずに値とデータ型を比較するため、より厳密な等価性判断が可能です。

●イコール3つ（===）の使い方

イコール3つ（===）は、値とデータ型が同じ場合にtrueを返し、それ以外の場合にはfalseを返します。

下記のサンプルコードでは、基本的な使い方と条件分岐での使用例を紹介します。

○サンプルコード1：基本的な比較

const num1 = 10;
const num2 = '10';

console.log(num1 === num2); // false

上記のコードでは、num1は数値の10、num2は文字列の’10’です。

イコール3つ（===）を使って比較すると、値は同じでもデータ型が異なるためfalseが出力されます。

○サンプルコード2：条件分岐

const age = 18;
const inputAge = '18';

if (age === parseInt(inputAge)) {
  console.log('同じ年齢です');
} else {
  console.log('年齢が違います');
}

上記のコードでは、条件分岐でイコール3つ（===）を使用しています。

文字列のinputAgeをparseIntで数値に変換してから比較しているため、年齢が同じと判断されます。

●イコール3つ（===）の応用例

イコール3つ（===）は、様々な場面で活用できます。

下記のサンプルコードでは、配列のフィルタリングやオブジェクトのプロパティ比較など、いくつかの応用例を紹介します。

○サンプルコード3：配列のフィルタリング

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter((number) => number % 2 === 0);

console.log(evenNumbers); // [2, 4]

上記のコードでは、配列の要素をフィルタリングする際にイコール3つ（===）を使っています。

偶数だけを抽出するため、余りが0であるかを厳密に判断しています。

○サンプルコード4：オブジェクトのプロパティ比較

const person1 = { name: 'Alice', age: 30 };
const person2 = { name: 'Bob', age: '30' };

console.log(person1.age === person2.age); // false

上記のコードでは、オブジェクトのプロパティをイコール3つ（===）を使って比較しています。

ageプロパティの値は同じですが、データ型が異なるためfalseが出力されます。

○サンプルコード5：関数の引数チェック

function add(a, b) {
  if (typeof a !== 'number' || typeof b !== 'number') {
    throw new Error('引数は数値である必要があります');
  }
  return a + b;
}

console.log(add(1, 2)); // 3
console.log(add(1, '2')); // エラーが発生

上記のコードでは、関数の引数が数値であるかどうかをイコール3つ（!==）を使ってチェックしています。

引数が数値でない場合、エラーを投げて処理を中断させます。

○サンプルコード6：異なる型の比較

const value1 = '100';
const value2 = 100;

console.log(value1 === String(value2)); // true

上記のコードでは、数値と文字列を比較する際に、数値を文字列に変換してからイコール3つ（===）で比較しています。

変換後の値とデータ型が同じであるため、trueが出力されます。

○サンプルコード7：独自の比較関数

function isEqual(a, b) {
  return a === b;
}

console.log(isEqual(10, 10)); // true
console.log(isEqual('10', 10)); // false

上記のコードでは、イコール3つ（===）を使って独自の比較関数を作成しています。

関数を利用することで、値の等価性を簡単にチェックできます。

○サンプルコード8：nullとundefinedの区別

const value3 = null;
const value4 = undefined;

console.log(value3 === value4); // false

上記のコードでは、nullとundefinedをイコール3つ（===）で比較しています。

nullとundefinedは異なるデータ型であるため、厳密な等価性ではなくfalseが出力されます。

○サンプルコード9：短絡評価

const defaultValue = 'デフォルト';
const userInput = null;

const result = userInput === null ? defaultValue : userInput;
console.log(result); // "デフォルト"

上記のコードでは、イコール3つ（===）を使って短絡評価を行っています。

ユーザー入力がnullであるかどうかを厳密に比較し、nullの場合はデフォルト値を代入し、そうでない場合はユーザー入力を代入しています。

○サンプルコード10：連想配列のキー比較

const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { a: 1, b: 2, c: 3 };
const obj3 = { a: 1, b: 2, d: 3 };

function compareKeys(objA, objB) {
  const keysA = Object.keys(objA);
  const keysB = Object.keys(objB);

  if (keysA.length !== keysB.length) {
    return false;
  }

  for (let key of keysA) {
    if (!keysB.includes(key)) {
      return false;
    }
  }

  return true;
}

console.log(compareKeys(obj1, obj2)); // true
console.log(compareKeys(obj1, obj3)); // false

上記のコードでは、連想配列（オブジェクト）のキーをイコール3つ（===）を使って比較しています。

まず、オブジェクトのキーを取得し、キーの数が異なる場合はfalseを返します。

次に、キーがすべて一致するかどうかをチェックし、一致しない場合もfalseを返します。

それ以外の場合はtrueを返します。

このようにして、連想配列のキーを比較することができます。