インデックス利用とは何か
配列やオブジェクトをループ処理するとき、インデックス（位置番号）を使って要素へアクセスすることがあります。例えば arr[0] は先頭要素、arr[i] は i 番目の要素です。ここが重要です：インデックスは便利ですが、境界や型の扱いを間違えると「undefined が返る」「処理漏れが起きる」など初心者がつまずきやすいポイントになります。
基本的な注意点（境界の扱い）
0 から始まることを忘れない
const arr = ["A", "B", "C"];
console.log(arr[0]); // "A"（先頭）
console.log(arr[2]); // "C"（3番目）
ここが重要です：インデックスは 0 から始まるため、最後の要素は arr.length - 1 です。arr[arr.length] は存在せず undefined になります。
境界条件を正しく書く
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
ここが重要です：i < arr.length が鉄則。<= と書くと 1 回余分に回り、最後に undefined を読むバグになります。
インデックスと値のズレに注意
削除や挿入でインデックスが変わる
const arr = [1, 2, 3, 4];
arr.splice(1, 1); // 2 を削除
console.log(arr); // [1, 3, 4]
ここが重要です：削除すると後ろの要素が前に詰まり、インデックスが変わります。ループ中に splice すると「取りこぼし」が起きやすいので、削除は後ろから処理するか filter を使う方が安全です。
for…of はインデックスを持たない
for (const v of arr) {
console.log(v); // 値だけ
}
ここが重要です：インデックスが必要なら arr.entries() を使います。
for (const [i, v] of arr.entries()) {
console.log(i, v);
}
オブジェクトとインデックス（キーの扱い）
for…in は「キー」を列挙する
const obj = { a: 1, b: 2 };
for (const key in obj) {
console.log(key, obj[key]);
}
ここが重要です：オブジェクトは「インデックス」ではなく「キー」でアクセスします。配列に for…in を使うと、順序保証が弱く、プロトタイプ拡張の影響を受けることがあるため避けましょう。
Object.keys / Object.entries を使う
const obj = { id: 1, name: "Alice" };
Object.entries(obj).forEach(([key, value], i) => {
console.log(i, key, value);
});
ここが重要です：オブジェクトを「配列化」してからインデックスを使うと、順序や位置を明確に扱えます。
インデックス利用の深掘りポイント
疎配列（穴）の扱い
const sparse = [];
sparse[3] = "X"; // [ <3 empty items>, "X" ]
console.log(sparse.length); // 4
ここが重要です：空スロットは length に含まれますが、値は undefined。forEach/map は穴をスキップしますが、for ループは undefined として回ります。意図に合わせてループ方法を選びましょう。
インデックスと ID の混同に注意
配列のインデックスは「位置」であり、データの ID ではありません。削除や並べ替えでインデックスは変わります。安定した識別子が必要なら、要素に id プロパティを持たせましょう。
パフォーマンスの工夫
長い配列で毎回 arr.length を読むより、事前に変数へキャッシュすると微妙に効率が良くなります。
for (let i = 0, n = arr.length; i < n; i++) {
// arr[i] を処理
}
実践例（安全なインデックス利用）
部分範囲を処理する
const arr = ["A","B","C","D","E"];
for (let i = 1; i < 4; i++) {
console.log(arr[i]); // B, C, D
}
ここが重要です：範囲は「開始インデックスから終了インデックス未満」。開区間ルールを守ると off-by-one エラーを防げます。
削除を伴う処理は逆順で
const arr = [1,2,3,4,5];
for (let i = arr.length - 1; i >= 0; i--) {
if (arr[i] % 2 === 0) arr.splice(i, 1); // 偶数を削除
}
console.log(arr); // [1,3,5]
ここが重要です：前から削除するとインデックスが詰まり、次の要素を飛ばすバグになります。逆順なら安全です。
まとめ
インデックス利用は「0から始まる」「境界は < length」「削除や挿入で変わる」「IDとは別物」という基本を押さえることが最重要です。疎配列の穴や for…in の挙動も理解しておくと、意図しない undefined や順序崩れを防げます。初心者はまず「値だけなら for…of」「変換なら map/filter」「インデックスが必要なら entries」を選び、インデックスを使うときは境界と副作用に注意すれば、壊れにくく読みやすいループ処理が書けます。