JavaScriptでさまざまな要素数を取得する方法を解説

この記事では、JavaScriptでさまざまな型のオブジェクトから要素数を取得する方法について解説しています。今回はほとんど基本的な内容しか解説していないので、しっかりと理解できるように心がけて下さい。そこまで難しくないはずなので、乗り切りましょう。

JavaScriptにおける要素数とは

JavaScriptプログラミングにおいては、「要素数」という言葉を利用する場面が多々あります。この「要素数」という言葉には以下のような意味が隠れています。
・配列における要素の総数
・文字列における文字数
・オブジェクト(連想配列)における要素の数

それぞれの意味合いによって、利用するメソッドが異なります。「要素数」という言葉が、どんな型に対してのものを表してるのかをしっかり把握することが大事です。

JavaScriptでの要素数を取得する方法

JavaScriptで、「要素数」を取得する際に基本的に利用するのは、lengthプロパティです。ここからは、このlengthプロパティについて解説していきます。

配列オブジェクトのlengthの書き方

lengthプロパティは、配列オブジェクトに対して適用できます。配列.lengthと記述して利用します。配列に対してlengthプロパティを作用させた場合は、配列の要素数を返します。

文字列オブジェクトのlengthの書き方

lengthプロパティは、文字列オブジェクトに対しても適用できます。文字列.lengthと記述して利用します。文字列に対してlengthプロパティを作用させた場合は、文字列の文字数を返します。

JavaScriptのlengthプロパティを使って要素数を取得する方法

lengthプロパティを使って、JavaScriptプログラムで要素数を取得する方法を見ていきます。

配列オブジェクトの要素数を取得する

まずは、配列の要素数を取得するサンプルコードを示します。

var array = ['a', 'b', 'c', 'd'];
console.log(array.length); //4

特に難しい点はありません。配列にlengthプロパティを作用させると要素数を取得できます。これを利用することで、配列内の要素数が適切な分だけ存在するかなどを検証することができます。

なお、lengthプロパティには値を代入することもできてしまうのですが、その際は注意が必要です。

配列のlengthプロパティに値を代入すると、その配列の要素数を変化させてしまいます。元の配列よりも小さな値を代入すると、その値の数分だけ要素を先頭から抜き出した配列に変化します。

また、元の配列よりも大きな値を代入すると、配列の末尾に空要素が余った分代入されます。下記のコードでは最後の要素がempty itemになっていることがわかります。

var array = ['a', 'b', 'c', 'd'];
array.length = 3;
console.log(array); //[ 'a', 'b', 'c' ]
array.length = 4;
console.log(array); //[ 'a', 'b', 'c', <1 empty item> ]

文字列オブジェクトの要素数を取得する

次に、文字列の要素数を取得するサンプルコードを示します。

var string = 'abcd';
console.log(string.length); //4

こちらも特に難しい点はありません。文字列にlengthプロパティを作用させると文字数を取得できます。これを利用することで、文字列の長さが適切な長さになっているかを検証することができます。

なお、配列オブジェクトのlengthと異なり、文字列のlengthには値を代入しても元の文字列は変化しません。

var string = 'abcd';
string.length = 3;
console.log(string.length); //4

関数オブジェクトの要素数を取得する

実は、JavaScriptでは関数オブジェクトでもlengthプロパティが利用できます。関数オブジェクトにlengthプロパティを作用させた場合は、引数の数を取得することができます。

以下にサンプルコードを示します。

function example(a, b, c, d) {
return;
}
console.log(example.length); //4

引数が4つの関数に対してlengthプロパティを作用させると、4が返ってきていることがわかります。

これを利用すると、例えば、ある関数に対して引数に渡す変数を用意した場合に、引数の数が十分用意されているかなどを関数に渡す前に検証することができます。

もし引数の数が十分でなかったり余分にあったりした場合は、エラーを返して処理を終了するなどすることで、実際に関数を動作させる前に正しく処理を終了させることもできるでしょう。

オブジェクト(連想配列)から要素数を取得する方法

次に、JavaScriptのオブジェクト(連想配列)から要素数を取得する方法について解説します。オブジェクトの場合は、上記のlengthプロパティは利用できません。

