콘솔에 찍어보는 초간단 장바구니 리스트 프로젝트

<aside> ☝ 목차

</aside>

1. 장바구니 리스트를 담을 carts 배열 생성

let carts = [];

2. addCart 함수 생성

기본 로직

1. addCart의 파라미터로는 id, name, price, quantity를 받을 것
2. index 변수를 생성 후 carts 배열에 추가하고자 하는 상품의 id가 carts에 있는지 확인 후 할당
3. 만약 index가 -1이면, 즉 해당 상품의 id가 존재하지 않는다면 정상적으로 아이템을 추가
4. index가 -1이 아니라면, 즉 해당 상품의 id가 이미 존재한다면 가격은 덮어쓰기, 갯수는 추가하는 로직으로 작성할 것임
5. 콘솔에 보여주기 위해서 displayCart() 함수 호출 (아직 만들지 않았음)

function addCart(id, name, price, quantity) {
  const index = carts.findIndex((cart) => cart.id === id);

  if (index === -1) {
    carts.push({ id, name, price, quantity });
  } else {
    carts[index].price = price;
    carts[index].quantity += quantity;
  }

  displayCarts();
}

3. displayCarts 함수 생성

기본 로직

1. 콘솔에 계속 출력을 해볼테니 먼저 '장바구니 목록: ‘ 이라는 내용을 출력
2. carts 배열에 forEach를 활용해서 콘솔에 아래와 같은 양식으로 출력 1: 사과 - 5000원, 수량: 4개 2: 바나나 - 2000원, 수량: 7개

function displayCarts() {
  console.log('장바구니 목록: ');
  carts.forEach((cart) => {
    console.log(
      `${cart.id}: ${cart.name} - ${cart.price}원, 수량: ${cart.quantity}개`
    );
  });
}

displayCarts를 구현 했으니 addCart를 활용해서 아래 내용을 추가해보면

addCart(1, '사과', 1000, 3);
addCart(2, '바나나', 2000, 7);
addCart(3, '딸기', 8000, 12);

콘솔에 출력되는 모습은 아래와 같다

장바구니 목록: 1: 사과 - 1000원, 수량: 3개 2: 바나나 - 2000원, 수량: 7개 3: 딸기 - 8000원, 수량: 12개

여기에 만약 현재 존재하는 1번 사과의 가격과 갯수를 달리 한다면 가격은 5000원으로 업데이트, 갯수는 3개에서 1개가 추가된 4개가 출력될 것이다.

addCart(1, '사과', 5000, 1);

콘솔에 출력되는 모습은 아래와 같다

장바구니 목록: 1: 사과 - 5000원, 수량: 4개 2: 바나나 - 2000원, 수량: 7개 3: 딸기 - 8000원, 수량: 12개