[기수 이동] TIL 4일차

2. 코드 변환(고차함수)

1) 아래 코드를 'reduce를 한 번만 사용한 코드'로 변경하여 스스로 작성해보고,
2) 코드의 각 키워드가 무슨 의미인지 코드 한 줄씩(line by line) 그 과정을 직접 설명하되,
3) 이 메소드가 어떤 역할을 수행하며 언제 왜 필요한지 덧붙여 설명하기

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

1)  'reduce를 한 번만 사용한 코드'로 변경

//TODO
// 1. 배열의 요소 중 홀수인 것을 고르고
// 2. 그 요소에 2를 곱한 값을 요소로 갖는 배열을 리턴
let newArr = [];
const reduced = arr.reduce(function(acc,cur){
if(cur % 2 !== 0) {
newArr.push(cur * 2)}
return newArr}
.0)

2) 
  (1)우선 원래의 코드를 살펴보면 
   - 변수 filterMaped 는 arr.filter(x => x % 2 !== 0) // 배열에서 홀수인 것을 골라
   - .map(x => x * 2)// 그 값에 2를 곱한 값을 배열로 갖는다
  (2) 그러므로 'reduce를 한 번만 사용한 코드'로 변환하기 위해선 
   - 우선 .reduce()는 배열의 각 요소를 특정 응축 방법(함수)에 따라 원하는 하나의 형태로 
   응축(reduction)한다.
   - 그러므로, .reduce() 되기 위한 배열의 요소가 홀수라는 조건을 충족 시키기 위해 
    .reduce()에 올 수 있는 4가지 인자 중 acc, cur를 받고, 배열의 인덱스 초기값을 0으로 설정한 뒤
   - if 조건문을 통해 현재의 값(cur) 중에서 홀수인 것을 고르고
   - .push(cur * 2)를 통해 해당 홀수에 2를 곱한 값으로만 이루어진 새로운 배열을 반환한다
   
3) 각각의 배열 메소드는 다음과 같은 특징을 갖고 있는데,
- .map(): 원하는 것만 가져올 수 없고 하나의 계산으로 모든 요소에 영향을 준다.
- .filter(): 차려진 것 중에서 조건을 통해 원하는 것만 가져오고 원하지 않는 건 가져오지 않을 수 있다.
- .reduce(): 하나의 초기값을 시작으로 어떠한 반복된 계산을 통해 마지막 요소까지 누적한 값을 반환한다.
  
  이 때, .reduce()를 사용하는 이유는 
  (1) .filter()과 .map() 또는 두 가지가 체이닝 된 상황에도
     .reduce()를 통해 더 쉽고 간결하게 코드를 풀어낼 수 있을 뿐 아니라, 
   (2) .filter()와 .map()이 배열만 리턴하는 데에 반해 .reduce()는 배열을 입력 받아도 
   문자열, 객체 등을 반환할 수 있다는 이점을 갖고 있기 때문이다.