배열과 함수를 사용하여 JavaScript로 초보자 친화적인 장바구니를 구축하기 위한 단계별 가이드-JS 튜토리얼-php.cn

Step-by-Step Guide to Building a Beginner-Friendly Shopping Cart in JavaScript Using Arrays and Functions

새로운 프로그래밍 언어를 배우는 가장 좋은 방법은 가능한 한 많은 프로젝트를 만드는 것입니다. 배운 내용을 중심으로 미니 프로젝트를 만들어보면 초보자로서 더욱 원활한 경험을 할 수 있을 것입니다.
목표는 자신의 기술을 보여줄 구체적인 프로젝트 없이 여러 튜토리얼 동영상을 계속 시청하는 무서운 장소인 '튜토리얼 지옥'을 피하고 대규모 프로젝트를 처리하는 데 필요한 자신감을 키우는 것입니다.
이번 글에서는 기본적인 자바스크립트 개념을 이용하여 초보자가 장바구니 시스템을 만드는 방법을 설명하겠습니다.

전제 조건

이 프로젝트를 시도하려면 다음에 대한 심층적인 지식이 필요합니다.

기능
방법
배열

무엇을 구축할 것인가?

장바구니에는 사용자가 다음을 수행할 수 있는 시스템이 있습니다.

장바구니에 품목 추가
장바구니에서 항목 제거
장바구니 내용 보기
장바구니에 있는 품목의 총 가격 계산

1단계: 데이터 설정

시작하려면 항목에 대한 데이터를 보관할 배열 몇 개를 만들어야 합니다. 구체적으로 필요한 배열은 다음과 같습니다.

itemNames: 각 항목의 이름을 지정합니다.
itemPrices: 각 항목의 가격이 포함됩니다.
itemQuantities: 특정 항목의 사용 가능량이 얼마나 되는지 알려줍니다.
itemInStock: true 또는 false를 사용하여 품목의 재고 여부를 결정합니다.

const itemNames = ["Laptop", "Phone"];
const itemPrices = [1000, 500];
const itemQuantities = [1, 2];
const itemInStock = [true, true];

로그인 후 복사

2단계: 기능을 사용하여 장바구니 구축

장바구니 논리를 포함할 기본 장바구니 기능을 만들 예정입니다. 장바구니가 비공개로 유지되고 특정 기능만 상호 작용할 수 있도록 클로저를 사용할 것입니다.

const ShoppingCart = () => {
  const cart = []; // The cart is a private array
 
  // Add an item to the cart
  const addItemToCart = (itemIndex) => {
    if (itemInStock[itemIndex]) {
      cart.push(itemIndex);
      console.log(`${itemNames[itemIndex]} added to the cart`);
    } else {
      console.log(`${itemNames[itemIndex]} is out of stock`);
    }
  };
 
  // Remove an item from the cart
  const removeItemFromCart = (itemIndex) => {
    const index = cart.indexOf(itemIndex);
    if (index > -1) {
      cart.splice(index, 1);
    }
  };
 
  // Get the names of items in the cart
  const getCartItems = () => {
    return cart.map(itemIndex => itemNames[itemIndex]);
  };
 
  // Calculate the total price of items in the cart
  const calculateTotal = () => {
    return cart.reduce((total, itemIndex) => {
      return total + itemPrices[itemIndex] * itemQuantities[itemIndex];
    }, 0);
  };
 
  return {
    addItemToCart,
    removeItemFromCart,
    getCartItems,
    calculateTotal
  };
};

로그인 후 복사

코드를 분석하려면:

addItemToCart(itemIndex): 색인을 기준으로 장바구니에 항목을 추가합니다(재고가 있는 경우에만).
RemoveItemFromCart(itemIndex): 색인을 사용하여 장바구니에서 항목을 제거합니다.
getCartItems(): 색인을 이름으로 변환하기 위해 map()을 사용하여 장바구니에 있는 항목의 이름을 반환합니다.
계산Total(): Reduce() 메소드를 사용하여 장바구니에 담긴 품목의 가격과 수량을 곱하여 총 가격을 계산합니다.

3단계: 장바구니 테스트

