JavaScript チート・オブジェクトの要素数とオブジェクトの配列の要素数を求める

• あるWebサービスの開発メモ・目次ページに戻る
• あるWebサービスの開発メモ・JavaScript チートに戻る

オブジェクトの要素数は .length から取得できない

obj1 = {name: "mop", age:"15"};
console.log(obj1.length);

よく書いてしまうコードなのですが undefined がログに出力されます

(連想配列の)オブジェクトには .length というプロパティは無いんですね

オブジェクトの要素数は Object.keys(obj).length から取得する

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

2 がログに出力されます。

Object.keys() メソッドは、引数に指定されたオブジェクトのキーの配列 (この例では ['name', 'age']) を返してくれます。この配列の .length プロパティが、オブジェクトの要素数を示しています

.length プロパティは更新可能ですが、メタプログラミング以外で更新することはまずないと思います。.length は、より小さい値で更新すれば後方の配列要素が失われますし、大きい値で更新すれば、後方に空の要素が加わります。

オブジェクトの配列の要素数は .length から取得できる

obj1 = {name: "mop", age:"15"};
obj2 = {name: "mike", age: "58"};
obj3 = {name: "hana", age: "51"};
objs = [obj1, obj2, obj3]
console.log(objs.length)

objs は配列なので .length を参照すれば、その要素数 3 がログ出力されます

Object.keys(objs).length からも取得できるのでは？

console.log(Object.keys(objs).length)

3 がログ出力されます

Object.keys(objs) からは ['0', '1', '2'] の配列が返ってくるので、この配列の .length プロパティは 3 を示しています

このアプローチも一見正しいように見えていますが、配列 (ここでは objs) の .length プロパティを参照するのが正しいアプローチだと思っています。