【JavaScript】Math.max / Math.min – 最大値や最小値を取得する

JavaScriptで複数の数値の中から最大値や最小値を取得する場合、Math.max()とMath.min()を使用します。今回は、それぞれの基本的な使い方をまとめていきたいと思います。

目次非表示

Math.max()とは？
Math.min()とは？
サンプルコード
使用時の注意点
さいごに

Math.max()とは？

Math.max()は、引数として渡された数値の中で最も大きい値を返すメソッドです。

JavaScript

console.log(Math.max(10, 20, 30)); // 30
console.log(Math.max(-5, 0, 5));  // 5

配列の要素の最大値を求める場合は、スプレッド構文 ... を使います。

JavaScript

const numbers = [3, 7, 2, 8, 5];
console.log(Math.max(...numbers)); // 8

Math.min()とは？

Math.min()は、引数として渡された数値の中で最も小さい値を返すメソッドです。

JavaScript

console.log(Math.min(10, 20, 30)); // 10
console.log(Math.min(-5, 0, 5)); // -5

こちらも Math.max()同様、配列の最小値を求める場合はスプレッド構文を使います。

JavaScript

const numbers = [3, 7, 2, 8, 5];
console.log(Math.min(...numbers)); // 2

サンプルコード

テストの最高点・最低点を取得する

複数の点数から、最高点と最低点を取得することができます。

JavaScript

const scores = [85, 90, 78, 88, 92];
console.log(`最高点: ${Math.max(...scores)}`); // 最高点: 92
console.log(`最低点: ${Math.min(...scores)}`); // 最低点: 78

ウィンドウサイズの取得

現在のウィンドウサイズを取得する際に、Math.min()を活用できます。

JavaScript

const width = window.innerWidth;
const height = window.innerHeight;
const minSize = Math.min(width, height);

console.log(`最小の辺の長さ: ${minSize}px`);

数値の範囲を制限する

Math.max()とMath.min()を組み合わせて、値を特定の範囲内に制限できます。

JavaScript

function clamp(value, min, max) {
  return Math.max(min, Math.min(value, max));
}

console.log(clamp(120, 0, 100)); // 100
console.log(clamp(-10, 0, 100)); // 0
console.log(clamp(50, 0, 100));  // 50

使用時の注意点

Math.max()やMath.min()に何も渡さないと、次のような結果になります。

JavaScript

console.log(Math.max()); // -Infinity
console.log(Math.min()); // Infinity

JavaScript

const numbers = [];
const maxNumber = numbers.length > 0 ? Math.max(...numbers) : null;
console.log(maxNumber); // null

さいごに

Math.max() : 数値の中から最大値を取得します
Math.min() : 数値の中から最小値を取得します
配列の値を扱う際はスプレッド構文を活用しましょう
空の配列を渡すと Infinityや-Infinity になるため注意が必要です