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

h986680·2020년 11월 27일
0

출저

  • 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)
  1. 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) 

0개의 댓글