JavaScriptで配列の最大値・最小値を求める方法

JavaScriptで、配列の最大値・最小値を求める方法を、解説します。Math.max()メソッド / Math.min()メソッドと、reduce()メソッドを使う方法をご紹介します。

方法1.Math.max()メソッド / Math.min()メソッド + スプレッド構文を使う方法

const numbers = [5, 12, 8, 20, 3];

const max = Math.max(...numbers); // 20
const min = Math.min(...numbers); // 3

Math.min()メソッド / Math.max() メソッドとは？

JavaScriptの Math オブジェクトに用意されているメソッドで、数値の最小値 や 最大値 を求めるために使います。注意点として、Math.max()メソッドやMath.min()メソッドは、配列にはそのままだと使えないため、必ずスプレッド構文などを組み合わせて、配列の中身を「バラして」渡すことがポイントです。

この書き方は、NaN（Not a number)になります。そのまま配列を渡すことはできません。

const numbers = [10, 3, 8];
Math.min(numbers); // NaN
Math.max(numbers); // NaN

スプレッド構文で配列の中身をバラして、渡しましょう。

const numbers = [10, 3, 8];

const min = Math.min(...numbers); // 3
const max = Math.max(...numbers); // 10

console.log(`最小値: ${min}, 最大値: ${max}`)

スプレッド構文とは？

スプレッド構文（...）は、配列やオブジェクトの中身を「個別の値に分解する」ための記述方法です。もし「スプレッド構文」って名前がピンとこなければ、「配列をバラすやつ」くらいの感覚で覚えておくと頭に入りやすいです。

Math.max(…numbers) の意味は、Math.max(1, 2, 3)と書いていることと同じになります。...numbers の部分が 「配列の中身を1個ずつ取り出して並べる」 という意味になります。

const numbers = [1, 2, 3];

Math.max(...numbers); // → 3
Math.max(1, 2, 3); // → 3

[1, 2, 3] と 1, 2, 3 の違い

[1, 2, 3] と 1, 2, 3 の違いは、配列なのか個別の値なのか、ということです。

Math.max() は 「複数の個別の数値」 を引数にとります。つまり下記のような値を期待してます。

Math.max(数値1, 数値2, 数値3, ...);

スプレッド構文を使うと、個別の値を取り出すことができるので、期待通りの値を渡すことができます。

const numbers = [1, 2, 3];

Math.max(...numbers);
Math.max(1, 2, 3); // ← 中身がバラバラになってる！

これを Math.max([1, 2, 3]) としてしまうと、配列を「1つの引数」として渡してしまうことになるため、期待する値にならず、 失敗（NaN） になります。

const numbers = [1, 2, 3];
Math.max(numbers); //NaN
Math.max([1, 2, 3]);  //NaN（個別の値ではなく、配列を渡してるから）

方法2.for文を使って、最小値・最大値を求める

もしスプレッド構文を使いたくない場合は、for文を使ってループ処理でもできます。

const numbers = [10, 3, 8];

let min = numbers[0];
let max = numbers[0];

for (let i = 1; i < numbers.length; i++) {
  if (numbers[i] < min) min = numbers[i];
  if (numbers[i] > max) max = numbers[i];
}
console.log(`最小値: ${min}, 最大値: ${max}`);

でも、見た目的に、 Math.min(...配列) またはMath.max(...配列) の方がスマートに書けるので、スプレど構文を使う方が、おすすめです。

方法3.reduce()メソッドを使う方法

reduce() メソッドは配列の要素を1つの値にまとめるメソッドです。最大・最小のような単純な処理だけでなく、合計・平均を出したり、オブジェクトの集計にも使えるので、他にも複雑な処理をしたいときは、reduce()メソッドを使うのが楽です。

reduce() を使えば、ループなしで最大値・最小値が求められます。

const numbers = [5, 12, 8, 20, 3];

const max = numbers.reduce((a, b) => a > b ? a : b); // 20
const min = numbers.reduce((a, b) => a < b ? a : b); // 3

関数化してみると下記のようになります。

function getMax(numbers) {
  return numbers.reduce((max, number) => number > max ? number : max);
}

function getMin(numbers) {
  return numbers.reduce((min, number) => number < min ? number : min);
}

// 使用例
const numbers = [5, 12, 8, 20, 3];

const max = getMax(numbers);
const min = getMin(numbers);

console.log(max); // 20
console.log(min); // 3

どっちを使うべきか

配列の最大値・最小値を求めたいだけなら、Math.max(...array) が一番シンプルです。条件付きで値を比較したい場合や、オブジェクトの配列から値を取り出すような場合には reduce() がおすすめです。

終わりに

以上、JavaScriptで、配列の最大値・最小値を求める方法を解説しました。ぜひ使ってみてください！