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

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

 

目次

• JavaScriptで配列内の値を加算する方法
• 実際に書いてみよう

 

 

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

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

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

 

[PR] フロントエンドで副業する学習方法を動画で公開中

実際に書いてみよう

それでは実際に書いてみましょう。
今回は、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は、便利なメソッドなので覚えておきましよう。

執筆してくれたメンター

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

 

 

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！