The answer
Check if Object.keys(cart).length === 0. If so, show a message like 'Your cart is empty' instead of the cart items and total. This shows attention to UX.
Food Ordering App: Cart Implementation in JavaScript
How do you render an empty cart in a food ordering app?
More FAQs in Food Ordering App: Cart Implementation in JavaScript
Use an object mapping item ID to quantity: cart = { 1: 2, 3: 1 }. addToCart increments, removeFromCart deletes, changeQuantity adjusts and removes at 0. Calculate total by summing price * qty for each item.
An object with item ID as key and quantity as value: { itemId: quantity }. This gives O(1) lookup, add, and remove. Alternatively, an array of { id, quantity } objects, but the object is simpler for this use case.
When decrementing, check if the quantity drops to 0 or below. If so, delete the item from the cart: if (cart[id] <= 0) delete cart[id]. This keeps the cart clean and the total accurate.
Still have questions?
Browse all our FAQs or reach out to our support team
Want to upskill yourself?
Your learning library
Small steps. Big possibilities.
Find your next course. Build something great.