JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptのNumber.MAX_VALUEとNumber.MIN_VALUEプロパティの使い方をわかりやすく解説

JavaScript の Number.MAX_VALUE と Number.MIN_VALUE は、JavaScriptで扱える数値の上限と下限を示す静的プロパティです。この記事では、それぞれのプロパティが持つ値の意味と、実際に動作するサンプルコードを交えて詳しく解説します。

Number.MAX_VALUE・Number.MIN_VALUEとは？

Number.MAX_VALUE は、JavaScriptで表現できる最大の数値（約1.7976931348623157 × 10308）を返します。一方、Number.MIN_VALUE は「最小の負の数」ではなく、ゼロに最も近い正の数（約5 × 10-324）を返す点に注意が必要です。

  • Number.MAX_VALUE： 表現可能な最大の数値。これを超えると Infinity になります。
  • Number.MIN_VALUE： ゼロより大きい最小の正の数。これより小さい正の数は0に丸められます。

これらのプロパティは読み取り専用であり、書き換えることはできません。

サンプルコード

以下は、ボタンをクリックすると両方の値を画面に表示するシンプルなデモです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .sample{
        font-size: 18px;
        font-weight: 500;
        color: red;
    }
</style>
</head>
<body>
<h1>JavaScript Number.MAX_VALUE & Number.MIN_VALUE</h1>
<div class="sample"></div>
<div style="font-weight: bold; color: black;" class="result"></div>
<button class="Btn">CLICK HERE</button>
<h3>
上のボタンをクリックすると、JavaScriptで表現できる最大値と最小値が表示されます
</h3>
<script>
    let sampleEle = document.querySelector(".sample");
    document.querySelector(".Btn").addEventListener("click", () => {
        sampleEle.innerHTML = 'Number.MAX_VALUE = ' + Number.MAX_VALUE + '<br>';
        sampleEle.innerHTML += 'Number.MIN_VALUE = ' + Number.MIN_VALUE + '<br>';
    });
</script>
</body>
</html>

実行結果

ページを開いた直後の状態：

JavaScriptのNumber.MAX_VALUEとNumber.MIN_VALUEプロパティの使い方をわかりやすく解説

「CLICK HERE」ボタンをクリックすると、以下のように各プロパティの値が出力されます。

JavaScriptのNumber.MAX_VALUEとNumber.MIN_VALUEプロパティの使い方をわかりやすく解説

まとめ

Number.MAX_VALUE はJavaScriptで扱える数値の上限、Number.MIN_VALUE はゼロに最も近い正の下限を表します。大きな数値計算やオーバーフロー判定を行う際に役立つため、その特性を理解しておくと便利です。

  1. 【初心者向け】JavaScriptのfinallyステートメントをサンプルコード付きでわかりやすく解説

    finallyステートメントは、エラーが発生したかどうかにかかわらず、tryブロックとcatchブロックの処理が完了した後に必ず実行されるブロックです。ファイルのクローズやデータベース接続の切断など、処理の成功・失敗に関係なく必ず実行したい後処理（クリーンアップ処理）を記述する際に非常に便利です。finallyの基本構文try { // エラーが発生する可能性のある処理 } catch (err) { // エラー発生時に実行される処理 } finally { // エラーの有無にかかわらず必ず実行される処理 }サンプルコード以下は、JavaScriptにおけるfinallyステー

  2. JavaScriptで数字パターンを表示する方法【初心者向けサンプルコード】

    本記事では、テキスト入力欄とボタンを備えたJavaScript・HTMLプログラムの作成方法を解説します。ユーザーが入力欄に任意の数値(例：5)を入力してボタンをクリックすると、画面に以下のような数字パターンが表示される仕組みです。(n = 5 の場合の出力例)01 01 02 01 02 03 01 02 03 04 01 02 03 04 05仕組みのポイントこのパターンは二重ループ(ネストしたforループ)を使うことで実現できます。外側のループが「行」を制御し、内側のループがその行に表示する「数字の個数」を制御します。i 行目には 1 から i までの数字が順番に出力されるため、行が進む