코드 변환(고차함수)

과제

아래 코드를 reduce를 한 번만 사용한 코드를 변경하여 스스로 작성하라

const filterMaped = arr.filter(x => x % 2 !== 0).map(x => x*2);
console.log(filterMaped) // [2, 6, 10]

잠깐만

아니 이 사람들이... 화살표 함수는 가르쳐 준 적 없으면서 과제를 화살표 함수로 내면 ㅠㅠ
역시 MDN을 찾아 이게 무슨 뜻인지 알아보도록 하자.

arr.filter(x => x%2 !== 0)
x는 (x를 2로 나눈 나머지가 0이 아닐 때의 값)

map( x => x*2 )
x는 (x를 2로 곱한 값)

위와 같이 해석할 수 있다. (화살표 함수는 가독성 향상을 위한 ES6 권고사항이라고 한다)

해석

filterMaped변수의 역할을 해석하면
입력받은 인자값(배열)의 각 요소를 2로 나눈 나머지가 0이 아닐 때(홀수일때) 그 값을 filter로 모아 배열을 만들고, filter로 걸러진 배열의 각 요소(홀수인 수)를 2로 곱한 배열이 변수에 저장된다.

코드

let result = [];
arr.reduce(acc, cur) {
    if(cur %2 !== 0) {
      result.push(cur * 2)
    }
}, 0)

1. let result = [];
   먼저 reduce는 본래 목적은 '누산'이기 때문에 map이나 filter처럼 배열을 리턴해주지 않는다. 그래서 먼저 결과를 저장할 빈 배열을 하나 생성해 준다.
2. arr.reduce(acc, cur)
   원래대로 reduce의 누산 기능을 사용하려면 acc(누적값), cur(배열의 요소)를 인자로 넣어야 한다. 하지만 지금 작성하는 코드에서는 '누산'이 필요하지 않기 때문에 acc를 인자로 넣지 않으며, 함수 로직에도 acc는 없다.
3. if(cur % 2 !== 0)
   기존 코드의 조건이다 : 배열의 각 요소를 2로 나누었을 때 나머지가 0이 아닌 수 === 홀수
4. result.push(cur * 2)
   기존 코드의 실행이다 : 2를 곱한 배열 -> 2를 곱한 값을 배열의 뒤에 추가
5. , 0)
   초기값이 없으면 코드가 배열의 처음부터 연산을 시작하지 않고 뒤죽박죽 연산하여 원하는 대로 기능하지 않기 때문에 초기값을 0으로 명시하여 준다.