配列のインデックスとlengthの関係

📝 問題の再掲

復習Q2: for (let i = 0; i <= items.length; i++) の問題点は？

→ i <= length だと最後に undefined が出力される。i < length が正しい。

⚠️ よくある間違い

• i <= length で存在しないインデックスにアクセスしてしまう
• インデックスが 1 から始まると思ってしまう
• length が「最後のインデックス」だと勘違いする

📖 段階的な説明

ステップ1：インデックスは 0 から始まる

配列の最初の要素は「0番目」です。1番目ではありません。

const fruits = ["りんご", "バナナ", "みかん"];
//               [0]       [1]       [2]

console.log(fruits[0]); // "りんご"
console.log(fruits[1]); // "バナナ"
console.log(fruits[2]); // "みかん"

ステップ2：length は要素数（最後のインデックス + 1）

const fruits = ["りんご", "バナナ", "みかん"];
console.log(fruits.length); // 3（要素は3個）

// 最後のインデックスは 2（= length - 1）
console.log(fruits[2]);     // "みかん"（最後の要素）
console.log(fruits[3]);     // undefined（存在しない！）

ステップ3：for ループの条件は i < length

const items = ["A", "B", "C"];  // length = 3

// ✅ 正しい: i < length（0, 1, 2 で止まる）
for (let i = 0; i < items.length; i++) {
  console.log(items[i]);
}
// "A", "B", "C"

// ❌ 間違い: i <= length（0, 1, 2, 3 まで行ってしまう）
for (let i = 0; i <= items.length; i++) {
  console.log(items[i]);
}
// "A", "B", "C", undefined ← 余計なものが出る！

ステップ4：図解

配列: ["A", "B", "C"]

インデックス:  0    1    2    3(存在しない)
              ↑              ↑
            最初          length = 3

i < 3 → 0, 1, 2 で止まる ✅
i <= 3 → 0, 1, 2, 3 まで行く ❌

💡 覚え方のコツ

length は「何個あるか」、最後のインデックスは length - 1

3個入りの箱（length = 3）の中身は 0番、1番、2番。3番は空っぽです。

✅ 確認問題

Q: const colors = ["赤", "青", "緑", "黄"]; で colors[4] の値は？