0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【JavaScript】reduceメソッド

Posted at

#はじめに
こんにちは。
JavaScriptのreduceメソッドについてアウトプットしていきます!

##reduceメソッドとは

reduce() メソッドは、配列の各要素に対して (引数で与えられた) reducer 関数を実行して、単一の出力値を生成します。

参照:https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

JavaScript
const numbers = [1,2,3,4];

const result = numbers.reduce((accu,curr) => {
  return accu + curr;
})

console.log(result);  //10

上記の記述では、1回目の処理でaccuには配列の最初の要素の1が入る。currには2が入る。2回目の処理でaccuにはreturnで返された3が入り、currには配列の3が入る。

処理が完了すると、resultから配列の合計10が出力される。


##mapメソッドとの違い
reduceメソッドと同じように、配列に対して処理ができるmapメソッドについても簡単に説明していきます。

###mapメソッドとは

map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

参照:https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map

JavaScript
const numbers = [1,2,3,4];

const result = numbers.map((num) => {
  return num + 2;
})

console.log(result);  //[3, 4, 5, 6]

配列の要素全てに+2を実行して、新しい配列を生成できます。


#最後に
ここまでreduceメソッドについてまとめてみました。
できることが少しずつ増えてきてプログラミングの楽しさが増してきました笑
これからもコツコツ学習していきます!

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?