The ultimate guide to coding interviews: Learn and practice JavaScript design patterns tested by FAANG engineers. Get interview-ready in just a few hours with battle-tested solutions.

If you're an experienced developer, chances are your interviewer won't ask you about language syntax. Instead, they'll focus on things that test your understanding of software architecture, and how capable you are at finding optimized solutions to given problems. 

That’s where a strong understanding of design patterns comes in handy. It's often useful to be able to draw on established patterns instead of reinventing the wheel.

In this course, you will learn how to effectively deploy design patterns to answer interview questions. The course is divided into four sections: Creational Patterns, Structural Patterns, Behavioral Patterns, and Architectural Patterns. Each section has its own set of design patterns which you’ll learn to use through various challenges. 

Every challenge contains a detailed solution explanation. By the end of this course (and with some practice), you will be able to confidently use design patterns to tackle advanced coding interview questions in JavaScript.

JavaScript Design Patterns for Coding Interviews

# What is the decorator pattern?

The decorator pattern focuses on adding properties, functionalities, and behavior to existing classes dynamically. The additional decoration functionalities aren’t considered essential enough to be a part of the original class definition as they can cause clutter. Hence, the *decorator pattern* lets you modify the code without changing the original class.

Unlike the creational patterns, the decorator pattern is a structural pattern that does not focus on object creation rather decoration. Hence, it doesn't rely on prototypal inheritance alone; it takes the object and keeps adding decoration to it. This makes the process more streamlined. Let's take a look at an example to understand this concept better.


# Example

class FrozenYoghurt {
  constructor(flavor, price) {
    this.flavor = flavor
    this.price = price
  }

  orderPlaced() {
    console.log(`The ${this.flavor} flavor will cost you ${this.price} dollars`);
  }
}

// decorator 1
function addFlavors(froyo) {
  froyo.addStrawberry = true;
  froyo.addVanilla = true;
  froyo.price += 20;
  froyo.updatedInfo = function(){
    console.log(`The updated price after adding flavors is ${froyo.price} dollars`)
  }
  return froyo;
}

// decorator 2
function addToppings(froyo) {
  froyo.hasSprinkles = true;
  froyo.hasBrownie =  true;
  froyo.hasWafers = true;
  froyo.allToppings = function(){
    console.log("Your froyo has sprinkles, brownie, and wafers")
  }
  return froyo;
}

//using decorators
//creating a froyo
const froyo = new FrozenYoghurt("chocolate",10)
froyo.orderPlaced()
//adding flavors
var froyowithFlavors = addFlavors(froyo)
froyowithFlavors.updatedInfo()
//adding toppings
var froyoWithToppings = addToppings(froyo)
froyoWithToppings.allToppings()

## Explanation

Let's start by visualizing the code:

From the diagram above, you can see that we first create a *chocolate froyo* that costs **10** dollars. Anyone who wants a froyo will perform this step. 

After the first step, you have the option to add more flavors. Some people might get a single flavor, pay for it, and then leave. However, in our case, we add two more flavors to it, *strawberry and vanilla*. Each of them costs *10* dollars, so now, we will have to pay an extra **20** dollars.

At this point, you have the option to either pay and leave or add extra toppings to the froyo. In our case, we add three toppings: sprinkles, a brownie, and wafers.


*So, how is the decorator pattern being implemented here?* Getting the *chocolate froyo* was the major step. However, the additional flavors and the toppings are both optional. Hence, they are both additional choices that the person may or may not consider. So, both of these steps are not included in the first step, instead, they’re added later on as *decoration*.


Now that the concept is clear, let’s look at its implementation using code.


We start by creating a `FrozenYoghurt` class like so:

```
class FrozenYoghurt {
  constructor(flavor, price) {
    this.flavor = flavor
    this.price = price
  }

  orderPlaced() {
    console.log(`The ${this.flavor} flavor will cost you ${this.price} dollars`);
  }
}
```

