[자바스크립트] filter(), reduce()

filter()

 

filter 함수는 콜백 함수의 조건에 해당하는 모든 요소가 있는 배열을 새로 생성한다.

 

let newArr = arr.filter(callbackFunction (element, index, array), thisArg);

 

filter 함수의 매개변수는 콜백 함수와 thisArg이다. thisArg는 filter에서 사용될 this이고, thisArg를 사용하지 않는 경우 undefined가 전달된다. 콜백 함수의 매개 변수는 element, index, array 3 가지이다.

 

element : value 값

index : value의 인덱스 값

array : filter에서 사용되는 배열 객체

 

let arr = [1,2,3,4]

let newArr = arr.filter(function (e,i){
    console.log(e, i);
});
// 1 0
// 2 1
// 3 2
// 4 3

 

e(element)에는 순회하는 배열의 값이, i(index)에는 그 값의 인덱스가 담겨 출력된다.

 

let arr = [1,2,3,4]

let brr = arr.filter(function (e){
    if(e>2) return true
});
// brr = [3,4]

 

콜백 함수에 조건문을 넣고 filter 함수를 실행하면 해당 조건에 맞는 결과로 새로운 배열이 brr에 담기게 된다.

 

---

reduce()

 

reduce 함수는 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과를 반환한다.

 

let sum = arr.reduce(callbackFunction (previousValue, currentValue, currentIndex, array), initialValue);

 

reduce 함수의 매개변수는 콜백 함수와 initialValue이다. initialValue는 콜백 함수를 호출할 때, 처음 previousValue 값으로 사용될 값이다. initialValue를 사용하지 않는 경우, previousValue의 값은 사용될 배열의 첫 번째 값이다. 콜백 함수의 매개변수는 previousValue, currentValue, currentIndex, array 4 가지이다.

 

previousValue : 배열의  첫번째 인자, initialValue가 있는 경우 initialValue

currentValue : 배열 내 현재 처리되고 있는 값

currentIndex : 배열 내 현재 처리되는 있는 값의 인덱스

array : 호출된 배열

 

reduce 함수를 통해 배열의 합계를 구할 수 있다.

 

let arr = [1,2,3,4,5]

let sum = arr.reduce((prev, cur) => prev + cur);
// sum = 15