🎩 자바스크립트 Array는 여기저기 항상 등장하므로(특히 api로 받아온 json은 양이 상당하다) Array가 갖고 있는 메소드를 정리해 놓는게 좋을 듯 하다.
filter()
,map()
,forEach()
,reduce()
,find()
,some()
,every()
,includes()
에 대해 알아보자!
# array items
const items = [
{ name: 'Bike', price: 100 },
{ name: 'TV', price: 200 },
{ name: 'Album', price: 10 },
{ name: 'Book', price: 5 },
{ name: 'Phone', price: 500 },
{ name: 'Computer', price: 1000 },
{ name: 'Keyboard', price: 25 },
{ name: 'Book', price: 8 },
]
Array.prototype.filter()
-> return ...
filter()
메서드는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환
- 📋 구문
arr.filter(callback(element[, index[, array]])[, thisArg])
// price가 100이하인 요소만 반환
const filteredItems = items.filter((item) => {
return item.price <= 100
})
console.log("filteredItems: ", filteredItems);
// filteredItems:
// [{ name: "Bike", price: 100 },
// { name: "Album", price: 10 },
// { name: "Book", price: 5 },
// { name: "Keyboard", price: 25 },
// { name: "Book", price: 8 }]
const arr = [
{ id: 15 },
{ id: -1 },
{ id: 0 },
{ id: 3 },
{ id: 12.2 },
{ },
{ id: null },
{ id: NaN },
{ id: 'undefined' }
];
let invalidEntries = 0;
function isNumber(obj) {
return obj !== undefined && typeof(obj) === 'number' && !isNaN(obj);
};
function filterByID(item) {
if (isNumber(item.id) && item.id !== 0) {
return true;
}
invalidEntries++;
return false;
};
let arrByID = arr.filter(filterByID);
console.log('Filtered Array\n', arrByID);
// Filtered Array
// [{ id: 15 }, { id: -1 }, { id: 3 }, { id: 12.2 }]
console.log('Number of Invalid Entries = ', invalidEntries);
// Number of Invalid Entries = 5
Array.prototype.map()
-> return ...
map()
메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환 -> ✨for loop
과 비슷한 동작을 한다.
- 📋 구문
Array.map(callback(currentValue[, index[, array]])[, thisArg])
// items의 name만 있는 배열 반환
const itemNames = items.map((item) => {
return item.name
})
console.log("itemNames: ", itemNames);
// itemNames: ['Bike', 'TV', 'Album', 'Book', 'Phone', 'Computer', 'Keyboard', 'Book']
// for loop과 같이 배열 전체를 하나씩 돌려줌
items.forEach((item) => {
console.log(item.price);
});
const total = items.reduce((acc, cur) => acc + cur)
acc : accumulate, cur : current value
// 배열 전체 합산하기 좋다
const total = items.reduce((accumulate, item) => {
return item.price + accumulate;
}, 0);
console.log("total: ", total);
// 조건에 맞는 첫번째 요소를 반환
const foundItem = items.find((item) => {
return item.name === "Book";
});
console.log("foundItem: ", foundItem);
// 조건에 부합하는 요소 유무에 따라 true / false 반환
const hasExpensiveItems = items.some((item) => {
return item.price >= 500;
});
console.log("has expensive item: ", hasExpensiveItems);
// 모든 요소가 조건에 부합해야만 return true
const isCheapItems = items.every((item) => {
return item.price <= 200;
});
console.log("everything is cheap: ", isCheapItems);
// value가 있는지 없는지 체크
// price 숫자 배열을 만듬
const price = items.map((item) => item.price);
const includes200 = price.includes(200);
console.log("includes200: ", includes200);