There are a lot of new stuff in previous posts and some of it might seem a bit abstract to you, maybe you don’t know how to use it in real life. Fear not, that’s why today we will have a nice example that will use almost all of the things from previous posts.

What Are We Building?

This example is going to be a very very simplified version of an online store with some customers. After the example itself I’m going to explain some parts of the code. In the next post we are going to make some improvements on this code. Let’s start:

class Shop {
  constructor() {
    this.products = [];
  }

  add(product) {
    this.products.push(product);
  }

  sell(productId) {
    let product = null;
    for (const item of this.products) {
      if (item.id === productId) {
        product = item;
        break;
      }
    }
    this.products = this.products.filter((product) => product.id !== productId);
    return product;
  }
}

class Product {
  constructor(data) {
    this.id = data.id;
    this.name = data.name;
    this.price = data.price;
    this.currency = data.currency;
  }
}

class Customer {
  #wallet;
  constructor({ id, wallet }) {
    this.id = id;
    this.#wallet = wallet;
  }

  get balance() {
    return this.#wallet.balance;
  }

  set balance(value) {
    if (value < 0) {
      throw new Error("Value is below 0.");
    }
    if (this.#wallet.balance - value < 0) {
      throw new Error("New balance is below 0.");
    }
    this.#wallet.balance = value;
  }

  buy(data) {
    this.balance = this.#wallet.balance - data.amount;
  }
}

const customerOne = new Customer({
  id: 1,
  wallet: {
    balance: 1000,
    currency: "EUR",
  },
});

const shop = new Shop();
const productOne = new Product({
  id: 1,
  name: "Product 1",
  price: 10,
  currency: "EUR",
});
const productTwo = new Product({
  id: 2,
  name: "Product 2",
  price: 20,
  currency: "EUR",
});
shop.add(productOne);
shop.add(productTwo);

shop.sell(productOne.id);
customerOne.buy({ amount: productOne.price });

console.log(customerOne.balance); // 990
console.log(shop.products); // [ Product { id: 2, name: 'Product 2', price: 20, currency: 'EUR' } ]

Note that a lot of code can, and will be improved in the upcoming post. A lot is going on in above code so let’s break it down. First we are defining Shop, Product and Customer classes so that working with data is easier. Our methods and properties are more logically grouped.

Shop

First we want to store all of the products somehere, and for that we are using array that is immediately ininitalized in constructor. Pretty straightforward, we have two methods, one for adding products and one for selling them. What is maybe not so straighforward is the code inside sell. We want to return the product we have sold so we have to find that product by productId parameter. Once we find it we break out of the for loop and then we can use filter to modify existing property products to remove the product.

Product

This class helps us by defining all the properties that a product has. It gives us single source of product definition and we can be sure that every product that we instantiate will have those specified properties.

Customer

We define private property for wallet so that we can use getters/setters later. Then we have only one method called buy where we just use getters and setters to update wallet balance

After that we instantiate our objects, use their methods and we have expected results.

What Now?

In the next post we are going to improve our example by introducing logical and performance changes (given what we have learned so far). Before you check that post out try and find as many things that could be improved.