[js] javascript Array Methods

🎩 자바스크립트 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 },
]

---

1. 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 }]

---

🎁 i.g > JSON에서 무효한 항목 거르기

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

---

2. 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']

---

3. array.forEach() -> for loop

// for loop과 같이 배열 전체를 하나씩 돌려줌

items.forEach((item) => {
  console.log(item.price);
});

---

4. array.reduce() -> return ...

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);

---

5. array.find() -> return ...

// 조건에 맞는 첫번째 요소를 반환

const foundItem = items.find((item) => {
  return item.name === "Book";
});

console.log("foundItem: ", foundItem);

---

6. array.some() -> boolean

// 조건에 부합하는 요소 유무에 따라 true / false 반환

const hasExpensiveItems = items.some((item) => {
  return item.price >= 500;
});

console.log("has expensive item: ", hasExpensiveItems);

---

7. array.every() -> boolean

// 모든 요소가 조건에 부합해야만 return true

const isCheapItems = items.every((item) => {
  return item.price <= 200;
});

console.log("everything is cheap: ", isCheapItems);

---

8. array.includes() -> boolean

// value가 있는지 없는지 체크

// price 숫자 배열을 만듬
const price = items.map((item) => item.price);
const includes200 = price.includes(200);

console.log("includes200: ", includes200);

---

참고. [ Web Dev Simplified ]