理解と使用方法

length プロパティは、配列、文字列、配列類似オブジェクトのようにインデックスで項目にアクセスできる構造において、全項目の個数を数値で表します。

また、JavaScriptの特殊なオブジェクト（Window、Historyなど）においても、各オブジェクトの特性に応じた個数や長さを返す用途で使用されます。

要素の数が存在しない場合、数値は0を表します。

lengthプロパティを持つオブジェクト

  • 配列: 配列の長さ（要素の個数）
  • 文字列: 文字列の長さ（文字の個数）
  • 配列類似: オブジェクトに含まれる要素の個数
  • TypedArray: TypedArrayの要素の個数
  • Window：windowのframeの数、つまり現在のウィンドウ（window）内に含まれている<iframe>要素の数
  • History: 現在のページを含め、セッション履歴の長さ
  • Storage: Storageオブジェクトに保存されたデータ項目の数

配列の length プロパティ

配列において length プロパティは、配列に含まれる要素の個数を数値で表します。

JavaScript 
const fruits = ["apple", "orange", "banana"];
console.log(fruits.length); // 3

const emptyArr = [];
console.log(emptyArr.length); // 0

文字列の length プロパティ

文字列において length プロパティは、文字列に含まれる文字の個数を数値で表します。

JavaScript 
const greeting = "ようこそ。お会いできて嬉しいです！";
console.log(greeting.length); // 18

const emptyStr = "";
console.log(emptyStr.length); // 0

配列類似の length プロパティ

JavaScriptには、配列と、配列に似た性質を持つ配列類似オブジェクト（Array-like Objects）があります。これらは実際の配列ではありませんが、類似した構造をしています。例えば、関数の arguments オブジェクトやDOMコレクションである NodeList などが該当します。配列類似オブジェクトは length プロパティを持っています。

例：関数の arguments オブジェクト

関数の arguments オブジェクトは、引数の個数を数値で表します。

JavaScript 
function myFunction(a, b, c) {
  console.log(arguments.length);
}

myFunction(); // 0
myFunction(1); // 1
myFunction(1, 2); // 2
myFunction(1, 2, 3); // 3
例：NodeList オブジェクト

NodeList オブジェクトでは、リストのノード数を数値で表します。

JavaScript 
const elements = document.querySelectorAll("p");
console.log(elements.length); // 要素の個数

注意点

length プロパティは、文字列、History、Storage においては読み取り専用（immutable）であり、直接変更することはできません。一方、配列の length プロパティは直接変更が可能です。配列の length を短くすると実際の要素が削除され、長くすると空の領域が生成されるという特徴があります。

読み取り専用（immutable） length 例：文字列

文字列は、length の値を直接代入して長さを調整しようとしても、元のデータや長さは変わりません。

JavaScript 
let str = "Hello, World!";
console.log(str.length); // 13

// length プロパティを変更しようと試みる
str.length = 5;

console.log(str.length); // 依然として 13
console.log(str);        // "Hello, World!" そのまま維持される

変更可能な length 例：配列

配列は、length を変更するとメモリ上のデータが物理的に調整されます。

JavaScript 
let arr = ["Apple", "Banana", "Orange", "Grape"];
console.log(arr.length); // 4

// 1. lengthを現在より小さく変更 (配列の短縮)
arr.length = 2; 
console.log(arr.length); // 2
console.log(arr);        // ["Apple", "Banana"] -> 残りの要素は永久に削除される

// 2. lengthを現在より大きく変更 (配列の拡張)
arr.length = 5;
console.log(arr.length); // 5
console.log(arr);        // ["Apple", "Banana", empty × 3] -> 空きスロット(hole)ができる

// 3. 再び元のデータに復元しようとしても、削除されたデータは戻らない
console.log(arr[2]);     // undefined

参考資料

関連項目