【JS応用|豆知識】JavaScriptの隠れた名脇役!Object.prototype.propertyIsEnumerableを使いこなそう

導入

JavaScriptでオブジェクトを操作する際、「特定のプロパティが列挙可能(for…inループなどで現れるか)かどうか」を判定したい場面はありませんか?Object.keys()やfor…in文を使うと、予期せぬプロパティまで取得してしまい、バグの原因になることがあります。そんなとき、プロパティの「列挙可能性」を正確に判定できるのが Object.prototype.propertyIsEnumerable です。このメソッドを理解することで、より堅牢で意図した通りのオブジェクト操作が可能になります。

基礎知識

JavaScriptのオブジェクトには、各プロパティに対して「列挙可能(Enumerable)」という設定値があります。
通常、自分で追加したプロパティは列挙可能ですが、Object.definePropertyなどで明示的に設定を変えたり、組み込みのプロパティ(Dateオブジェクトのメソッドなど)は列挙不可になっていることがよくあります。

propertyIsEnumerable は、指定したプロパティがそのオブジェクト自身のプロパティであり、かつ列挙可能である場合に true を返します。プロパティが継承されている場合や、列挙不可に設定されている場合は false となるため、オブジェクトの素性を探るのに非常に強力です。

実装/解決策

使い方は非常にシンプルです。判定したいオブジェクトに対して .propertyIsEnumerable(‘プロパティ名’) を呼び出すだけです。

重要なポイントは、このメソッドは「そのオブジェクト自身」のプロパティのみをチェックするという点です。プロトタイプチェーン上のプロパティは判定対象外となるため、hasOwnPropertyの挙動に近い性質を持っています。

サンプルプログラム

// オブジェクトを定義
const user = {
  name: 'Taro',
  age: 25
};

// 列挙不可のプロパティを追加
Object.defineProperty(user, 'id', {
  value: 101,
  enumerable: false // 明示的に列挙不可にする
});

// 判定テスト
console.log(user.propertyIsEnumerable('name')); // true: 通常のプロパティなので列挙可能
console.log(user.propertyIsEnumerable('id'));   // false: 列挙不可設定なのでfalse
console.log(user.propertyIsEnumerable('toString')); // false: そもそも自身のプロパティではない

// ループで確認
for (let key in user) {
  // 'id'は出力されず、'name'と'age'のみ出力される
  console.log('ループ内:', key);
}

応用・注意点

現場での活用において、以下の2点に注意してください。

1. プロトタイプチェーンの落とし穴: propertyIsEnumerableは、継承されたプロパティに対しては常に false を返します。親オブジェクトから引き継いだプロパティが列挙可能かどうかを知りたい場合は、このメソッドではなく、直接プロパティにアクセスして確認する必要があります。

2. Object.create(null)の利用: オブジェクトを生成する際、Object.create(null) を使うとプロトタイプを持たないオブジェクトが作れます。この場合、Object.prototypeを継承していないため、直接 .propertyIsEnumerable を呼ぶことができません。その際は Object.prototype.propertyIsEnumerable.call(obj, ‘key’) のように、callメソッドを使って安全に呼び出すのがフロントエンド開発におけるベストプラクティスです。

このメソッドをマスターすれば、ライブラリ開発や複雑なデータ処理において、オブジェクトの挙動を意図通りに制御できるようになります。ぜひ活用してみてください。

タイトルとURLをコピーしました