[TIL]Day 24. map, reduce 메소드에 관하여 in javascript

오늘은 자바스크립트 메소드 중 활용도가 매우 높다고 하는 map과 reduce 메소드에 대해 알아보도록 하겠습니다.

1. map

 

map 메소드는 MDN 문서에는 다음과 같이 정의하고 있습니다.

 

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

 

map메소드는 다음과 같이 사용합니다. 

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

map은 반복문을 돌며 배열 안의 요소들을 1 대 1로 짝지어 주는 역할을 합니다. 그 요소들을 어떻게 짝지어줄 것인가에 대해서는 함수로 정의할 수 있습니다. 

 

이때 특이한 점은 map 메소드의 return 값으로 나온 배열은 기존의 배열과는 다른 새로운 배열이라는 것입니다. 단, 배열 안에 들어있는 객체는 기존의 배열의 것과 공유됩니다. 

 

2. reduce 

 

reduce 메소드는 MDN문서에서 다음과 같이 정의하고 있습니다.

reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.

reduce 메소드는 다음과 같이 사용합니다.

arr.reduce((누적값, 현재값, 인덱스, 요소) => { return 결과 }, 초기값);

이때 초기값을 적어주지 않으면 배열의 인덱스 [0]의 값이 초기값으로 설정됩니다. 초기값을 적어주지 않았을 때에는 경우에 따라 에러가 발생하는 경우가 있어 가능한 초기값을 설정해주시는 것을 추천드립니다.

 

reduce의 예시를 한번 들어보겠습니다.

 

let arr = [1,2,3,4,5]

let result = arr.reduce((acc, cur, i) => {
	console.log(acc, cur, i)
    return acc + cur;
    }, 0);
    
//return
//0 1 0
//1 2 1
//3 3 2
//6 4 3
//10 5 4

 만약 초기값을 배열로 설정한다면, 그 결과값은 map과 같아집니다. 또 이를 응용하여 조건부로 값을 배열에 push 한다면 filter와 값이 같아집니다. 

 

3. 마치며

 

아직 js의 기본문법에 익숙하지 않아 알고리즘 문제를 풀면서 기본 문법을 익히고 있는데  오늘 공부한 map과 reduce가 정말 강력한 것 같아 한 번 정리해 보았습니다. 아직 내공이 부족해 깊이 있는 포스팅은 하지 못해서 아쉽다는 생각이 드네요. 이 내용으로 부족하다고 생각하시는 분들은 제가 오늘 포스팅하면서 참고한 블로그에 가시면 더 자세한 내용을 확인하실 수 있습니다. 얼른 성장해서 더 깊고 풍부한 내용들을 녹여낼 수 있는 개발자가 되어야겠습니다.

 

참고 블로그: zerocho.com/category/JavaScript/post/5acafb05f24445001b8d796d