A melhor maneira de aprender uma nova linguagem de programação é criando o máximo de projetos possível. Você terá uma experiência mais tranquila como iniciante se criar miniprojetos que se concentrem no que você aprendeu.
O objetivo é evitar o “inferno dos tutoriais” – aquele lugar assustador onde você fica assistindo vários vídeos tutoriais sem ter nenhum projeto concreto para mostrar suas habilidades – e também construir a confiança necessária para enfrentar projetos de maior escala.
Neste artigo, explicarei como você pode criar um sistema de carrinho de compras como iniciante, usando conceitos básicos de Javascript.

Pré-requisitos

Para tentar este projeto, você precisa ter conhecimento profundo de:

• Funções
• Métodos
• Matrizes

O que construir?

O carrinho de compras terá um sistema onde os usuários poderão:

• Adicionar itens ao carrinho
• Remover itens do carrinho
• Ver o conteúdo do carrinho
• Calcule o preço total dos itens no carrinho

Etapa 1: configurando os dados

Para começar, precisamos criar alguns arrays que armazenarão os dados de nossos itens. As matrizes necessárias especificamente são:

• itemNames: especifica o nome de cada item.
• itemPrices: Contém o preço que cada item custa.
• itemQuantities: informa quanto de um item específico está disponível.
• itemInStock: Determina se um item está em estoque através do uso de verdadeiro ou falso.

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

Etapa 2: Construindo o Carrinho de Compras com Funções

Vamos criar uma função principal de carrinho de compras que conterá a lógica do carrinho. Usaremos fechamentos para garantir que o carrinho permaneça privado e apenas determinadas funções possam interagir com ele.

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
  };
};

Para decompor o código:

• addItemToCart(itemIndex): Adiciona um item ao carrinho com base em seu índice (somente se estiver em estoque).
• removeItemFromCart(itemIndex): Remove um item do carrinho usando seu índice.
• getCartItems(): Retorna o nome dos itens no carrinho usando map() para converter os índices em nomes.
• calcularTotal(): Calcula o preço total multiplicando os preços e quantidades dos itens no carrinho usando o método reduzir().

Etapa 3: testando o carrinho de compras

Um projeto finalizado deve ser testado para garantir que funciona conforme necessário. Vamos testar para:

• adicionando itens

• visualizando o carrinho

• verificando o preço total

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

Para decompor o código:

• Criamos uma instância do carrinho de compras chamando-o: const meuCarrinho =carrinhodecompras();.
• Adicionamos itens ao carrinho usando seu índice do array itemNames: meuCarrinho.addItemToCart(0); para o laptop e myCart.addItemTocart(1); para o telefone.
• Usamos getCartItems() para imprimir os nomes dos itens no carrinho
• Finalmente, calculamos o preço total usando calculeTotal().

Passo 4: Removendo Itens do Carrinho

Um bom sistema de carrinho de compras deve permitir que o usuário remova itens do carrinho. Podemos fazer isso chamando 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

Bônus: Compreendendo os fechamentos no sistema de carrinho de compras

Os fechamentos ajudam a matriz do carrinho a permanecer privada, acessível apenas por meio das funções retornadas pela função ShoppingCart().

• O array cart é definido dentro do carrinho de compras() e não pode ser acessado diretamente de fora. No entanto, como as funções addItemTocart(), removeItemFromCart(), getCartItems() e calculaTotal() são definidas dentro do mesmo escopo, elas podem interagir com cart.
• Os encerramentos são um recurso poderoso do JavaScript que ajudam a manter a privacidade e a estrutura dos dados no seu código.

Conclusão

Usando matrizes e funções básicas, você construiu um sistema de carrinho de compras totalmente funcional que pode adicionar, remover e calcular totais de itens. A parte incrível deste projeto é que ele usa fechamentos para encapsular e gerenciar estados sem exigir objetos ou classes complexas.

Código Final

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());

Espero que você tenha gostado de aprender e estou animado para que você construa mais projetos incríveis!