More than 3 years have passed since last update.

JavaScriptで「オブジェクトのプロパティが`undefined`である」ことと「オブジェクトにまだ割り当てられていないプロパティを取得すると`undefined`が返る」ことは違う

Posted at 2019-12-07

JavaScriptで「オブジェクトのプロパティがundefinedである」ことと「オブジェクトにまだ割り当てられていないプロパティを取得するとundefinedが返る」ことは違う

const obj1 = {
    prop1: 'hello',
    prop2: undefined,
};

const obj2 = {
    prop1: 'hello',
};

obj1とobj2で検証

違う

console.log(obj1);
console.log(obj2);

{ prop1: 'hello', prop2: undefined }
{ prop1: 'hello' }

違う

for(const key in obj1) {
    console.log(`${key}: ${obj1[key]}`);
}

for(const key in obj2) {
    console.log(`${key}: ${obj2[key]}`);
}

prop1: hello
prop2: undefined
prop1: hello

違う

console.log(Object.keys(obj1));
console.log(Object.keys(obj2));

[ 'prop1', 'prop2' ]
[ 'prop1' ]

違う

console.log(obj1.prop2);
console.log(obj2.prop2);

undefined
undefined

紛らわしさの発端
違わない

console.log(JSON.stringify(obj1));
console.log(JSON.stringify(obj2));

{"prop1":"hello"}
{"prop1":"hello"}

違わない
有効なJSONデータの値にundefinedが無いので当然

オブジェクトに割り当てられていないプロパティは undefined です (null ではありません)。

myCar.color; // undefined

でもオブジェクトのプロパティに対して明示的にundefinedを割り当てることはできる。

JavaScriptではもともと無いプロパティを当然のように追加することができる。

obj1.prop3 = 'value';

delete演算子を使う。

const obj1 = {
  prop1: 'hello',
  prop2: undefined,
}
console.log(obj1); // 消す前
delete obj1.prop1;
console.log(obj1); // 消した後

{prop1: "hello", prop2: undefined}
{prop2: undefined}

指定したプロパティに直接アクセスしてundefinedかどうかを確かめる方法は、プロパティの存在確認には使えないことがわかった。

プロパティとして明示的にundefinedが割り当てられていることと、プロパティが割り当てられていないことが異なることがわかったので、その区別の仕方。

'propName' in obj1句を使う。

const obj3 = {
  prop1: undefined,
};
console.log('prop1' in obj3);
console.log('prop2' in obj3);

true
false

1か2、どちらかにしておくべきだったのでは。(TypeScriptやJavaやC#などなどでは1がコンパイルエラー)

2は、未割当のプロパティをとりあえず宣言したい場合に

obj1.prop3 = undefined;

みたいに書くためかもしれない？けど、それならdelete演算子と対になるような「プロパティ追加演算子」を用意すればよかったのでは。。