var sample = {
a: 'aaa',
b: 'bbb',
c: 'ccc'
};
console.log(sample.length); //undefined

オブジェクト(連想配列)の場合は、Object.keysメソッドを利用します。Object.keysメソッドは、本来はオブジェクトの各キーを要素とした配列を作成するためのメソッドです。つまり、そのキー配列を元にして、元のオブジェクトの要素数を取得することができます。

なお、オブジェクトに対して直接要素数を取得できるメソッドやプロパティは存在しません。

Object.keysメソッドの基本的な書き方

Object.keysメソッドは、「Object.keys(オブジェクト)」と指定します。このメソッドの戻り値は、オブジェクト(連想配列)のキーを要素にした配列です。以下のサンプルコードをご覧ください。

var sample = {
a: 'aaa',
b: 'bbb',
c: 'ccc'
};

console.log(Object.keys(sample)); //[a, b, c]

Object.keysメソッドによって、オブジェクトのキーだけが要素となった配列が生成されているのがわかります。

JavaScriptでは、オブジェクトに直接作用できるメソッドやプロパティが多くないため、このObject.keysを使って取得した配列を元にさまざまな処理や計算をさせることが多いです。

Object.keysメソッドを使って要素数を取得する方法

では、先程紹介したObject.keysを使って、オブジェクトの要素数を取得する方法について解説します。要素数を取得するには、Object.keysで生み出した配列に対してlengthプロパティを作用させてあげればいいです。

Object.keysの戻り値は配列になるため、配列で利用できるメソッドやプロパティは全て利用することができます。なので、オブジェクトの要素数を取得するには上記の方法が一般的です。

var sample = {
a: 'aaa',
b: 'bbb',
c: 'ccc'
};
console.log(Object.keys(sample).length); //3

Object.keysメソッドを使ったループ

Object.keysメソッドを利用すると、オブジェクトに対してループ処理を施すことができます。これにより、オブジェクトの各要素に対しての処理がループ内で処理できるようになり、プログラムが簡単になります。

以下にサンプルコードを2つ示します。

//サンプル1
var sample = {
a: 100,
b: 30,
c: 60
};
var keys = Object.keys(sample);
for(var i = 0; i < keys.length; i++){
sample[keys[i]] *= 2;
}
console.log(sample); //{ a: 200, b: 60, c: 120 }

//サンプル2
var sample = {
a: 100,
b: 30,
c: 60
};
Object.keys(sample).map(key => {
sample[key] *= 2;
});
console.log(sample); //{ a: 200, b: 60, c: 120 }

上記はどちらも、オブジェクトの各要素を2倍にするJavaScriptプログラムです。サンプル1ではfor文を利用してループ処理を行い、サンプル2では配列オブジェクトのmapメソッドを利用してループ処理を行っています。

なお、サンプル2ではメソッドチェーン記法を用いており、Object.keysの戻り値に対して直接mapメソッドを作用させています。

JavaScriptではデータをオブジェクトの形で扱うことも多いので、こういった処理方法は知っておくと役立つはずです。

JavaScriptで要素数を取得する方法のまとめ

今回は、主に以下の3つの観点で要素数を取得する方法を紹介しました。
・配列の要素数
・文字列の文字数
・オブジェクトの要素数

配列と文字列の要素数の取得方法はほとんど同じなので、そこまで難しくはないはずです。しかしオブジェクトに関してはすこし方法が異なるので、そこは注意が必要です。

またlengthプロパティには値の代入ができてしまうなど、気をつけないとバグを起こしてしまうような動作も存在するので、そういった点にも注意して下さい。

オブジェクトの章で紹介したObject.keysメソッドは、オブジェクトの処理では欠かせないメソッドです。

なぜかというと、オブジェクトのままでは配列に利用できる便利なメソッドが利用できないのですが、Object.keysメソッドでキー配列を生成すると、その便利なメソッドが全て利用できるようになるからです。

JavaScriptプログラミングにおいて、なにかの要素数を取得してその値で次の動作を決めるという処理を書くことは頻繁にあります。

どの型に対してどの方法で要素数を取得するかをきちんと整理し、正しいものを利用できるようにしておくことが大事です。