Лучший способ изучить новый язык программирования — создавать как можно больше проектов. Вам, как новичку, будет легче работать, если вы будете создавать мини-проекты, основанные на том, чему вы научились.
Цель состоит в том, чтобы избежать «учебного ада» — того страшного места, где вы продолжаете смотреть несколько обучающих видеороликов, не имея при этом конкретного проекта, чтобы продемонстрировать свои навыки, — а также укрепить уверенность, необходимую для решения более масштабных проектов.
В этой статье я объясню, как новичку можно создать систему корзин покупок, используя базовые концепции Javascript.

Предварительные условия

Чтобы реализовать этот проект, вам необходимо иметь глубокие знания:

• Функции
• Методы
• Массивы

Что построить?

В корзине покупок будет система, позволяющая пользователям:

• Добавить товары в корзину
• Удалить товары из корзины
• Просмотреть содержимое корзины
• Рассчитать общую стоимость товаров в корзине

Шаг 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() для преобразования индексов в имена.
• CalculateTotal(): вычисляет общую цену путем умножения цен и количества товаров в корзине с использованием метода уменьшения().

Шаг 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() для печати названий товаров в корзине
• Наконец, мы вычисляем общую цену с помощью метода CalcultTotal().

Шаг 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() и CalculateTotal() определены внутри одной области видимости, они могут взаимодействовать с корзиной.
• Замыкания — это мощная функция 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());

Надеюсь, вам понравилось учиться, и я очень рад, что вы сможете создавать еще больше потрясающих проектов!