JavascriptのArray[Map]の通常のfor文での要素のアクセスがエラー

Question

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map
などで下記のコードを実行すると、console.log(a.get("i1"))は実行できますがconsole.log(map1[i].get("1"))はエラーとなります。
これがエラーになる理由と解決策を知りたいです。
条件に一致したi番目の値の変更を行いたいため、拡張ではないforで要素の値を確認したいです。

const map1 = [new Map([["i1", "a1"], ["i2", "a2"]]), new Map([["i1", "b1"], ["i2", "b2"]])]

//OK
for (let a of map1) {
    console.log(a.get("i1"))
}

//NG
for (let i = 0; i <= map1.length; i++) {
    console.log(map1[i].get("i1"))
}

console.log(map1[i].get("i1"))で
Error: Cannot read property 'get' of undefinedが発生します。

Answer 1

原因についての回答は出ていますので、エラー箇所の特定方法を回答します。

const map1 = [new Map([["i1", "a1"], ["i2", "a2"]]), new Map([["i1", "b1"], ["i2", "b2"]])]

//NG
for (let i = 0; i <= map1.length; i++) {
  console.log(i, map1[i]); // <-- 添字、配列要素を確認する。
  // i==map1.length のとき、 map1[i] は配列の添字番号の範囲を外れて undefined

  console.log(map1[i].get("i1"));
}

問題なく動くことが確認できるコードを書くべきですので、
リリース前の段階では 惜しみなく console に表示させる のが開発のポイントになります。

はじめからワンライナーで短く書こうとすると、勘違いによってバグを混入させてしまうこともあります。

teratailの他の質問の例では、「イベントリスナの引数 event を省略」するなど
プログラム上で扱える情報を精査していない事例を多く見かけます。

Comments

[hplpjpd]

皆さん回答頂きありがとうございました。
範囲外へのアクセスによるエラーと気づかず、エラーが起きた行ばかり見ていました。
エラー箇所の特定方法までご教授頂き、ありがとうございます。

Answer 2

for (let i = 0; i <= map1.length; i++) {
ここの式ですが i < map1.length ではないでしょうか。
添字は0から始まります。それに対して map1.lengthは長さを返してくれます。

Answer 3

// for (let i = 0; i <= map1.length; i++)
//                    ↓
   for (let i = 0; i <  map1.length; i++)