受け渡す配列を意識して、reduceメソッドを使う

受け渡す配列を意識して、reduceメソッドを使う

文字列配列をreduceメソッドに渡して、最小値を計算した際、正常に計算ができたのだが、どこで文字列を数値に変換しているのかがわからなくて、調べた。

test配列の最小値をtest1にセットする

数値配列の場合

test = [1, 4, 3, 2]
const test1 = test.reduce((a, b) => {
  return Math.min(a, b)
})

test1の結果は、4

文字列配列の場合

test = ["1", "4", "3", "2"]
const test1 = test.reduce((a, b) => {
  return a + b
})

test1の結果は、4

どちらも同じ結果になった。

reduceメソッドは、配列の各要素をそのまま反復するため、配列の型のまま内部関数で処理されるようだ。

Math.min関数が、数値または文字列としての数字を引数に渡せば最小値を返してくれるとのこと。

公式サイトに以下の記載があった。

1 つでも数値に変換できない引数が渡された場合、結果は NaN になります。

注意しておかないといけない点として、文字列配列を渡しても、Math.minメソッドが数値を返すので、test1には、数値が格納されているということ。

 

Math.minを使わない場合はどうなるかも確認してみた。

test配列の合計値をtest1にセットする

数値配列の場合

test = [1, 4, 3, 2]
const test1 = test.reduce((a, b) => {
  return a + b
})

test1の結果は、10

文字列配列の場合

test = ["1", "4", "3", "2"]
const test1 = test.reduce((a, b) => {
  return a + b
})

test1の結果は、1432

結果が違ってくる

やはり、+による足し算の場合は、数値と文字列で挙動が変わってしまうため、結果が違ってきた。

 

参考リンク

Array.prototype.reduce() – JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

Math.min() – JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Math/min

Web技術カテゴリの最新記事