[JS] array 배열 메소드 활용 : filter, reduce, find

 

 

🥹 연습으로.. 간단하게 몇개 적어두겠다!

 

function createItem(name, price) {
  return {
    name,
    price,
  };
}

const items = [
  createItem("computer", 2100),
  createItem("tv", 1800),
  createItem("book", 15),
  createItem("phone", 1600),
  createItem("coffee", 5),
  createItem("keyboard", 200),
  createItem("mouse", 140),
];

 

💡 filter() : 가격이 300 이하인 아이템 배열 구하기

const result = items.filter((item) => item.price <= 300);
console.log(result);

 

💡 reduce() : 아이템들의 총 가격 구하기

acc : 누적 값 (초기에 0)

cur : 현재 값 (더할 값)

0 : 초기 값 설정

const totalPrice = items.reduce((acc, cur) => {
  return acc + cur.price;
}, 0);
console.log(totalPrice); // 5860

 

💡 find() : 특정 이름 (key) 의 아이템 찾기

const foundBook = items.find((item) => item.name === "book");
console.log(foundBook); // {name: 'book', price: 15}

➕ 리스트 만들어 html 에 넣기

const itemList = document.getElementById("itemList");
items.forEach((item) => {
  const li = document.createElement("li");
  li.textContent = `이름: ${item.name} / 가격: ${item.price}`;

  itemList.appendChild(li);
});