中級

['1','2','3'].map(parseInt)が[1, NaN, NaN]になる理由

Array.prototype.mapはコールバックに(要素, インデックス, 配列)の3引数を渡します。parseIntの第2引数は基数（何進数か）を表すため、インデックスがそのまま基数として渡されてしまいます。

なぜエラーが出ないのか

出力: [ 1, NaN, NaN ]

（エラーなし）

JavaScriptは何も報告しません。文法として正しいためです

出力: [ 1, NaN, NaN ]

実際の挙動 — 期待した結果と食い違っている箇所

見つけ方

エラーが出ないので、出力を目で確かめるか、コードを目で追うしかありません。この種の誤りが最も発見が遅れます

このエラーが出る典型パターン

 1  const digits = ["1", "2", "3"];
 2  console.log(digits.map(parseInt              ));
                                      ^

 1  const values = ["10", "20", "30"];
 2  console.log(values.map(parseInt              ));
                                      ^

 1  const values = ["4", "8", "12"];
 2  console.log(values.map(Number.parseInt));
                                  ^

 1  const raw = ["5", "6", "7", "8"];
 2  console.log(raw.map(parseInt              ));
                                   ^

 1  const codes = ["9", "10", "11"];
 2  console.log(codes.map(Number.parseInt));
                                 ^

よくある誤解

parseIntを直接mapに渡せば数値に変換できると思いがちですが、mapが渡す3引数のうち2番目（インデックス）をparseIntは基数として解釈します。1番目の要素以降、意図しない基数で変換されます。

実務での勘所

同じ種類の事故は、parseInt以外の「複数の引数を受け取り、2番目以降の意味が呼び出し側の想定と違う」関数をmapに直接渡すたびに起こり得ます。安全な習慣は、関数を直接渡さずに.map(x => parseInt(x))のようにアロー関数で包み、mapが渡す引数のうち本当に使いたいものだけを明示的に選んで中の関数に渡すことです。この1手間を惜しまなければ、渡した関数が実は複数引数を受け取る仕様だったという事故を防げます。

演習をはじめる

関連するエラー

• NaNを===やswitchで判定できない理由と直し方NaNはIEEE 754の仕様上、自分自身とも等しくないため、===はもちろん==でも決してtrueになりません。
• forループのvarをletに変えないとコールバックが同じ値を指すvarはブロックスコープを持たないため、ループ内で生成した関数はすべて同じ変数を共有します。