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

JavaScriptのイコール3つ活用術JS
この記事は約7分で読めます。

 

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればカスタムコードを使って機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、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を返します。

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

●注意点と対処法

イコール3つ(===)を使用する際の注意点として、比較対象のデータ型が異なる場合には意図しない結果が返ることがあります。

そのため、比較前にデータ型を揃えるか、適切な型変換を行うことが重要です。

また、NaN(Not a Number)は特殊な値であり、イコール3つ(===)を使っても自分自身と等価とは判断されません。

このような場合には、isNaN関数を使用してNaNを判断することが推奨されます。

まとめ

イコール3つ(===)は、JavaScriptにおける厳密な等価性比較を行うための演算子です。

値とデータ型が同じである場合にtrueを返し、異なる場合にはfalseを返します。

基本的な使い方や応用例、注意点と対処法、カスタマイズ方法を理解することで、より安全かつ効率的なプログラムを作成することができるようになります。