Its `constructor` initializes the `flavor` and `price` properties to the values passed into the `constructor`. It also contains the `orderPlaced` function, which displays the `flavor` you got and its `price`.

Now, it's time for the *decoration*. You have the option to `addFlavors` and `addToppings` to your froyo. 

Here's what the `addFlavors` function looks like: 

```
function addFlavors(froyo) {
  froyo.addStrawberry = true;
  froyo.addVanilla = true;
  froyo.price += 20;
  froyo.updatedInfo = function(){
    console.log(`The updated price after adding flavors is ${froyo.price} dollars`)
  }
  return froyo;
}
```

It adds the *strawberry* and *vanilla* flavors to the `froyo` instance and increases the `price` by `20` dollars. The `updatedInfo` function shows the updated `price`.

The `addToppings` function is as follows:

```
function addToppings(froyo) {
  froyo.hasSprinkles = true;
  froyo.hasBrownie =  true;
  froyo.hasWafers = true;
  froyo.allToppings = function(){
    console.log("Your froyo has sprinkles, brownie, and wafers")
  }
  return froyo;
}
```

It adds sprinkles, a brownie, and wafers to the `froyo` instance. The `allToppings` function displays all the toppings added.

From the diagram above, you can see that we first create a *chocolate froyo* that costs **10** dollars. Anyone who wants a froyo will perform this step. 

After the first step, you have the option to add more flavors. Some people might get a single flavor, pay for it, and then leave. However, in our case, we add two more flavors to it, *strawberry and vanilla*. Each of them costs *10* dollars, so now, we will have to pay an extra **20** dollars.

At this point, you have the option to either pay and leave or add extra toppings to the froyo. In our case, we add three toppings: sprinkles, a brownie, and wafers.


*So, how is the decorator pattern being implemented here?* Getting the *chocolate froyo* was the major step. However, the additional flavors and the toppings are both optional. Hence, they are both additional choices that the person may or may not consider. So, both of these steps are not included in the first step, instead, they’re added later on as *decoration*.


Now that the concept is clear, let’s look at its implementation using code.


We start by creating a `FrozenYoghurt` class like so:

```
class FrozenYoghurt {
  constructor(flavor, price) {
    this.flavor = flavor
    this.price = price
  }

  orderPlaced() {
    console.log(`The ＄{this.flavor} flavor will cost you ＄{this.price} dollars`);
  }
}
```

Its `constructor` initializes the `flavor` and `price` properties to the values passed into the `constructor`. It also contains the `orderPlaced` function, which displays the `flavor` you got and its `price`.

Now, it's time for the *decoration*. You have the option to `addFlavors` and `addToppings` to your froyo. 

Here's what the `addFlavors` function looks like: 

```
function addFlavors(froyo) {
  froyo.addStrawberry = true;
  froyo.addVanilla = true;
  froyo.price += 20;
  froyo.updatedInfo = function(){
    console.log(`The updated price after adding flavors is ＄{froyo.price} dollars`)
  }
  return froyo;
}
```

It adds the *strawberry* and *vanilla* flavors to the `froyo` instance and increases the `price` by `20` dollars. The `updatedInfo` function shows the updated `price`.

The `addToppings` function is as follows:

```
function addToppings(froyo) {
  froyo.hasSprinkles = true;
  froyo.hasBrownie =  true;
  froyo.hasWafers = true;
  froyo.allToppings = function(){
    console.log("Your froyo has sprinkles, brownie, and wafers")
  }
  return froyo;
}
```

It adds sprinkles, a brownie, and wafers to the `froyo` instance. The `allToppings` function displays all the toppings added.

This lesson will introduce the decorator pattern in detail with the aid of a coding example.

Before We Begin

Introduction To Design Patterns

Creational Patterns

Structural Patterns

Behavioral Patterns

Architectural Patterns

Conclusion

Decorator Pattern

What is the decorator pattern?