JavaScriptで空オブジェクトを判定する7つの手法

JavaScriptで空オブジェクトを判定する方法を説明するイメージJS
この記事は約6分で読めます。

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

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

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

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

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

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

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

はじめに

この記事を読めば、JavaScriptで空オブジェクトを判定する方法が簡単にできるようになります。

●空オブジェクトとは

空オブジェクトとは、JavaScriptでプロパティやメソッドを持たないオブジェクトのことを指します。

つまり、キーと値のペアが存在しないオブジェクトです。

この記事では、JavaScriptで空オブジェクトを判定する7つの手法を初心者目線で分かりやすく解説します。

●空オブジェクトの判定方法

空オブジェクトの判定方法にはいくつかの手法があります。

下記では、7つの手法を紹介します。

それぞれの方法を詳しく見ていきましょう。

○方法1:Object.keysを使う

Object.keys()メソッドを使うことで、オブジェクトのキーの配列を取得できます。

その配列の長さが0であれば、空オブジェクトと判断できます。

function isEmpty(obj) {
  return Object.keys(obj).length === 0;
}

○方法2:JSON.stringifyを使う

JSON.stringify()メソッドを使うことで、オブジェクトをJSON形式の文字列に変換できます。

変換後の文字列が”{}”であれば、空オブジェクトと判断できます。

function isEmpty(obj) {
  return JSON.stringify(obj) === '{}';
}

○方法3:for-inループを使う

for-inループを使って、オブジェクトのプロパティをイテレートし、プロパティが見つからなければ空オブジェクトと判断できます。

function isEmpty(obj) {
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      return false;
    }
  }
  return true;
}

○方法4:Object.getOwnPropertyNamesを使う

Object.getOwnPropertyNames()メソッドを使うことで、オブジェクトのプロパティ名の配列を取得できます。

その配列の長さが0であれば、空オブジェクトと判断できます。

function isEmpty(obj) {
  return Object.getOwnPropertyNames(obj).length === 0;
}

○方法5:Object.entriesを使う

Object.entries()メソッドを使うことで、オブジェクトのキーと値のペアの配列を取得できます。

その配列の長さが0であれば、空オブジェクトと判断できます。

function isEmpty(obj) {
  return Object.entries(obj).length === 0;
}

○方法6:ES6の新機能を使う

ES6の新機能であるReflect.ownKeys()メソッドを使うことで、オブジェクトのキーの配列を取得できます。

その配列の長さが0であれば、空オブジェクトと判断できます。

function isEmpty(obj) {
  return Reflect.ownKeys(obj).length === 0;
}

○方法7:ライブラリを利用する

外部ライブラリを利用することで、空オブジェクトの判定を簡単に行うことができます。

例えば、Lodashライブラリの_.isEmpty()メソッドを使うことで、空オブジェクトを判定できます。

const _ = require('lodash');

function isEmpty(obj) {
  return _.isEmpty(obj);
}

●注意点と対処法

空オブジェクトを判定する際には、いくつかの注意点があります。

  1. プロトタイプチェーン上にプロパティがある場合、いくつかの方法では空オブジェクトと誤判定することがあります。
    この場合、Object.getOwnPropertyNames()やReflect.ownKeys()などのメソッドを使って対処できます。
  2. オブジェクトのプロパティがSymbol型の場合、一部の方法では空オブジェクトと誤判定することがあります。
    この場合、Reflect.ownKeys()メソッドを使って対処できます。

各方法の特性を理解し、適切な方法を選択してください。

●応用例とサンプルコード

空オブジェクトの判定は、さまざまな場面で応用できます。

下記では、2つの応用例とそれぞれのサンプルコードを紹介します。

○応用例1:フォームのバリデーションチェック

空オブジェクトの判定を使って、フォームの入力エラーをバリデーションチェックできます。

function validateForm(formData) {
  let errors = {};

  if (!formData.name) {
    errors.name = '名前を入力してください';
  }

  if (!formData.email) {
    errors.email = 'メールアドレスを入力してください';
  }

  return errors;
}

const formData = {
  name: '',
  email: ''
};

const errors = validateForm(formData);

if (isEmpty(errors)) {
  console.log('フォームの入力が正しいです');
} else {
  console.log('エラーがあります:', errors);
}

○応用例2:オブジェクトをマージする際の空オブジェクトの除外

オブジェクトをマージする際に、空オブジェクトを除外することができます。

function mergeObjects(objects) {
  let result = {};

  for (let obj of objects) {
    if (!isEmpty(obj)) {
      result = { ...result, ...obj };
    }
  }

  return result;
}

const objects = [
  { a: 1, b: 2 },
  {},
  { c: 3 },
  {}
];

const mergedObject = mergeObjects(objects);

console.log(mergedObject); // { a: 1, b: 2, c: 3 }

以上のように、空オブジェクトの判定は多様な場面で活用できます。

判定方法の特性を理解し、適切な方法を選択してください。

まとめ

この記事では、JavaScriptで空オブジェクトを判定する7つの方法を紹介しました。

また、注意点と対処法、応用例とサンプルコードも解説しました。各方法の特性を理解し、適切な方法を選択して空オブジェクトの判定を行いましょう。

この記事を読めば、空オブジェクトの判定ができるようになります。