[문법] filter() , map() , reduce () 함수 / JavaScript

서론

자바스크립트로 배열문제를 풀 때 가장 많이 보이고 쓰이는 함수로 filter, map, reduce가 있다. for문과 마찬가지로 배열 내 인자들을 차례로 순회할 때 사용하는데, for문에 너무 익숙해져 있는 탓인지 저 함수들을 이용하면 코드가 엄청 간결해지는 걸 알면서도 쉽게 사용을 못하고 있다. 그래서 이 참에 제대로 한번 정리하고 사용법을 익히기 위해 세 함수에 대한 정리를 해봐야겠다!

 

본론

세 함수의 공통점

• 모두 ES6문법에서 추가된 메소드이다
• 배열(Array) 타입에서 사용하며 배열의 각 요소들을 매개변수로 받아 작동한다
• 기본적으로 순차적으로 값들을 접근한다는 개념이 내포돼 있기 때문에 for문이 가진 순회를 별다른 코드를 작성하지 않고도 사용할 수 있게 한다는 장점이 있다

 

filter() 함수

• 배열 각 요소에 대해 주어진 함수의 결과값이 true인 요소를 모아 새로운 배열로 반환하는 메소드
• 오직 boolean 타입만 반환하며 return 값이 true인 경우에만 새로운 배열에 추가하기 때문에 중복 제거처럼 조건에 맞는 특정한 요소들만 새로운 배열에 넣고 싶을 때 사용하기 적합하다
• 3개의 매개변수 (index, array는 필수 입력 요소가 아님)
  1. value : 현재의 요소
  2. index : 요소의 index
  3. array : filter() 함수가 적용될 기존의 배열

• const ex = [1,2,3,4,5]; 
  const ex_filter = ex.filter(i => i > 3); 
  
  //결과 : [4, 5]

 

map() 함수

• 배열 각 요소에 대해 주어진 함수를 수행한 결과를 모아 새로운 배열로 반환하는 메소드
• 배열의 요소들에 일괄적으로 함수를 적용(같은 조건을 적용)하고 싶을 때 사용하기 적합하다
• 3개의 매개변수 (index, array는 필수 입력 요소가 아님)
  1. value : 현재의 요소
  2. index : 요소의 index
  3. array : map() 함수가 적용될 기존의 배열

• const ex = [1,2,3,4,5];
  const ex_map = ex.map(i => i*2);
  
  //결과 : [2, 4, 6, 8, 10]

 

reduce() 함수

• 배열 각 요소에 대해 주어진 함수를 수행한 결과의 배열이 아닌 하나의 결과값으로 반환하는 메소드
• 이 함수의 가장 큰 특징은 다른 함수들과 달리 누적값이라는 매개변수가 포함된다. 쉽게 말해 reduce에 주어진 함수를 수행하면서 생기는 값들을 임시적으로 계속해서 보관하는 형태이다
• 예를 들어, reduce 함수를 이용해서 배열의 모든 원소를 더하고 싶을 때, 0 ~ n 번째 까지의 요소 값들을 계속해서 누적하여 더해나가서 결과적으로 최종 누적값을 결과로 반환한다 (그래서 reduce를 덧셈 함수로 많이들 알고 있다)
• 또 이 함수의 특징으로는 초기값을 설정할 수 있다는 것이다. 초기값으로는 숫자뿐만 아니라 배열 등등 다양한 형태로 입력할 수 있다. 위의 예시를 들어 초기값을 5로 설정했다면 5 + 0번째 값, (5 + 0번째 값) + 2번째 값 ... 이런 식으로 누적해 나가는 것이다.  
• 4개의 매개변수 (currentIndex, array는 필수 입력 요소 아님)
  1. acc (accumulator) : 리턴한 값을 저장하는 변수, 초기값을 지정한 경우에는 설정한 초기값부터 시작
  2. cur (currentValue) : 현재의 요소
  3. currentIndex : 요소의 index
  4. array : map() 함수가 적용될 기존의 배열

• const ex = [1,2,3,4,5];
  const ex_reduce = ex.reduce((acc, cur) => {
      console.log(acc, cur);
      return acc + cur;
  }, 5);
  
  // 결과
  // 5 1
  // 6 2
  // 8 3
  // 11 4
  // 15 5
  // 20 << 최종값

• 또한, 위에 작성한 filter, map 과 같은 함수형 메소드를 reduce 만으로 구현할 수 있다

• const ex = [1,2,3,4,5];
  const ex_filter_reduce = ex.reduce((acc, cur) => {
      if (cur > 3) {
          acc.push(cur);
      }
      return acc;
  }, []) //초기값을 배열로 둠
  
  //결과 : [4, 5]
  
  ------------------------------------------------------
  
  const ex = [1,2,3,4,5];
  const ex_map_reduce = ex.reduce((acc, cur) => {
      acc.push(cur * 2);
      return acc;
  }, []) //초기값을 배열로 둠
  
  //결과 : [2, 4, 6, 8, 10]