추가 과제(2) - 코드 변환(고차함수)

<래퍼런스 코드>

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

<Reduce 메소드를 사용한 코드 작성>

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

let newArr = [1, 2, 3, 4, 5];
let result = newArr.reduce(function (acc, val) {
   if (val % 2 === 1) {
      acc.push(val * 2);
      return acc;
}, 0);

<코드 분석>

const filterMaped = arr.filter(x => x % 2 !== 0).map(x => x * 2);
console.log(filterMaped) // [2, 6, 10]
// filter 와 map 메소드를 같이 사용해서 새로운 arr 을 만들어눠야한다.
// filter 메소드를 사용해 해당 입력된 숫자중에 홀수만을 분리해준 후 map 메소드를 통해 2배로 만들어 준다.
// [1, 3, 5] 요소들을 가져온다면 console.log 를 통해 [2, 6, 10] 의 요소들이 출력된다.

let newArr = [1, 2, 3, 4, 5];
// 새 배열에 입력된 요소를 정해준다.
let result = newArr.reduce(function (acc, val) {
// reduce 메소드를 통해 callback 함수를 실행하기 위해 배열의 각 요소들을 확인해 준다.
if (val % 2 === 1) {
acc.push(val * 2);
// if문을 사용하여 홀수/짝수 여부를 확인한 후 홀수인 경우 기존 값에 2를 곱한 수를 push 시켜준다.
return acc;
// 마지막으로 테스트가 끝난 후 결과값을 리턴시켜준다.
}, 0);

<코드 분석>

reduce 메소드는 어떠한 새로운 연산을 하기위해 입력 데이터 형식의 구조를 변경할 수 있다는 것을 의미한다. 위와 같은 경우에도, reduce 메소들를 통해 기존 배경에 해당되는 요소들을 순회하며 총 누적값을 가져와 준다.

예시) 특정한 인물의 정보(이름, 나이, 주소, 등)를 찾으려고 할때 이 방법을 사용할 수 있다. 많이 쌓아놓은 정보중에서 reduce 메소드를 사용한다면 내가 찾을려고하는 특정한 인물에 대한 정보를 찾기 위해 다른 불필요한 정보들과 분리를 시켜 보여준다.

<느낀점>

이 문제를 풀기위해 underscore.js 의 메소드를 다시한번 복습을 할 필요가 있었다. 각 메소드의 역할을 좀 더 확실히 이해한 후 문제를 보니깐 생각보다 이해하기 훨씬 수월했다. 그렇다고 쉽다는건 아니다. 그러고 전에도 말했지만, 그렇게 한줄씩 코드를 천천히 작성하다보니 길이 보이는 듯 했다. 전체의 숲을 보는것도 중요하지만, 때로는 그 안에 나무 한 그루씩 확인해주는것도 참 좋은 방법이라 생각한다.