ForEach, Map, Reduce

javascript에서 forEach, map, reduce 차이점을 알아보자

forEach, map, reduce의 공통점은 배열을 이용한다는 점이다. 배열의 값을 조작해서 원하는 결과값을 도출하는데 의미가 있다.

다른점은 forEach는 문밖으로 리턴값을 받지를 못한다. 아래의 코드를 보자

FOREACH

이 경우는 [2,3,4,5,6]이 들어있는 배열이 출력된다.이 경우 undefined가 출력 된다.
하지만 같은 경우라도 map을 이용하면 다르다.

 

MAP

map은 리턴값을 출력할수 있다.
즉 forEach와 map의 큰 차이는 바로 리턴값에 있는 것이다.
성능면에 있어서도 map이 forEach보다 유리하다. 가능하면 map을 사용하는게 좋다.

배열.map((요소, 인덱스, 배열) => { return 요소 });

foreach 와 map 의 차이는 map은 새로운 배열을 반환한다.

그리하여 배열.map 한 값과, 그 배열 본연의 값은 false로 값이 다르다.

배열을 순회하려면 forEach( ), 배열을 순회 후 새 배열을 얻고 싶다면 map( ) 사용.

REDUCE

reduce의 인자로는 총4개를 받을수가 있는데 이전값,현재값,index,배열을 받을수가 있다.

배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);

이전에 살펴본 map과 달리 reduce는 배열이 아닌 하나의 값으로 출력을 하고 있다. 이전값과 현재값을 더하는 방식으로 값을 출력해 내는데

1+2 = 3

3+3 = 6
6+4 = 10
10+5 = 15

이런형태로 값을 도출해 내는 걸 알수 있다.

prevValue만 리턴하면 배열의 첫번째 요소 1이 리턴이 된다.
currentValue는 배열의 마지막 요소 5가 리턴이 된다.

 

초깃값을 적어주지 않으면 자동으로 초깃값이 0번째 인덱스의 값이 됩니다.

 

 

 

​