La mejor manera de aprender un nuevo lenguaje de programación es creando tantos proyectos como sea posible. Tendrás una experiencia más fluida como principiante si creas miniproyectos que se centren en lo que has aprendido.
El objetivo es evitar el "infierno de los tutoriales", ese lugar aterrador en el que sigues viendo varios vídeos tutoriales sin tener ningún proyecto concreto para demostrar tus habilidades, y también generar la confianza necesaria para abordar proyectos de mayor escala.
En este artículo, explicaré cómo puedes crear un sistema de carrito de compras como principiante, utilizando conceptos básicos de Javascript.

Requisitos previos

Para intentar este proyecto, necesitarás tener un conocimiento profundo de:

• Funciones
• Métodos
• Matrices

¿Qué construir?

El carrito de compras tendrá un sistema donde los usuarios podrán:

• Agregar artículos al carrito
• Eliminar artículos del carrito
• Ver el contenido del carrito
• Calcular el precio total de los artículos del carrito

Paso 1: configurar los datos

Para comenzar, necesitamos crear algunas matrices que contendrán los datos de nuestros elementos. Las matrices necesarias específicamente son:

• itemNames: especifica el nombre de cada elemento.
• itemPrices: Contiene el precio que cuesta cada artículo.
• itemQuantities: indica la cantidad de un artículo específico que está disponible.
• itemInStock: Determina si un artículo está en stock mediante el uso de verdadero o falso.

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

Paso 2: construir el carrito de compras con funciones

Vamos a crear una función de carrito de compras principal que contendrá la lógica del carrito. Usaremos cierres para garantizar que el carrito permanezca privado y que solo ciertas funciones puedan interactuar con él.

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 desglosar el código:

• addItemToCart(itemIndex): Agrega un artículo al carrito según su índice (solo si está en stock).
• removeItemFromCart(itemIndex): Elimina un artículo del carrito usando su índice.
• getCartItems(): Devuelve el nombre de los artículos en el carrito usando map() para convertir los índices en nombres.
• calcularTotal(): Calcula el precio total multiplicando los precios y las cantidades de artículos en el carrito usando el método reducir().

Paso 3: probar el carrito de compras

Se debe probar un proyecto terminado para garantizar que funcione según sea necesario. Vamos a probar:

• agregando elementos

• viendo el carrito

• comprobando precio 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 desglosar el código:

• Creamos una instancia del carrito de compras llamándolo: const miCarrito = carritodecompras();.
• Agregamos artículos al carrito usando su índice de la matriz itemNames: miCarro.addItemToCart(0); para la computadora portátil y myCart.addItemTocart(1); para el teléfono.
• Usamos getCartItems() para imprimir los nombres de los artículos en el carrito
• Finalmente, calculamos el precio total usando calculaTotal().

Paso 4: eliminar artículos del carrito

Un buen sistema de carrito de compras debe permitir al usuario eliminar artículos del carrito. Podemos hacer esto llamando a 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

Bonificación: comprensión de los cierres en el sistema del carrito de compras

Los cierres ayudan a que la matriz del carrito permanezca privada y solo sea accesible a través de las funciones devueltas por la función ShoppingCart().

• La matriz del carrito se define dentro del carrito de compras() y no se puede acceder a ella directamente desde el exterior. Sin embargo, debido a que las funciones addItemTocart(), removeItemFromCart(), getCartItems() y calculaTotal() están definidas dentro del mismo alcance, pueden interactuar con el carrito.
• Los cierres son una característica poderosa de JavaScript que ayuda a mantener la privacidad y la estructura de los datos en su código.

Conclusión

Al utilizar matrices y funciones básicas, ha creado un sistema de carrito de compras completamente funcional que puede agregar, eliminar y calcular totales de artículos. Lo asombroso de este proyecto es que utiliza cierres para encapsular y administrar el estado sin requerir objetos o clases complejos.

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 hayas disfrutado aprendiendo y estoy emocionado de que puedas crear más proyectos increíbles!