3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

mapにparseIntを渡すと同じ文字列が別の数になる:第2引数の衝突をNode.jsで実測

3
Posted at

['10', '10', '10'].map(parseInt) をNode.jsで実行すると、同じ文字列なのに結果は [10, NaN, 2] になりました。parseInt 単体の変換ルールだけでなく、mapが関数に渡す第2引数を見ると理由を追えます。

2026年10月29日、macOS 27.0.1・Node.js v24.22.1で確認しました。ブラウザや別バージョンでは試していません。以前の数値変換記事とは、関数をコールバックへ直接渡したときの引数の衝突に絞る点が異なります。

同じ入力で再現

const inputs = ['10', '10', '10'];
console.log(inputs.map(parseInt));
// [ 10, NaN, 2 ]

3つとも同じ文字列なのに、2つ目から結果が変わります。

JSON.stringifyではNaNがnullになるため、配列を直接console.logしています。

mapが渡す引数を書き出す

mapのコールバックには、要素の値・インデックス・元の配列の3つが渡されます。受け取ったものを確認すると、今回の値と番号は次の組でした。

console.log(inputs.map((value, index) => `${value}/${index}`));
// [ '10/0', '10/1', '10/2' ]

一方、parseIntの第2引数は基数です。10なら10進数、2なら2進数として文字列を読みます。関数を直接渡すと、番号がそのまま基数の位置へ入ります。

console.log(parseInt('10', 0)); // 10
console.log(parseInt('10', 1)); // NaN
console.log(parseInt('10', 2)); // 2

0は、ここでは10進数として解釈される指定です。基数1は有効な範囲の2〜36に入らずNaNになります。2進数の10は、10進数では2です。mapが渡す第3引数の配列は、parseIntでは使われません。

10進数として読みたいなら引数を固定する

console.log(inputs.map(value => parseInt(value, 10)));
// [ 10, 10, 10 ]

関数を1枚挟み、parseIntの第2引数を10に固定します。番号は使いません。

inputs.map(parseInt, 10) では直りません。map自身の第2引数はコールバックのthisとして使う値で、parseIntの基数に固定して渡される値ではありません。

Numberを渡す場合も、入力の意味で選ぶ

console.log(inputs.map(Number));
// [ 10, 10, 10 ]

Numberは、parseIntのように第2引数を基数として使いません。ただし、全入力で同じ意味にはなりません。次も実測しました。

const values = ['10px', '', '  ', '0x10'];
console.log(values.map(value => parseInt(value, 10)));
// [ 10, NaN, NaN, 0 ]
console.log(values.map(Number));
// [ NaN, 0, 0, 16 ]

10pxから先頭の数値を読みたいのか、文字列全体を数値として扱いたいのかで選択が変わります。入力欄の空文字を未入力扱いにするなら、Numberの前に空かどうかを判定する処理も必要です。Numberを挟むだけでは入力の妥当性確認まで終わりません。

AIが書いた短いコードで見る場所

Claude CodeなどのAIが生成したコードに map(関数名) があったら、その関数の第2引数と、mapが渡す番号が衝突しないかを確認できます。受け取る引数の意味を照合するのが確認点です。

入力が1件だけでは問題を見落とします。同じ文字列3件で、番号の影響を切り分けました。

参考


未経験者向けの体験版を公開しています

※ 中上級者には易しすぎる内容なので、初心者の知り合いへの紹介や社内研修の参考としてどうぞ。

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?