注目キーワード

JavaScriptで配列の平均値を求める方法

JavaScriptで配列の平均値を求める方法

この記事では、配列の合計を求めるメソッドreduce()を使って配列の平均値を求める方法を、解説します。

目次

配列の平均値を求める流れ

  • reduce()で配列の合計を出す
  • .lengthで要素数を取得して、割る

コード例

const numbers = [10, 20, 30, 40, 50];

// 合計を出す（reduceで足し算を繰り返す）
const total = numbers.reduce((currentTotal, number) => currentTotal + number, 0); // 150

// 要素の数で割って平均を出す
const average = total / numbers.length; // lengthは5なので、150 / 5

console.log(average); // 30

reduce()を使って合計を出す

const total = numbers.reduce((currentTotal, number) => currentTotal + number, 0);
  • reduce() は、配列のすべての要素を1つの値にまとめるメソッドです。
  • (total, num) という2つの引数を使って、合計を計算しています。
  • 最後の 0 は初期値。これがないと配列が空のときにエラーになることがあります。

reduce()メソッドについては、こちらの記事でも解説しています。

このコードは、以下のように動いています。

1回目: total = 0, num = 10 → 合計 = 10  
2回目: total = 10, num = 20 → 合計 = 30  
3回目: total = 30, num = 30 → 合計 = 60  
...と続いて、最終的に150を返します。

配列の長さ（length）で割る

const average = total / numbers.length;

reduce()で、合計を出したら、配列の要素数で割ります。numbers.length は、配列の長さ（＝要素数）を返します。

平均を求める関数を作ってみよう

function getAverage(numbers) {
  if (numbers.length === 0) return 0;

  const total = numbers.reduce((currentTotal, number) => currentTotal + number, 0);
  const average = total / numbers.length;

  return average;
}

// 使用例
console.log(getAverage([10, 20, 30, 40, 50])); // 30

空の配列のときはどうなる？

配列が空だった場合、合計は 0 になりますが、0 ÷ 0 という計算になるため、結果は NaN（Not a Number）になります。

const numbers = [];

const total = numbers.reduce((currentTotal, number) => currentTotal + number, 0);
const average = total / numbers.length;

console.log(average); // NaN

実際の利用ケースでは配列の合計が0ということはあまりないと思いますが、
length === 0 の場合は 0 や null を返すなど、安全なコードにしておくと、より安心です。

終わりに

以上、JavaScriptで配列の平均値を求める方法について解説しました。とても簡単なので、ぜひ試してみてください。

FAQ

この記事は何について説明していますか？

JavaScriptを使って、配列の平均値を計算する方法について説明しています。

平均値を求めるのに、どのようなJavaScriptの機能を使っていますか？

`reduce()`という関数を使っています。

`reduce()`関数とは何ですか？

配列の要素を順番に処理して、最終的に1つの値を返す関数です。平均値計算では、すべての要素の合計値を計算するために使われます。

平均値を計算する手順は、大まかにどのようなものですか？

まず配列の要素をすべて足し合わせ、次に要素の数で割ることで平均値を求めます。

この記事を読むことで何が分かりますか？

JavaScriptで配列の平均値を計算するための具体的な方法と、そのコード例が分かります。

まい

Webサービス制作会社で、Wordpressのテーマ開発や2Dシミュレーターの開発、JavaScriptを使用したフロントエンド周りの実装を担当しています。 JavaScriptが好きです。 最近は、3D Model Configuratorの制作にチャレンジしています。

JavaScriptカテゴリの最新記事