javascript 階乗を計算する

作成日 2023.01.17
更新日 2023.01.19
javascript
javascript

javascriptで、階乗を計算するサンプルコードを記述してます。方法は複数ありますが、「for」文などで対象の数値から順番に演算していることで可能です。

1. 環境
2. 階乗を計算
3. サンプルコード

環境

OS windows11 pro 64bit
ブラウザ chrome 109.0.5414.75

Javascript サンプル集はこちら

階乗を計算

階乗は、「3! = 3 x 2 x 1 = 6」のように、指定した値から「1」ずつ減らして「1」までをかけたものなので、同じことを行う関数を作成することで可能です。

function factorial(num) {
  let count = 1;
  for (let i = num; i > 0; i--) {
    count = count * i;
  }
  return count;
}

console.log(factorial(3)); // 6
console.log(factorial(5)); // 120
console.log(factorial(0)); // 1 ← 0階乗は1となります

1から順に掛け算しても結果は一緒なので、以下の方法もあります。

function factorial(num) {
  let count = 1;
  for (let i = 1; i <= num; i++) {
    count = count * i;
  }
  return count;
}

console.log(factorial(3)); // 6
console.log(factorial(5)); // 120
console.log(factorial(0)); // 1 ← 0階乗は1となります

ちなみに、作成した関数を再帰的に使用する方法もあります。

function factorial(num) {
  if (num < 2) return 1;
  return num * factorial(num - 1);
}

console.log(factorial(3)); // 6
console.log(factorial(5)); // 120
console.log(factorial(0)); // 1 ← 0階乗は1となります

サンプルコード

以下は、
「取得」ボタンをクリックすると、フォームに入力された数値を5の倍数に近いの値に丸めた結果を表示するサンプルコードとなります。

※cssには「bootstrap material」を使用してます。関数はアロー関数で記述してます。

アロー関数の使い方

document.getElementByIdの省略して記述する

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <!-- MDB -->
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdb-ui-kit/4.2.0/mdb.min.css" rel="stylesheet" />
</head>

<body>
  <div class="container text-center w-25" style="margin-top:150px">

    <h2><span class="badge badge-info">実行結果</span></h2>
    <input type="number" id="setData">    

    <button id="btn" type="button" class="btn btn-raised btn-info mt-1">
      実行
    </button>

  </div>

  <script>

    const factorial = (num) => {
      let count = 1;
      for (let i = num; i > 0; i--) {
        count = count * i;
      }
      return count;
    }

    // クリックイベントを登録
    btn.onclick = () => {
      document.getElementsByClassName("badge")[0].textContent = factorial(Number(setData.value));
    };

  </script>
</body>

</html>

結果が表示されていることが確認できます。