배열을 순회하며 각 요소에 대하여 이전의 콜백함수 실행 반환값을 전달하여 콜백함수를 실행하고 그 결과를 반환한다.
reduce를 호출할 때는 언제나 초기값을 전달하는 것이 보다 안전하다.
const products = [
{ id: 1, price: 100 },
{ id: 2, price: 200 },
{ id: 3, price: 300 }
];
// 프로퍼티 값을 합산
const priceSum = products.reduce(function (pre, cur) {
console.log(pre.price, cur.price);
// 숫자값이 두번째 콜백 함수 호출의 인수로 전달된다. 이때 pre.price는 undefined이다.
// !!질문 왜 리턴값이 숫자가 아니고 undefined를 반환해??
return pre.price + cur.price;
});
console.log(priceSum); // NaN
array.some VS array.every
some은 배열 중 하나 이상 콜백함수에 충족할 경우 true 값을 반환하며, every은 배열 모두가 콜백함수에 충족해야 true 값을 반환
array.filter VS array.find
filter와 find의 기능은 if문과 같다
filter는 콜백함수의 실행 결과가 true인 배열 요소의 값만을 추출한 새로운 배열을 반환한다. 따라서 filter의 반환값은 언제나 배열이다. 하지만 find는 콜백함수를 실행하여 그 결과가 참인 첫번째 요소를 반환하므로 find의 결과값은 해당 요소값이다.
const users = [
{ id: 1, name: 'Lee' },
{ id: 2, name: 'Kim' },
{ id: 2, name: 'Choi' },
{ id: 3, name: 'Park' }
];
// 콜백함수를 실행하여 그 결과가 참인 첫번째 요소를 반환한다.
let result = users.find(function (item) {
return item.id === 2;
});
// ES6
// const result = users.find(item => item.id === 2;); 이렇게도 가능
// Array#find는 배열이 아니라 요소를 반환한다.
console.log(result); // { id: 2, name: 'Kim' }
// Array#filter는 콜백함수의 실행 결과가 true인 배열 요소의 값만을 추출한 새로운 배열을 반환한다.
result = users.filter(function (item) {
return item.id === 2;
});
console.log(result); // [ { id: 2, name: 'Kim' },{ id: 2, name: 'Choi' } ]