lengthプロパティによる配列操作 | 配列メソッドの基本 | JavaScript 超完全入門基本から発展までのすべて

INDEX

lengthプロパティとは？

JavaScriptのlengthプロパティは、配列の要素数（長さ）を取得したり変更したりするためのプロパティです。

配列の繰り返し処理や、要素の追加・削除など、さまざまな場面で利用される基本的なプロパティです。

const fruits = ["apple", "banana", "cherry"];

console.log(fruits.length);

実行結果

この例では、配列に3つの要素が含まれているため、lengthは3を返します。

lengthは読み取り専用ではありません。値を書き換えることで、配列の長さを変更できます。

長さを短くすると要素が削除され、長さを大きくすると配列が拡張されます。

const fruits = ["apple", "banana", "cherry", "orange"];

fruits.length = 2;

console.log(fruits);

実行結果

["apple", "banana"]

長さを2に変更したため、後ろの要素は削除されています。

const fruits = ["apple", "banana"];

fruits.length = 5;

console.log(fruits);
console.log(fruits[2]);

実行結果

["apple", "banana", empty × 3]
undefined

配列の長さは5になりますが、新しい要素に値が代入されるわけではありません。

初心者が誤解しやすい点として、lengthを大きくした場合に追加されるのは空要素（empty）です。

undefinedという値が代入されるわけではありません。

const array = [];

array.length = 3;

console.log(array);
console.log(0 in array);
console.log(array[0]);

実行結果

[empty × 3]
false
undefined

配列の要素を読み取るとundefinedになりますが、実際には要素そのものが存在しない「空要素」となっています。

lengthは配列を順番に処理する際によく利用されます。

const fruits = ["apple", "banana", "cherry"];

for (let i = 0; i < fruits.length; i++) {

    console.log(fruits[i]);

}

実行結果

apple
banana
cherry

配列の要素数が変わっても、自動的に最後まで繰り返されます。

現在では、配列のすべての要素を順番に処理するだけなら、for...ofを使うことも多くなっています。

const fruits = ["apple", "banana", "cherry"];

for (const fruit of fruits) {

    console.log(fruit);

}

インデックス番号が不要な場合は、こちらのほうがシンプルに記述できます。

lengthを0にすると、すべての要素を削除できます。

const fruits = ["apple", "banana", "cherry"];

fruits.length = 0;

console.log(fruits);

実行結果

[]

配列を再利用したい場合によく利用される方法です。