Add product
- TypeScript course
- Beginner
- Lesson 72/89
- 5 min
Learn to add products and update quantities.
Add-to-cart logic
The addToCart function adds a product to the cart. It first checks whether the product is already in the cart with find; if so, it increases the quantity; otherwise it adds a new item. This avoids creating duplicate entries when the same product is added multiple times.
function addToCart(cart: Cart, product: Product, quantity: number): Cart {
const existing = cart.items.find(i => i.product.id === product.id);
if (existing) {
existing.quantity += quantity;
} else {
cart.items.push({ product, quantity });
}
return cart;
}Quantity update
When you find an existing item, you update its quantity. The += operator is the shortcut; you can also write existing.quantity = existing.quantity + quantity with the same meaning. Both are valid.
existing.quantity += quantity;
// equals: existing.quantity = existing.quantity + quantity;To add a new item, you use cart.items.push({ product, quantity }).
Practice Write the addToCart function
Define Product, CartItem, Cart interfaces. Write a function addToCart(cart: Cart, product: Product, quantity: number): Cart: if the product is already in the cart, increase its quantity; otherwise add a new item with cart.items.push. Add the same product twice and print the final quantity.
Starter code
// Product, CartItem, Cart arayüzlerini tanımla
// addToCart(cart, product, quantity): Cart yaz
// ürün sepette varsa miktarını artır
// yoksa yeni CartItem ekle
// aynı ürünü iki kez ekle, son miktarı yazdırSample solution
interface Product { id: string; name: string; price: number; }
interface CartItem { product: Product; quantity: number; }
interface Cart { items: CartItem[]; }
function addToCart(cart: Cart, product: Product, quantity: number): Cart {
const existing = cart.items.find(i => i.product.id === product.id);
if (existing) {
existing.quantity += quantity;
return cart;
}
cart.items.push({ product, quantity });
return cart;
}
const cart: Cart = { items: [] };
const apple: Product = { id: "a1", name: "Elma", price: 5 };
addToCart(cart, apple, 2);
addToCart(cart, apple, 3);
console.log(cart.items[0].quantity);Expected output
5
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What should you do if the same product is already in the cart?
- Add the product a second time
- Delete the old item
- Throw an error
- Increase the quantity Correct answer
Explanation: If the same product is already in the cart, you should increase the quantity of the existing item rather than adding a new one. This prevents duplicates.
2 Complete the find condition
const existing = cart.items.find(i => i.product.id === ____);const existing = cart.items.find(i => i.product.id === product.id);Explanation: You find the existing item by product id: i.product.id === product.id. product is an object, and i.id and i.quantity are missing or the wrong type on CartItem.
3 Add-to-cart parts
| Term | Meaning |
|---|---|
cart.items.find(...) |
Find existing item |
existing.quantity += quantity |
Increase quantity |
cart.items.push(...) |
Add a new item |
addToCart |
Adds a product to the cart |