'this' 키워드를 사용하여 자바스크립트 쇼핑 카트 구현 방법

18 Sep 2023

javascript

자바스크립트를 사용하여 쇼핑 카트를 구현할 때, ‘this’ 키워드는 매우 유용한 도구입니다. ‘this’ 키워드는 현재 실행 중인 객체를 참조하는 용도로 사용됩니다. 쇼핑 카트에서는 이를 활용하여 상품 추가, 삭제, 수량 변경 등 다양한 기능을 구현할 수 있습니다.

1. 쇼핑 카트 객체 생성하기

먼저, 쇼핑 카트를 표현하는 객체를 생성해야 합니다. 이 객체에는 쇼핑 카트에 담긴 상품들의 정보를 저장하고 관리하는 메서드들이 포함되어 있어야 합니다. 다음은 쇼핑 카트 객체의 예시입니다.

function ShoppingCart() {
  this.items = []; // 쇼핑 카트에 담긴 상품들을 저장하는 배열

  // 상품 추가
  this.addItem = function(item) {
    this.items.push(item);
  };

  // 상품 삭제
  this.removeItem = function(item) {
    var index = this.items.indexOf(item);
    if (index !== -1) {
      this.items.splice(index, 1);
    }
  };

  // 총 가격 계산
  this.getTotalPrice = function() {
    var total = 0;
    for (var i = 0; i < this.items.length; i++) {
      total += this.items[i].price;
    }
    return total;
  };
}

2. 상품 객체 생성하기

다음으로는 쇼핑 카트에 담길 상품을 표현하는 객체를 생성해야 합니다. 각 상품은 이름, 가격 등의 속성을 가지고 있어야 합니다. 다음은 상품 객체의 예시입니다.

function Item(name, price) {
  this.name = name;
  this.price = price;
}

3. 쇼핑 카트 기능 사용하기

이제 쇼핑 카트를 사용해보겠습니다. 다음은 쇼핑 카트 객체를 생성하고 상품을 추가하는 예시입니다.

var cart = new ShoppingCart();

var item1 = new Item('Apple', 5);
var item2 = new Item('Banana', 3);

cart.addItem(item1);
cart.addItem(item2);

4. 기능 테스트하기

생성한 쇼핑 카트의 기능을 테스트해봅시다. 쇼핑 카트에 담긴 상품들의 정보를 출력하고, 총 가격을 계산하여 출력하는 예시 코드는 다음과 같습니다.

console.log(cart.items); // 쇼핑 카트에 담긴 상품들 출력
console.log(cart.getTotalPrice()); // 총 가격 출력

마치며

이렇게 ‘this’ 키워드를 사용하여 자바스크립트 쇼핑 카트를 구현할 수 있습니다. ‘this’ 키워드를 적절하게 활용하면 코드의 가독성과 유지 보수성을 높일 수 있습니다. 쇼핑 카트 외에도 다양한 객체 지향 프로그래밍에서 ‘this’ 키워드를 사용할 수 있으니 활용해보세요!

#JavaScript #쇼핑카트 #자바스크립트