[Javascript] map vs filter vs reduce

for문 대신 map을 사용할 수 있다.

const people = [
	{ name: 'effy', age: 13},
	{ name: 'kim', age: 7},
   	{ name: 'cathy', age: 21},
	{ name: 'moro', age: 28},
	{ name: 'jamonda', age: 32}
]

// for
let names1 = [];
for (const person of people) {
	names1.push(person.name);
}
console.log(names1);

// map
const names2 = people.map((person) => person.name)
console.log(names2);

names1과 names2는 같다.

 

값 반환에 조건이 필요한 경우 filter를 사용할 수 있다.

// for
let orderThan20 = [];
for (const person of people) {
	if (person.age > 20) names.push(person)
}

// filter
const orderThan20 = people.filter((person) => person.age > 20)
console.log(orderThan20);
// [{name: "cathy", age: 21}, {name: "moro", age: 28}, {name: "jamonda", age: 32}]
// 둘 다 같은 값을 반환한다.

값을 줄여나가는 함수가 필요하다면 reduce를 활용할 수 있다.

const price = [500, 1000, 700]

// for
let totalPrice = 0;
for (const n of price) {
totalPrice += n
}
console.log(totalPrice); // 2200

// reduce
totalPrice = 0;
price.reduce((totalPrice, price) => totalPrice + price)
console.log(totalPrice); // 2200

 

이렇게 정리할 수 있다.

반복을 돌며

- 특정 필드를 뽑아내고 싶을 때 => map

- 조건에 맞는 갚을 뽑아내고 싶을 때 => filter

- 수행하면서 값을 축약하고 싶을 때 => reduce