JavaScriptで配列の要素数を取得する方法！(length)

JavaScriptで配列の要素数を取得する方法について書いています。
配列の要素数を取得するには、配列からlengthプロパティにアクセスすると良いです。

配列の要素数を取得する

配列からlengthプロパティを呼び出すことで、要素を取得することができます。
例えば、下記のようにアクセスできます。

let fruits = ['apple', 'grape', 'lemon', 'peach', 'orange']

console.log(fruits.length) // 5

最初に5つの要素を持った、fruits変数(配列)を作成しています。
その次の処理で、fruits変数からlengthプロパティにアクセスしています。

これで、要素数が取得できます。
中身を出力すると「5」となりました。

空の要素(undefined)でも要素数にカウントされる

要素数だけ指定して、何も入っていない配列を作った場合でも、要素数としてカウントされます。

let emptyArray = new Array(3)

console.log(emptyArray.length) // 3

emptyArray変数にnew Arrayで、3つの空要素が入った配列を作成しています。
この場合でもlengthプロパティにアクセスすると、要素数は「3」になります。

ループなどで回して、中身を確認すると、要素はundefinedとなっています。

let emptyArray = new Array(3)

for(const value of emptyArray) {
  console.log(value) // undefined
}

lengthプロパティを指定すると？

lengthプロパティを指定すると、同じように何も入っていない(undefined)の状態の配列ができます。

let emptyArray = []
emptyArray.length = 3

console.log(emptyArray.length) // 3

for(const value of emptyArray) {
  console.log(value) // undefined
}

emptyArray変数に「[]」で空配列を作成しました。
この時点では要素数は0になります。

その次の処理で、lengthに「3」を指定しているので、3つの要素が用意されてundefined状態の配列ができます。
ループすると「undefined」が出力されました。

undefinedを回避してカウントしたい

配列の要素数を指定して、配列を作った場合にはundefined状態の配列ができました。
undefinedを避けてカウントしたい場合には、ループなどでundefinedを判定すると良いです。

let emptyArray = new Array(5)

emptyArray[1] = "apple"
emptyArray[3] = "grape"

onsole.log(emptyArray.length) // 5

let count = 0;
for(const value of emptyArray) {
  if (value !== undefined) {
    count++
  }
}
console.log(count) // 2

emptyArray変数に、5つの要素を指定して、undefined状態の配列を作っています。
その後に、1番と3番目にそれぞれ要素を入れました。

このときに要素数をlengthにアクセスして取得すると「5」になります。

次の処理でfor…ofでループして、配列の要素(value)がundefined以外だったらcount変数をカウントアップしています。
こうすることで、要素の入っているところだけカウントすることができます。

count変数の内容を出力すると、「2」になりました。

forEachを使うことで、もう少し簡潔に書くことも可能です。

let count = 0;
emptyArray.forEach(() => {
    count++
})
console.log(count) // 2

配列の要素数を取得する方法まとめ

今回はJavaScriptで配列の要素数を取得する方法について書きました。
記事の内容をまとめると、下記のようになります。