완성된 프로젝트를 테스트하여 필요에 따라 작동하는지 확인해야 합니다. 우리는 다음을 테스트할 예정입니다:

항목 추가
장바구니 보기
총액 확인

const myCart = ShoppingCart();
 
// Add a Laptop (item 0)
myCart.addItemToCart(0);
 
// Add a Phone (item 1)
myCart.addItemToCart(1);
 
// View cart contents
console.log(myCart.getCartItems()); // Output: ['Laptop', 'Phone']
 
// Calculate the total price
console.log(myCart.calculateTotal()); // Output: 2000

로그인 후 복사

코드를 분석하려면:

다음과 같이 호출하여 장바구니 인스턴스를 생성합니다. const myCart = shoppingCart();.
itemNames 배열의 색인을 사용하여 장바구니에 항목을 추가합니다. myCart.addItemToCart(0); 노트북 및 myCart.addItemTocart(1)의 경우; 전화용입니다.
장바구니에 있는 품목의 이름을 인쇄하기 위해 getCartItems()를 사용합니다
마지막으로calculateTotal()을 사용하여 총 가격을 계산합니다.

4단계: 장바구니에서 항목 제거

좋은 장바구니 시스템에서는 사용자가 장바구니에서 상품을 삭제할 수 있어야 합니다. RemoveItemFromCart()를 호출하여 이 작업을 수행할 수 있습니다.

myCart.removeItemFromCart(1); // Remove the Phone
 
// View the updated cart
console.log(myCart.getCartItems()); // Output: ['Laptop']
 
// Recalculate the total price
console.log(myCart.calculateTotal()); // Output: 1000

로그인 후 복사

보너스: 장바구니 시스템의 폐쇄 이해

클로저는 장바구니 배열을 비공개로 유지하는 데 도움이 되며 ShoppingCart() 함수에서 반환된 함수를 통해서만 액세스할 수 있습니다.

장바구니 배열은 장바구니() 내부에 정의되며 외부에서 직접 접근할 수 없습니다. 그러나 addItemTocart(), RemoveItemFromCart(), getCartItems() 및 계산Total() 함수는 동일한 범위 내에 정의되어 있으므로 장바구니와 상호 작용할 수 있습니다.
클로저는 데이터 개인 정보 보호와 코드 구조를 유지하는 데 도움이 되는 JavaScript의 강력한 기능입니다.

결론

기본 배열과 함수를 사용하여 항목의 합계를 추가, 제거 및 계산할 수 있는 완전한 기능의 장바구니 시스템을 구축했습니다. 이 프로젝트의 가장 멋진 부분은 클로저를 사용하여 복잡한 객체나 클래스 없이도 상태를 캡슐화하고 관리한다는 것입니다.

최종 코드

const itemNames = ["Laptop", "Phone"];
const itemPrices = [1000, 500];
const itemQuantities = [1, 2];
const itemInStock = [true, true];
 
const ShoppingCart = () => {
  const cart = [];
 
  const addItemToCart = (itemIndex) => {
    if (itemInStock[itemIndex]) {
      cart.push(itemIndex);
      console.log(`${itemNames[itemIndex]} added to the cart`);
    } else {
      console.log(`${itemNames[itemIndex]} is out of stock`);
    }
  };
 
  const removeItemFromCart = (itemIndex) => {
    const index = cart.indexOf(itemIndex);
    if (index > -1) {
      cart.splice(index, 1);
    }
  };
 
  const getCartItems = () => {
    return cart.map(itemIndex => itemNames[itemIndex]);
  };
 
  const calculateTotal = () => {
    return cart.reduce((total, itemIndex) => {
      return total + itemPrices[itemIndex] * itemQuantities[itemIndex];
    }, 0);
  };
 
  return {
    addItemToCart,
    removeItemFromCart,
    getCartItems,
    calculateTotal
  };
};
 
const myCart = ShoppingCart();
myCart.addItemToCart(0);
myCart.addItemToCart(1);
console.log(myCart.getCartItems());
console.log(myCart.calculateTotal());
myCart.removeItemFromCart(1);
console.log(myCart.getCartItems());
console.log(myCart.calculateTotal());