TIL.25 map() / filter() / reduce()

출저

• MDN
• 위코드 강의자료 (준님 세션 쵝오)

Callback 함수란

• 콜백함수는 파라미터로 함수를 전달하는 함수이다. 그리고 전달받은 그 함수를 함수의 내부에서 실행시킨다.
• 콜백함수는 전달 받은 즉시 바로 실행이 될 필요가 없고, 함수 내부의 어느 특정시점에 실행한다.
• 아래서 알아볼 메서드들은 공통적으로 콜백 함수를 통해 각 요소에 대한 정보를 주는 것으로 간단히 해석하면 된다.

1. map()

• map 메서드는 배열을 일괄적으로 바꿔 새로운 배열을 리턴한다.

let arr = ['foo', 'hello', 'diamond', 'A'];

let mapArr = arr.map(num => num.length);
console.log(mapArr);
//[ 3, 5, 7, 1 ] 
//원본배열 자리를 그대로 반환.

• 앞서 map() 과 forEach()를 비교한 내용이 이미 있으니 참고 하도록 한다.

2. filter()

• filter() 메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 r기존의 요소를 새로운 배열로 반환한다.
• 중요한 점은 값이 boolean이라는 것인데 true 요소만 모아서 리턴하고 false값은 버린다.
• 배열의 모든 요소가 false값을 가진다면 빈 배열이 반환된다.

let filterArr = arr.filter(num => num.length > 4 )
console.log(filterArr)
//[ 'hello', 'diamond' ]
//새로운 변수에 할당에 주었지만 콜백함수에 true값을 가진 기존의 요소들이 배열로 리턴되었다.

• filter라는 이름 그대로 기존의 요소들을 반환하기 때문에 배열이나 객체에서 필요한 값을 필터하여 갖고 올때 유용하게 쓰인다.

3. reduce()

• reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환한다.
• 리듀서 함수(콜백함수)는 네 개의 인자를 가진다.

  누산기accumulator (acc)
  현재 값 (cur)
  현재 인덱스 (idx)
  원본 배열 (src)

배열.reduce((누적값, 현잿값, 인덱스, 요소) => { return 결과 }, 초깃값);

let arr2 = [1, 2, 3];
let reduceArr = arr2.reduce((a, b, c) => {
  console.log(a, b, c)
  return a + b
} , 0);
//0 1 0
//1 2 1
//3 3 2
//a: 누적되는 값 / b: 현재의 값 / c: 인덱스
//reduce메서드의 콜백함수 다음으로 초기값(initial value)이라는 인자가 올수 있는데 
//초기값이 있으면 초기값이=누적값 으로 들어가서 시작하고,
//초기값이 없으면 배열첫번째값=누적값 으로 들어가서 시작한다.
let reduceArr = arr2.reduce((a, b, c) => {
  console.log(a, b, c)
  return a + b
});
//1 2 1
//3 3 2
//초기값이 없으므로 인덱스 1이 누적값으로 바로 들어간다.

정리(MDN 의 어려운 말로 정리하자면...)

• 만약 reduce() 함수 호출에서 initialValue를 제공한 경우, accumulator는 initialValue와 같고 currentValue는 배열의 첫 번째 값과 같습니다.
• initialValue를 제공하지 않았다면, accumulator는 배열의 첫 번째 값과 같고 currentValue는 두 번째와 같습니다.

3. reduce() 조금 더 보기

• reduce() 메서드는 다른 메서드들과 복합적으로 쓰여 map()과 filter() 와 같이 구현할 수도 있는 유연하고 강력한 메서드라고 불린다.

1. map() 과 같이 구현.

let arr2 = [1, 2, 3]
let reduceArr2 = arr2.reduce((acc, cur) => {
  acc.push(cur % 2 ? '홀수' : '짝수')
  return acc
}, [])
console.log(reduceArr2)
//[ '홀수', '짝수', '홀수' ] 결과값은 같다.
let mapArr2 = arr2.map(a => a % 2 ? '홀수' : '짝수')
console.log(mapArr2)

2. filter() 과 같이 구현.

let arr2 = [1, 2, 3]
let reduceArr2 = arr2.reduce((acc, cur) => {
  if (cur % 2) acc.push(cur)
  return acc
}, [])
console.log(reduceArr2)
//[1, 3] 결과값 같다.
let filterArr2 = arr2.filter(a => a % 2)        
console.log(filterArr2)