JavaScriptで配列の平均値を求める方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで配列の平均値を求める方法について解説しています。ここではfor文を使った方法、reduceメソッドを使った方法について説明します。それぞれの処理の流れと書き方を学習しましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事が4,000以上あります。現役エンジニアの方はこちらをご覧ください。

JavaScriptで配列の平均値を求める方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

配列の平均値を求める方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

for文を使って配列の平均値を求める方法

配列の平均値は以下の手順で求めることができます。
  1. 配列の合計を計算
  2. 合計を配列の要素数で除算
for 文を使って平均値を求めてみましょう。
const arr = [1, 2, 3, 4, 5];

let sum = 0;

for (let i=0; i<arr.length; i++) {

  sum += arr[i];

}

console.log(sum / arr.length);

// => 3
forEach を使って求めることもできます。
const arr = [1, 2, 3, 4, 5];

let sum = 0;

arr.forEach(function(v) {

  sum += v;

});

// ↑は arr.forEach(v => sum += v) とも書けます

console.log(sum / arr.length);

// => 3

 

reduceメソッドとは

続いて reduce メソッドで求める方法を解説していきます。reduce メソッドとは、配列の各要素に対して計算処理を行う関数を渡して、計算結果を取得するメソッドです。
// acc: これまでの計算結果(初期値は 1番目の要素)

// cur: 次に計算する要素(初期値は 2番目の要素)

arr.reduce(function(acc, cur) {

  return acc + cur;

})
今回の例でいくと以下のようなイメージになります。

a. 1番目の要素 1 と 2番目の要素 2 を使って計算

b. aの計算結果と、3番目の要素 3 を使って計算

c. bの計算結果と、4番目の要素 4 を使って計算

d. cの計算結果と、5番目の要素 5 を使って計算

e. dの計算結果が最終計算結果

 

a. acc = 1, cur = 2 なので、計算結果は 3

b. acc = 3, cur = 3 なので、計算結果は 6

c. acc = 6, cur = 4 なので、計算結果は 10

d. acc = 10, cur = 5 なので、計算結果は 15

e. すべての要素に対して計算終了、reduce の結果は 15
なお、reduce メソッドに渡す関数(reducer)は、事前に定義しておいても良いですし、アロー関数を使って書いても良いです。
// reducer 関数の事前定義

const arr = [1, 2, 3, 4, 5];

const reducer = function (acc, cur) {

  return acc + cur;

};

arr.reduce(reducer);

// アロー関数

arr.reduce((acc, cur) => acc + cur);

 

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

reduceメソッドを使って配列の平均値を求める方法

reduce メソッドを使って配列の合計を計算し、配列の要素数で割れば良いでしょう。
const arr = [1, 2, 3, 4, 5];

const sum = arr.reduce(function (acc, cur) {

  return acc + cur;

});

console.log(sum / arr.length);

// => 3

 

reduceメソッドとmapメソッドの違い

reduce メソッドは配列から単一の計算結果を求めるものに対して、map メソッドは元の配列から新しい配列を作るものになっています。「配列の各要素の合計を求めたい」であれば reduce メソッドを使います。
const arr = [1, 2, 3];

const result = arr.reduce(function (acc, cur) {

  return acc + cur;

});

console.log(result);

// => 6
「配列の各要素を2倍した配列を作りたい」であれば map メソッドを使います。
const arr = [1, 2, 3];

const result = arr.map(function (v) {

  return v * 2;

});

console.log(result);

// => [2, 4, 6]

 

監修してくれたメンター

メンター稲員さん

フリーランスエンジニア。大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。

経験言語:Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript、Node.js。おうち大好きマンです。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは、初心者でも最短4週間でJavaScript・jQueryを使ったWebサービス公開を習得できるオンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。