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

Tomi Longe — Sat, 05 Oct 2024 22:54:22 +0000

The best way to learn a new programming language is by creating as many projects as possible. You will have a smoother experience as a beginner if you build mini-projects that focus on what you have learned.
The goal is to avoid "tutorial hell"—that scary place where you keep watching several tutorial videos without having any concrete project to show your skills—and also build the confidence necessary to tackle larger-scale projects.
In this article, I will explain how you can create a shopping cart system as a beginner, using basic Javascript concepts.

Prerequisites

To attempt this project, you would need to have in-depth knowledge of:

Functions
Methods
Arrays

What to Build?

The shopping cart will have a system where users can:

Add items to cart
Remove items from the cart
View the cart contents
Calculate the total price of items in the cart

Step 1: Setting Up the Data

To begin, we need to create a few arrays that will hold the data for our items. The arrays needed specifically are:

itemNames: Specifies the name of each item.
itemPrices: Contains the price each item costs.
itemQuantities: Tells how much of a specific item is available.
itemInStock: Determines if an item is in stock through the use of true or false.

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

Step 2: Building the Shopping Cart with Functions

We are going to create a main shopping cart function that will contain the logic for the cart. We will use closures to ensure the cart stays private and only certain functions can interact with it.

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

To break down the code:

addItemToCart(itemIndex): Adds an item to the cart based on its index (only if it is in stock).
removeItemFromCart(itemIndex): Removes an item from the cart using its index.
getCartItems(): Returns the name of the items in the cart using map() to convert the indices to names.
calculateTotal(): Calculates the total price by multiplying the prices and quantities of items in the cart using the reduce() method.

Step 3: Testing the Shopping Cart

A finished project should be tested to ensure it works as needed. We are going to test for:

adding items
viewing the cart
checking total price

const myCart = ShoppingCart();

myCart.addItemToCart(0);

myCart.addItemToCart(1);

console.log(myCart.getCartItems()); 

console.log(myCart.calculateTotal());

To break down the code:

We create an instance of the shopping cart by calling it: const myCart = shoppingCart();.
We add items to the cart using their index from the itemNames array: myCart.addItemToCart(0); for the Laptop and myCart.addItemTocart(1); for the Phone.
We use getCartItems() to print the names of the items in the cart
Finally, we calculate the total price using calculateTotal().

Step 4: Removing Items from the Cart

A good shopping cart system must allow the user to remove items from the cart. We can do this by calling removeItemFromCart().

myCart.removeItemFromCart(1);

console.log(myCart.getCartItems());

console.log(myCart.calculateTotal());

Bonus: Understanding Closures in the Shopping Cart System

Closures help the cart array remain private, only accessible through the functions returned by the ShoppingCart() function.

The cart array is defined inside the shopping cart() and cannot be accessed directly from outside. However, because the addItemTocart(), removeItemFromCart(), getCartItems() and calculateTotal() functions are defined inside the same scope, they can interact with cart.
Closures are a powerful feature of JavaScript that help maintain data privacy and structure in your code.

Conclusion

By using basic arrays and functions, you've built a fully functional shopping cart system that can add, remove, and calculate totals for items. The awesome part of this project is that it uses closures to encapsulate and manage state without requiring complex objects or classes.

Final Code

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

I hope you enjoyed learning, and I am excited for you to build more awesome projects!

Forem: Tomi Longe