今回はmap関数を利用した際にしばしば起きる問題についての対応を。

Imgur

上記のように、

['1', '2', '3'].map(parseFloat)

[1, 2, 3]という配列を返しているのに対して、

['1', '2', '3'].map(parseInt)

[1, NaN, Nan]という配列を返してしまいます。

これは、Array.prototype.map()は下記のような引数を取り、

  • callback
    • currentValue
      The current element being processed in the array.
    • index
      The index of the current element being processed in the array.
    • array
      The array map was called upon.
  • thisArg Optional. Value to use as this when executing callback.

また、parseIntが第二引数にradixをとる関数なので、
今回の場合、mapのコールバックで渡されるindexをradixとして、parseIntに渡しているために
paraseIntは数値に変換することができずNaNを返したわけです。

Unary

今回はUnary関数を作成して、['1', '2', '3'].map(parseInt)の返り値を[1, 2, 3]にするようにします。
Unary関数は関数の引数をひとつだけ取るように変更するためのデコレーターです。

const unary = (fn) => 
  fn.length === 1 
    ? fn
    : function (something) {
      return fn.call(this, something);
    }

Imgur

この関数を使うことで期待通りの配列が返ってきました。
直感的にかけるので、この書き方を気に入っています。

参考