JS (JavaScript) map(), reduce() 기초 사용법

map

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

 

map함수는 배열을 순회하면서 함수(위에선 화살표 함수 사용)에 return값을 새로운 배열에 저장한다.

let arr = [1,2,3];
let result = arr.map((item)=>{
    return item*2
})
result;//[2,4,6]
arr; // [1,2,3]

 

여기서 기존 배열인 arr는 수정되지 않고 새로운 배열을 만들어 낸다.
또한 함수식에 return값을 사용하기 때문에, 조건문이나 반목문 등을 사용해서 자유로운 값을 도출 할 수 있다.

 

마땅한 예제가 생각이 안나 기본식에 2번째 인자인 인덱스와 3번째 인자인 배열은 사용하지 않았는데, map을 호출한 배열 즉 위 예제에서 arr가 된다. 따라서 해당 배열을 필요에 맞게 사용하면 된다.
인덱스는 말 그대로 현재 요소가 배열에서 갖는 인덱스 번호이다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/map

 

reduce

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

개인적으로 map과 비슷하다고 생각되고, 더 많은 역할을 수행 할 수 있을 것 같다. ```reduce```함수는 배열을 순회하면서 순회가 끝났을 때 누적된 값(1번째 인자)를 반환한다. 누적된 값은 마지막에 작성한 초깃값을 가지고있으며 함수에서 계산식을 통해 값을 누적할 수 있다(값이라 표현했지만 상황에 따라 배열, 객체 다양하게 사용할 수 있다.) 요소는 말그대로 지금 사용하는 요소를 말한다. 인덱스는 사용하고 있는 요소에 인덱스 번호이다. 배열은 reduce를 불러온 배열 아래 예제에서는 arr가 해당된다. 초깃값은 누적된 값에 초깃값을 정한다.

let arr = [1,2,3];
let result = arr.reduce((save, item, i)=>{
     console.log(save, item, i);
      return acc + cur;
}, 0);
// 0 1 0
// 1 2 1
// 3 3 2
result; // 6

 

위 과정을 보면 초기값이 0, 순회하고있는 요소는 1, 그 요소에 인덱스 번호는 0번 따라서 첫 콘솔에는 0,1,0이 출력되고,
그 이후로는 누적된 값에 요소값을 더하는 명령이 수행된 값이 나타나게 된다.
마지막 (총 3번) 순회를 마치고나면 return된 값이 3+ 3이기 때문에(그전에 누적된 save = 3 , 마지막 순회 요소 = 3) result값은 6이 나온다.

 

여기서도 기본 형식에 있는 배열을 사용하진 않았지만 필요에 따라 사용하면된다. 개인적으로 map보다 구조는 복잡해 보이지만 더 자유로운 활용을 할 수 있을 것 같다.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce