JavaScriptでObjectに特定のkey・プロパティが存在するかどうかを確認する方法(hasOwnProperty, in)

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、JavaScriptでObjectに特定のkey・プロパティが存在するかどうかを確認する方法について解説していきます。

1 Objectに特定のkey・プロパティが存在するかどうかを確認する方法
2 JavaScript書籍 Ver. 中級-上級者向け
3 JavaScript書籍 Ver. 初級者向け
4 Twitterやってます！Follow Me！
5 最近の投稿

Objectに特定のkey・プロパティが存在するかどうかを確認する方法

JavaScriptで、Objectに特定のkey・プロパティが存在するかどうかを確認する方法には、hasOwnPropertyメソッドを使う方法とin演算子を使う方法の2種類があります。

それぞれ説明した後に、2つの違いについても解説します。

hasOwnProperty メソッドを使う方法

hasOwnPropertyメソッドは、指定した key が、Object 自身のプロパティである場合にtrueを返します。

プロトタイプチェーンを遡って、key を探さないため、Object 自身が保持している key の有無を確認することができます。

const robotama = {
  name: 'ロボ玉',
  from: 'グンマー帝国',
  hamFlag: true,
  power: 0,
  tama: '',
};

// 1. hasOwnProperty メソッドを使う方法
console.log(robotama.hasOwnProperty('from')); // true
console.log(robotama.hasOwnProperty('robotama')); // false
console.log(robotama.hasOwnProperty('hamFlag')); // true

in演算子を使う方法

in演算子は、指定されたkeyが、Object またはそのプロトタイプチェーンに存在する場合、trueを返します。

const robotama = {
  name: 'ロボ玉',
  from: 'グンマー帝国',
  hamFlag: true,
  power: 0,
  tama: '',
};


// 2. in演算子を使う方法
console.log('from' in robotama); // true
console.log('robotama' in robotama); // false
console.log('hamFlag' in robotama); // true

hasOwnProperty と in演算子の違いとは？

結論から言うと、hasOwnPropertyとin演算子の違いは、そのObjectそのものが keyを持っているかどうかで判断が変わります。

hasOwnPropertyメソッドは、Object自身がその key を所有しているかどうかをチェックします。

それに対して、in演算子は、指定されたkeyが、Object またはそのプロトタイプチェーンに存在すれば、trueとして判断します。

つまり、Objectには存在しないが、プロトタイプは存在するkeyの場合、挙動が変わるのです。

これをSampleCodeで、確認していきます。

const robotama = {
  name: 'ロボ玉',
  from: 'グンマー帝国',
  hamFlag: true,
  power: 0,
  tama: '',
};

const roborovski = {
  name: 'ロボロフスキー',
  from: 'さいたまー共和国',
};

// roborovski に robotama のプロトタイプをSetする
Object.setPrototypeOf(roborovski, robotama);

console.log('roborovski', roborovski);
// roborovski {name: 'ロボロフスキー', from: 'さいたまー共和国'}

// 1. どちらにも存在するkeyを確認する場合
console.log(roborovski.hasOwnProperty('from')); // true
console.log('from' in roborovski); // true

// 2. Setされたプロトタイプにしか存在しないkeyを確認する場合

// 2-1. hasOwnProperty: 純粋に、そのObjectが持っているPropertyだけで、Checkしている！
console.log(roborovski.hasOwnProperty('hamFlag')); // false

// 2-2. in-演算子: roborovski Object には、hamFlagは存在しないが、プロトタイプの設定に情報があるため trueになる！
console.log('hamFlag' in roborovski); // true

ちなみに、Object.setPrototypeOf(obj, prototype) は、指定した Object に prototype を設定するメソッドです。

Object.setPrototypeOf(obj, prototype)

Object.setPrototypeOf(obj, prototype)

指定した Object に prototype を設定するメソッド

[ 引数 ]

1. obj: プロトタイプを設定するオブジェクト。

2. prototype: オブジェクトの新しいプロトタイプ (オブジェクトまたは null)。

 [ 実行結果(返り値) ]

指定されたオブジェクト。