자바스크립트 filter, reduce 사용법
들어가기 전
회사에서 JS로 된 코드를 수정하는 중 리뷰를 받는 코드에 if 문으로 특정 조건 만족 유무를 판단 후 특정 조건을 만족하는 경우에만
더해주는 로직이 있었는데 filter를 사용하면 좋을 거 같다는 리뷰를 받았었다.
자바에서도 filter 을 종종 사용했었는데?라는 생각이 들었고 합계 또한 filter처럼 자바스크립트에서 제공해 주는 함수가 있을 거 같아 살펴보았다. (reduce)
filter 사용법
filter: 조건으로 주어진 함수에서 true 로 반환되는 요소를 모아 새로운 배열로 반환하는 함수이다.
Array.filter()로 사용할 수 있다.
arrays.filter(callback(element,index,array), thisArg);callback: callback함수에 정의된 조건에서 true를 반환하면 해당 요소는 새로운 배열에 포함되고 false 가 반환된다면 새로 반환될 배열에서 포함되지 않습니다.
thisArg: callback 을 실행할 때 this로 사용하는 값
callback 함수에서 사용할 수 있는 3가지 매개변수
1. element: arrays 배열에서 callback 함수가 처리하는 현재요소
2. index: 처리할 arrays 의 인덱스
3. array: 필터를 호출한 배열
filter 사용 예
주어진 배열에서 홀수만 반환되도록 하는 filter함수를 정의해 보자
reduce 사용법
reduce: 각 요소에 대해 주어진 함수를 실행하고, 하나의 결과값을 반환한다.
arr.reduce(callback(accumlator,currentValue,currentIndex,array),initalValue);callback: 각 요소에 대해 실행할 함수
initialValue: callback의 최초 호출에서 첫 번째 인수에 제공하는 값, 초기값을 제공하지 않는다면 배열의 첫 번째 요소를 사용
callback 함수에서 사용할 수 있는 4가지 매개변수
1. accumulator: 콜백의 반환 값을 누적하는 요소, 콜백의 첫번째 호출이면서 initalValue를 제공했다면 initialValue의 값이다.
2. currentValue: 처리할 현재 요소
3. currentIndex: 처리할 현재 요소의 인덱스, initialValue 를 제공한 경우 0부터. 제공하지 않았을 경우 1부터 시작한다.
4. array: reduce 를 호출한 배열
initialValue의 설명 중 초기값을 제공하지 않는다면 배열의 첫 번째 요소를 사용한다는 것이 무슨 말일까?
accumulator 설명과 관련이 있다.
initialValue 값이 제공된 경우
맨 처음 acc 값을 보면 0 즉 initialValue 값으로 제공된 0의 값으로 초기화된 것을 볼 수 있다.
curIndex 도 initialValue를 제공했기 때문에 맨 앞 인덱스인 0부터 시작되는 것을 알 수 있다.
initialValue 값이 제공되지 않은 경우
acc 값을 보면 1 즉 reduce 함수를 호출한 배열의 맨 처음 값 1로 초기화된 것을 볼 수 있다.
curIndex 도 initialValue 가 제공되지 않았기 때문에 1부터 시작된 것을 볼 수 있다.