JavaScriptのreduceとrangeを組み合わせて階乗関数を作成する方法
JavaScriptで階乗を計算する関数を、ヘルパー関数 range() を活用して実装する方法を解説します。
range 関数は、1から入力された数値までの連続した整数を要素とする配列を生成します。その後、メインの階乗関数がこの配列に対して Array.prototype.reduce() を実行し、全要素を乗算することで階乗を求めます。
コード例
実際の実装コードは以下の通りです。
const range = (start, end) => {
const acc = [];
for (var i = start; i < end; i++) {
acc.push(i);
};
return acc;
}
const factorial = n => {
let factors = range(1, Math.abs(n)+1);
let res = factors.reduce((acc,val) => {
return acc * val;
}, 1);
if(n < 0){
res *= -1;
};
return res;
};
console.log(factorial(5));出力結果
コンソールには以下のように出力されます。
120
コードの解説
この実装のポイントは以下の3点です。
- range関数による配列生成:range(1, Math.abs(n)+1) により、1から n までの整数配列を生成します。Math.abs() を使用することで、負の数が入力された場合にも正しく動作します。
- reduce()による乗算:初期値を 1 に設定した reduce() を使うことで、配列内のすべての要素を順番に掛け合わせていきます。
- 負の数への対応:入力値 n が負の場合は、計算結果に -1 を掛けることで符号を調整しています。
例えば factorial(5) を実行した場合、range 関数は [1, 2, 3, 4, 5] という配列を生成し、reduce() によって 1 × 1 × 2 × 3 × 4 × 5 = 120 が計算されます。このように、ループ処理を range と reduce に分離することで、コードの可読性と再利用性が向上します。
-
JavaScriptでHTMLキャンバスに描画する方法をわかりやすく解説
HTMLキャンバス(canvas)への描画は、JavaScriptを使って行います。キャンバスに描画する前に、HTML DOMメソッドのgetElementById()とgetContext()を使用する必要があります。ここでは、JavaScriptでキャンバスに図形を描画する基本的な手順を紹介します。キャンバスに描画する基本手順getElementById()メソッドを使って、HTML内のキャンバス要素を取得します。getContext()メソッドを呼び出して、描画用のオブジェクトを取得します。このオブジェクトが、図形を描くための各種メソッドやプロパティを提供します。取得した描画オブジェクト
-
CSSとJavaScriptでカスタム範囲スライダーを作成する方法【コード例付き】
CSSとJavaScriptを組み合わせることで、標準の要素をベースにしながら、見た目を自由にカスタマイズした範囲スライダー(レンジスライダー)を作成できます。スライダーのトラックの色や形状、つまみ(ハンドル)のデザインは、CSSの疑似要素を使って細かく調整可能です。カスタム範囲スライダーの実装例以下のコードでは、紫がかったトラックと黄緑色の丸いつまみを持つスライダーを実装し、スライドした値をリアルタイムで表示しています。<!DOCTYPE html> <html> <head> <meta name="viewport" cont