その項目は自分のもの？Object.hasOwnとinで継承したプロパティを分けよう

JavaScriptで「このオブジェクトに項目がある？」と調べたら、自分では入れていない項目も見つかった。項目の存在には、自分で持つものと、別のオブジェクトから引き継ぐものがあるよ。

このページでは、プロパティという「名前と値を持つ項目」を調べる方法を知る。ブラウザだけで試せるよ。作例は小さな架空データで、ブラウザや他のページの設定を変更しないんだ。

共通の項目を引き継ぐ例を作る

const common = { shared: '共通の値' };
const item = Object.create(common);
item.name = 'A';
item.empty = undefined;

Object.create(common)は、commonをプロトタイプとして使う新しいオブジェクトを作る書き方。この例では、item自身にnameとemptyを用意し、sharedはcommonから参照できるようにしている。

プロトタイプは、ある項目が自分にないときに探しに行く先と考えると読みやすいよ。ここでは共通の項目を参照するだけで、commonへnameやemptyを追加しているわけではない。

hasOwnは自分で持つ項目だけ

console.log(Object.hasOwn(item, 'name'));   // true
console.log(Object.hasOwn(item, 'shared')); // false
console.log(Object.hasOwn(item, 'empty'));  // true
console.log(Object.hasOwn(item, 'missing'));// false

Object.hasOwnは、そのオブジェクト自身が指定した名前の項目を持つかを返す。sharedの値は参照できるけれど、自分の項目ではないのでfalseになる。

emptyは、値がundefinedでも項目自体は存在するためtrueだよ。undefinedは、ここでは値が未定義であることを示すJavaScriptの値。項目そのものがないことと、常に同じ意味ではないんだ。

inは引き継いだ項目も探す

console.log('name' in item);    // true
console.log('shared' in item);  // true
console.log('empty' in item);   // true
console.log('missing' in item); // false

in演算子は、自分の項目だけでなく、プロトタイプのつながりも探す。sharedについては、hasOwnがfalseでもinがtrueになる。

値がundefinedかだけでは区別できない

console.log(item.empty !== undefined);   // false
console.log(item.missing !== undefined); // false

この二つの値の比較は同じfalseになる。でも、emptyは自分の項目があり、missingは存在しない。必要なのが項目の有無なら、値だけを見る式へ置き換えないでね。

逆に、値が空欄や0でもよいかを確かめたいなら、存在の確認だけでは足りない。項目があることと、その中身が仕様に合うことも分けよう。

ページ内で四つを切り替える

作例の選択欄でname・shared・empty・missingを選ぶと、値、hasOwn、inの結果が並ぶ。sharedはfalse/true、emptyはtrue/trueになることを確かめてみよう。「最初から試す」でnameへ戻せるよ。

どちらがいつも正しいという選び方ではなく、「受け取ったデータ自身に入っている項目が必要」なのか、「引き継いだものも含めて参照できる項目を探したい」なのかを決めて使うんだ。

2026年10月29日にMDNと照合し、四つの判定と値の比較、リセットをNodeとChromiumで検証した。0と未入力を分ける、JSONの必要項目を確認するも参考になるよ。