배열 메소드 filter, map을 reduce만 사용하여 구현하기.

const filterMaped = arr.filter(x => x % 2 !== 0).map(x = x * 2);
console.log(filterMaped);

배열 메소드인 filter와 map을 사용하여 작성된 위 코드를
reduce 하나만 사용해서 작성해보려고 한다.

먼저,
위 코드는 주어진 배열에 홀수만 추출하고 추출된 배열의 각 인덱스에 2를 곱한 배열을 리턴하는 코드이다.

과제가 주어져서 이 코드를 reduce 메소드만을 활용하여 어떻게 작성을 해야되나 고민을 해봤는데
reduce는 하나의 값으로 리턴이 되는 메소드라서 아무리 짱구를 굴려도 reduce만 사용해서 어떻게 해야될지 생각이 안났다.

function onlyReduce(arr) {
    let result = [];
    
    for(let i = 0; i < arr.length; i++){
        if(arr[i] % 2 !== 0) {
            result.push(arr[i] * 2);
        }
    }
    return result;
};

처음에는 이렇게 작성을 했는데 이 함수는 이미 filter와 map이 실행된 결과값을 리턴하는 함수라 reduce 메소도는 아무 의미가 없었다.

그래서 reduce의 작동원리를 생각해봤고 reduce 메소드는 reducer라는 콜백함수를 통해서 누적값을 쌓아가면서 결과값을 리턴하니까 그 콜백함수를 구현해서 reduce 메소드에 넣어주면 될 것 같다는 생각이 들었다.

function onlyReduce(acc, cur) {
    if(cur % 2 !== 0) {
        acc.push(cur * 2);
    }
    return acc;
};

다시 작성한 함수.
함수의 전달인자를 reduce와 동일하게
누적값을 빈배열로 두고 현재값을 배열의 각 인덱스값이라고 생각해보았다.

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

arr.reduce(olnyReduce, []);

위 배열이 주어지고 초기값을 빈배열로 설정하여 reduce를 실행했을 때 순서를 보면
선언된 arr의 0번째 인덱스부터 순서대로 onlyReduce 함수를 거치면서 하나씩 acc 배열에 푸쉬된다.

이 함수를 구현한다고 꽤나 머리를 싸맸는데..
과제 제출하기 마지막에 레퍼런스가 있었다.. 그리고 레퍼런스와 큰 차이가 없는 걸 봤을 때의 그 짜릿함. 하하.