const filterMaped = arr.filter(x => x % 2 !== 0).map(x => x * 2);
console.log(filterMaped) // [2, 6, 10]=> ?
JS의 최신 버전?격인 ES6에서 쓰이는 걸로 보인다.
위와 같이 기능은 같되, 좀 더 직관적으로 표현할 수 있는 메소드로 보인다.
해석
arr.filter(x => x % 2 !== 0) // x를 홀수인자들로 filter 처리하고map(x => x * 2); // filter 처리된 x들에 2를 곱한다.to reduce
filter와 map 메소드로 나눠져 있던 걸 reduce메소드로 작성해본다.
그러기 위해 먼저 reduce 메소드를 다시 짚어보자.
reduce?
- reduce()는 빈 요소를 제외하고 배열 내에 존재하는 각 요소에 대해 callback 함수를 한 번씩 실행한다.
- reduce는 다음 4개의 인자를 가진다.
accumulator - 누산(acc)
current value - 현재 값(cur)
current index - 현재 요소(idx)
array - 원본 배열(arr).reduce(function(accumulator, currentValue, currentIndex, array)
이제 .reudce 메소드를 써서 새 함수를 작성해 보면,
let result = [1, 2, 3, 4, 5]; // 결과값인 [2, 6, 10]이 나올 배열을 설정하고
let toReduce = result.reduce(function(acc, cur) { // 총 누산할 acc와 현재 요소인 cur을 인자로 받는다.
if (cur % 2 !== 0) { // filter부분 -> 먼저 홀수가 되는 요소들을 filtering 한 후,
acc.push(cur * 2); // map 부분 -> 그 요소들에 2를 곱하여 acc에 push한다.
}
return acc; // filter, map된 최종결과값 acc를 return한다.
}, []) // 초기값은 배열의 형태로 추출할 것이기에 []로 설정console.log 를 찍어보니 결과값이 [2, 6, 10]으로 잘 나오는 것을 확인했다.
Point
reduce는 기본적으로 누산의 역할에 더불어, 최댓값/최솟값을 필터링하거나, 다중배열들을 펼치거나, 객체의 키-값을 할당할 수도 있는 등 매우 다재다능한 메소드이다. 그렇기에 개념적인 부분을 확실히 알아야 함을 배웠고, 문제와 상황에 따라 첫 요소를(여기서는 빈 배열 []) 숫자로, 배열로, 객체로, 설정을 안 할 수도 있는 등 잘 선택해야 함을 느꼈다.
