Cart design

Design the class structure for the shopping cart.

Cart design

In this project we will build a shopping cart application step by step. The first step is to design the Cart class that will hold the products added to the cart. In JavaScript you use a class to group related data and behavior under one roof; you will see more about classes in a later level.

A cart has an items array that holds the added products. The constructor method runs when a new object is created from the class and initializes items as an empty array. The form is class Cart { constructor() { this.items = []; } }. this refers to the current object.

this and object fields

Inside a class this refers to the current object. Writing this.items reaches that object's items field. Each new Cart() call creates a separate object; each has its own items array.

Defining a field in the constructor ensures all objects created from that class will have it. For example const c1 = new Cart(); const c2 = new Cart(); creates two separate carts; c1.items and c2.items are independent. This is why this is required.

Exercise Define the Cart class

Define a Cart class: in the constructor method initialize the items array as empty with this.items = []. The main part already creates a cart and prints cart ready; you only need to define the class. The output on a single line must be cart ready.

Show example solution

class Cart {
    constructor() {
        this.items = [];
    }
}

// Test
const cart = new Cart();
console.log("cart ready");

Test yourself

When does the constructor run?
```
class Cart { constructor() { ... } }
const c = new Cart();
```
- When the class is defined
- At program end
- When addItem is called
- When new Cart() is called
Show answer

When new Cart() is called — The constructor runs when a new object is created with new Cart().

Write the constructor body

class Cart {
    constructor() {
        ____;
    }
}

Show answer

class Cart {
    constructor() {
        this.items = [];
    }
}

Match each part to its job

class Cart

Class declaration
constructor()

Initial setup
this.items

Object field
new Cart()

Creates an object

Next lesson: Adding items

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies