JavaScript：連想配列の要素数（length）を取得したい

こんにちは、さち です。

先日、JavaScript で
「連想配列」の要素数（長さ）を取得したいことがありました。

簡単そうに見えるんですが、これが意外とできなくて
「配列」のように「length」プロパティを使おうとしてもダメなんですよね。

でも、わざわざ「for」などを使って手動で数えるのは面倒……。

何か簡単な方法、ないんですか！？

連想配列は「length」プロパティが使えない

「配列」と「連想配列」、どちらも名称に「配列」が付いていますが
要素数を調べる「length」プロパティは、「配列」でしか使えません。

var member = [
  'dia',
  'kanan',
  'hanamaru'
];

var color = {
  dia: 'red',
  kanan: 'emerald green',
  hanamaru: 'yellow'
};

console.log(member.length);// 3
console.log(color.length);// undefined

「連想配列」の方は「undefined（未定義）」になってしまいました。
連想配列は、単なる「オブジェクト」なので
「length」プロパティ自体が存在していないからです。

解決方法

Object.values() を使うと、「連想配列」でも「length」プロパティを使えます。
「for」などで要素を手動で数える必要はありません。

var color = {
  dia: 'red',
  kanan: 'emerald green',
  hanamaru: 'yellow'
};

var len = Object.values(color).length;
console.log(len);// 3

「length」プロパティを使う前の状態を確認してみると
連想配列の「値」が、配列として取得されているのが分かります。
配列になっているから、「length」プロパティが使えるわけですね。
これは、for...of を使って配列に取り出したものとまったく同じです。

var color = {
  dia: 'red',
  kanan: 'emerald green',
  hanamaru: 'yellow'
};

var val = Object.values(color);
console.log(val);// Array(3) [ "emerald green", "red", "yellow" ]

//for...of を使って配列に取り出したものと同じ
var arr = [];
for(var v of color) {
  arr.push( v );
}
console.log(arr);// Array(3) [ "emerald green", "red", "yellow" ]

「値」が取り出せるのなら、「キー」も取り出せるのでは？
そうなんです、できます。

var color = {
  dia: 'red',
  kanan: 'emerald green',
  hanamaru: 'yellow'
};

var key = Object.keys(color);
console.log(key);// Array(3) [ "kanan", "dia", "hanamaru" ]
console.log(key.length);// 3

要素数のカウントで「値」「キー」どちらを使う方が良いのかは
状況によって異なると思うので
Object.values() と Object.keys()、適切な方を使って下さい。