オブジェクトの数の数えるにはkeysメソッドを使うって知ってた？

そんなの常識でしょ。と言われちゃうかもしれません。でも、私はハマりました。

オブジェクトって配列に入っているのと、オブジェクトを含んだオブジェクトと２パターンがありますよね。

colors=[
    {
      color: '#72aee6',
      name: 'Blue 20'
    },
    {
      color: '#3582c4',
      name: 'Blue 40'
    },
    {
      color: '#e65054',
      name: 'Red 40'
    },
    {
      color: '#8a2424',
      name: 'Red 70'
    },
    {
      color: '#f2d675',
      name: 'Yellow 10'
    },
    {
      color: '#bd8600',
      name: 'Yellow 40'
    }
]

これはcolorsという名前の配列の中に、オブジェクトが入っています。いくつオブジェクトを含んでいますか？

そうこれはcolors.lengthで６が返ってきます。

これとオブジェクト内のオブジェクトの数を返す方法を同じと考えてはいけません。

border = { 
    topLeft: "0px", 
    topRight: "0px", 
    bottomRight: "0px", 
    bottomLeft: "0px", 
    value: "0px" 
}

このborderオブジェクトにはいくつのオブジェクトが含まれていますか。

ついborder.lengthとやってしまいそうですが、これってundefinedが返ります。

正しくは

Object.keys(radius_heading).length

としないといけないのです。

念のため説明を加えると、Object.keys(radius_heading) というのは、オブジェクトが持っている全てのプロパティ名を配列にするコマンドです。これでプロパティ名が配列になったので、その.length プロパティを使って長さを取得します。それがオブジェクトの数というわけです。

オブジェクト自体はlengthプロパティは持っていません。案外知らなかったということはありませんか？