JavaScriptで配列内の値を加算する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptで配列内の値を加算する方法について現役エンジニアが解説しています。for文で配列の各要素を取り出し配列の値を足す方法やreduceを使って、配列の各要素に対して関数を実行して足す方法があります。

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

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

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

 

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

 

 

田島悠介

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

大石ゆかり

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

田島悠介

JavaScriptで配列内の値を加算する方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

JavaScriptで配列内の値を加算する方法

JavaScriptで配列内の値を加算する方法はいくつかありますが、代表的なものは以下の2つです。

  1. for文を回して、配列の各要素を取り出し配列の値を足しあげる
  2. reduceを使って、配列の各要素に対して関数を実行して足しあげる

1のfor文を回して行う場合は、以下のように書きます。

const sumArray = array => {
  let sum = 0;
  for (let i = 0, len = array.length; i < len; i++) {
    sum += array[i];
  }
  return sum;
};

const array = [1,2,3]

sumArray(array)

配列を引数に取り、合計値を代入する変数sumを用意します。
for文で配列の各要素を取り出し、一つ一つをsumに加算していきます。
そして、returnでsumを返すことで合計値が求められます。

2のreduceは、配列のメソッドで関数を引数にとるメソッドです。
引数に取った関数を各要素に対して実行して、1つの値を返します。

reduceに渡す関数は以下の4つの引数を持つことができます。

1と2は必須の値です。

1.アキュムレーター(累積される値のこと、先ほどの例のlet sumに当たる)
2.現在の値(今処理されている値)

3と4はオプションの値です。

3.現在の値のインデックス(今処理されている値のインデックス)
4.配列(reduceメソッドを呼んだ配列)

配列を足しあげる場合には、1と2の値を持つ関数を用意し、reduceメソッドに渡すことで実行できます。

const array = [1,2,3]
const reducer = (sum,currentValue) => sum + currentValue
array.reduce(reducer) //=> 6

 

また第2引数で初期値を渡すこともできます。

array.reduce(reducer,10) //=> 16

 

実際に書いてみよう

それでは実際に書いてみましょう。
今回は、reduceメソッドを使って偶数の値だけ足しあげるコードを書いてみます。

まず、以下のように配列を用意します。

const array = [1,2,3,4,5,6,7,8,9]

 

reduceに渡す関数、reducerを用意します。

各要素(currentValue)が2で割れるかどうかを判断し、割れる場合にはsumに足します。
それ以外はそのままsumの値を返します。

const reducer = (sum,currentValue) => {
  if (currentValue%2 === 0){
    return sum + currentValue
  } else {
    return sum
  }
}

最後に、reduceにreducerを渡せば完成です。
2 + 4 + 6 + 8 = 20なので、20が返ってきます。

array.reduce(reducer,0) // => 20

以上で解説を終わります。
reduceは、便利なメソッドなので覚えておきましよう。

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

執筆してくれたメンター

メンター金成さん

2014年より、某物流会社のシステム開発担当として入社。未経験ながら、社内システム保守~新規受注システム開発まで携わり、JavaScript Ruby on Rails PostgreSQLなどの経験を積む。
現在も、開発案件に携わりながら、日々勉強中。

 

大石ゆかり

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

田島悠介

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

大石ゆかり

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

 

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

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