1.Javascript의 Map과 Reduce란?

리액트 공부를 하다가 책에서 배열에 대해 map 함수를 많이 쓰길래 뭔지 찾아보니

 자바스크립트 내장 함수였다...(프론트를 할꺼면 이정도는 알았어야 했다...)

그래서 공부해 보았다

Map

1.map 메소드는 다음과 같은 방식으로 사용한다.  

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

2.map의 기본 원리는 배열의 각 요소들에 대해 반복문을 도는 것인데 map의 인자로 함수를 넣어준다.

그 말은 다시말해 배열의 각 요소들을 파라미터로 함수를 요소 수만큼 실행한다는 것이다.

ex) 

 const arr = [1,2,3];

 let arr2 = arr.map(

(v) => {

return v

}

);

3.주의할 점은 map을 사용한다고 원래 배열의 값은 바뀌지 않으므로 map을 사용한 결과값을 다른 배열에 담아야 한다.

ex) 각 요소들 +1 한 배열 생성

 const arr = [1,2,3];

 let arr2 = arr.map( (v)=>{ return v+1} );

ex) 각 요소들이 홀수인지 짝수인지 구분

 const arr = [1,2,3];

 let arr2 = arr.map((v) => { return (v%2 ==0)? '짝수' : '홀수'});

Reduce

1.reduce 메소드는 다음과 같은 방식으로 사용한다. 

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

2.reduce는 map과 같이 배열의 요소들에 대해 반복문을 도는데 인자로 누적값과 현재값을 주기 때문에 그것을 응용하면 강력한 힘을 낼 수 있다.

 즉, reduce로 map, sort, every, some, find, findIndex, includes 등의 내장함수 모두를 구현할 수 있다.

ex)reduce로 map의 홀수, 짝수 구분 예제 만들기

 const arr= [1,2,3];

 let arr2 = arr.reduce((acc,cur) => { if(cur%2 == 0) acc.push('짝수') else acc.push('홀수') return acc},[]);

-> 초기값으로 배열을 만들었고, 반복문을 돌면서 그 배열에 누적 값을 push 하였다. 그러면 최종 반환값은 누적값이 된다.

참고로 누적값을 0으로 넣어주면 acc가 0부터 시작한다.

ReduceRight

1.reduceRight 메소드는 reduce와 동일한데 요소 순회를 뒤에서 부터 한다.

어렵다.... 한번보고 이해가 잘안간다 더 찾아보고 사용해보자

참고

https://www.zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d

https://medium.com/@hongkevin/js-3-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B0%B0%EC%97%B4-%EB%A9%94%EC%84%9C%EB%93%9C-reduce-100-%ED%99%9C%EC%9A%A9%EB%B2%95-feat-egghead-io-97c679857ece