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

<html>
	<head>
	</head>
	<body>
		Color: <input type="text" name = "color" id="color"> 
	</body>
<html>

class Model{
	constructor(){
		this.model  = {color: "red"};
		this.observers = [];
	}
	subscribe(observer){
		this.observers.push(observer);
	}
	notifyObservers(attrNm, newVal){
		for(var i = 0; i < this.observers.length; i++){
			this.observers[i](attrNm, newVal);
		}
	}
	getCurrentColor(key){
		return this.model[key];
	}
	
	setColor(key, value){
		this.model[key] = value;
		this.notifyObservers(key, value);
	}
}

class ViewModel{
	constructor(model){
		this.bind = function(viewElement, modelElement){
		    viewElement.style.color = model.getCurrentColor(modelElement);
			model.subscribe(function(attrNm, newValue){
			var elem = document.getElementById(attrNm);
			if(newValue == "red"){
				elem.style.color = "blue"
			}
			else if(newValue == "green"){
				elem.style.color = "red"
			}
			else if(newValue == "blue"){
				elem.style.color = "green"
			}			
		});
			viewElement.addEventListener('input', function(){
				model.setColor("color", viewElement.value);
		});
	  }
	}
}


var nameInput = document.getElementById('color');
var model = new Model()
var viewModel = new ViewModel(model);
viewModel.bind(nameInput, 'color');

codemirror

console

### Explanation

This challenge required you to use the MVVM pattern to write a program that changes the color of the text to "green", "red", or "blue" when written in the input field.

It is divided into three components: the model, ViewModel, and view. Let’s take a look at them one by one.

**`Model`**

```
class Model{
	constructor(){
		this.model  = {color: "red"};
		this.observers = [];
	}
     //code...
```

The `Model` constructor consists of the following properties:

* `model`: The object containing the `color`. It is set to `red` by default.

* `observers`: The list containing all the observers of the model.


Since the `Model` is a subject, it also contains the `subscribe` function to register an `observer`.

```
subscribe(observer){
		this.observers.push(observer);
}
```

It contains the `notifyObservers` function too, which informs the observer of the changes that occur in the model. If you look at the code below, you’ll see that it calls the observer function, passing it the updated value in the `Model`.

```
notifyObservers(attrNm, newVal){
	 for(var i = 0; i < this.observers.length; i++){
			this.observers[i](attrNm, newVal);
	}
}
```
It has the `getCurrentColor` function to retrieve the current `color` value from the model.

```
getCurrentColor(key){
    return this.model[key];
}
```

It also has the `setColor` function, which can be used to set the value of the *color* attribute in the model.
```	
setColor(key, value){
	this.model[key] = value;
	this.notifyObservers(key, value);
  }
}
```

As you can see, when the new value is set, the `notifyObservers` function is called to inform the observer of this change. But what is the observer here? Our ViewModel is the observer that looks out for any changes in the model, so it can update the view accordingly. Let’s discuss it next.

**`ViewModel`**

```
class ViewModel{
	constructor(model){
		this.bind = function(viewElement, modelElement){
		    viewElement.style.color = model.getCurrentColor(modelElement);
			model.subscribe(function(attrNm, newValue){
			var elem = document.getElementById(attrNm);
			if(newValue == "red"){
				elem.style.color = "blue"
			}
			else if(newValue == "green"){
				elem.style.color = "red"
			}
			else if(newValue == "blue"){
				elem.style.color = "green"
			}			
		});
			viewElement.addEventListener('input', function(){
				model.setColor("color", viewElement.value);
		});
	  }
	}
}
```

The `constructor` initializes the `bind` function that binds the model element to the view element. 


It sets the `color` of the `viewElement` equal to the color value retrieved from the `model` (using `getCurrentColor` function). This is the reason you see `red` as the default text color in the input field.

```
viewElement.style.color = model.getCurrentColor(modelElement);
```

Next, it calls the `subscribe` function, to which it passes the callback function, which is invoked when a change occurs in the model. This means, whenever the value of `color` in the model changes, it will notify the observer (the callback in our case). It gets invoked with the updated values so it can update the view as well. 

As you know, the question required us to change the color of the "green" text to red, "red" text to blue, and "blue" text to green. So, we use a series of *if* conditions to update the color of the text in *view* according to this rule:

```
model.subscribe(function(attrNm, newValue){
			var elem = document.getElementById(attrNm);
			if(newValue == "red"){
				elem.style.color = "blue"
			}
			else if(newValue == "green"){
				elem.style.color = "red"
			}
			else if(newValue == "blue"){
				elem.style.color = "green"
		    }			
});
```

The above scenario deals with the case where the changes made in the model are to be reflected on the user interface. The code below, however, is for when the model needs to reflect the changes made on the UI side.

```
viewElement.addEventListener('input', function(){
		 model.setColor("color", viewElement.value);
});
```

We attach an event listener to the `viewElement` so that whenever a user enters a color in the input field, the `model.setColor` function gets called. It uses the view element’s value to update the model's value accordingly. 

**`View`**

```
Color: <input type="text" name = "color" id="color"> 
```

The view is a piece of simple HTML code that creates an input field for the color. This allows the user to interact and enter the color in the field.

```
var nameInput = document.getElementById('color');
var model = new Model()
var viewModel = new ViewModel(model);
viewModel.bind(nameInput, 'color');
```

On the JavaScript side, we get the input element and store it in `nameInput`. Next, we initialize the `viewModel` and `model` and call the view model’s `bind` function to bind the view element to the model element, `color`.

## Explanation

This challenge required you to use the MVVM pattern to write a program that changes the color of the text to "green", "red", or "blue" when written in the input field.

It is divided into three components: the model, ViewModel, and view. Let’s take a look at them one by one.

**`Model`**

```
class Model{
	constructor(){
		this.model  = {color: "red"};
		this.observers = [];
	}
     //code...
```

The `Model` constructor consists of the following properties:

* `model`: The object containing the `color`. It is set to `red` by default.

* `observers`: The list containing all the observers of the model.


Since the `Model` is a subject, it also contains the `subscribe` function to register an `observer`.

```
subscribe(observer){
		this.observers.push(observer);
}
```

It contains the `notifyObservers` function too, which informs the observer of the changes that occur in the model. If you look at the code below, you’ll see that it calls the observer function, passing it the updated value in the `Model`.

```
notifyObservers(attrNm, newVal){
	 for(var i = 0; i < this.observers.length; i++){
			this.observers[i](attrNm, newVal);
	}
}
```
It has the `getCurrentColor` function to retrieve the current `color` value from the model.

```
getCurrentColor(key){
    return this.model[key];
}
```

It also has the `setColor` function, which can be used to set the value of the *color* attribute in the model.
```	
setColor(key, value){
	this.model[key] = value;
	this.notifyObservers(key, value);
  }
}
```

As you can see, when the new value is set, the `notifyObservers` function is called to inform the observer of this change. But what is the observer here? Our ViewModel is the observer that looks out for any changes in the model, so it can update the view accordingly. Let’s discuss it next.

**`ViewModel`**

```
class ViewModel{
	constructor(model){
		this.bind = function(viewElement, modelElement){
		    viewElement.style.color = model.getCurrentColor(modelElement);
			model.subscribe(function(attrNm, newValue){
			var elem = document.getElementById(attrNm);
			if(newValue == "red"){
				elem.style.color = "blue"
			}
			else if(newValue == "green"){
				elem.style.color = "red"
			}
			else if(newValue == "blue"){
				elem.style.color = "green"
			}			
		});
			viewElement.addEventListener('input', function(){
				model.setColor("color", viewElement.value);
		});
	  }
	}
}
```

The `constructor` initializes the `bind` function that binds the model element to the view element. 


It sets the `color` of the `viewElement` equal to the color value retrieved from the `model` (using `getCurrentColor` function). This is the reason you see `red` as the default text color in the input field.

```
viewElement.style.color = model.getCurrentColor(modelElement);
```

Next, it calls the `subscribe` function, to which it passes the callback function, which is invoked when a change occurs in the model. This means, whenever the value of `color` in the model changes, it will notify the observer (the callback in our case). It gets invoked with the updated values so it can update the view as well. 

As you know, the question required us to change the color of the "green" text to red, "red" text to blue, and "blue" text to green. So, we use a series of *if* conditions to update the color of the text in *view* according to this rule:

```
model.subscribe(function(attrNm, newValue){
			var elem = document.getElementById(attrNm);
			if(newValue == "red"){
				elem.style.color = "blue"
			}
			else if(newValue == "green"){
				elem.style.color = "red"
			}
			else if(newValue == "blue"){
				elem.style.color = "green"
		    }			
});
```

The above scenario deals with the case where the changes made in the model are to be reflected on the user interface. The code below, however, is for when the model needs to reflect the changes made on the UI side.

```
viewElement.addEventListener('input', function(){
		 model.setColor("color", viewElement.value);
});
```

We attach an event listener to the `viewElement` so that whenever a user enters a color in the input field, the `model.setColor` function gets called. It uses the view element’s value to update the model's value accordingly. 

**`View`**

```
Color: <input type="text" name = "color" id="color"> 
```

The view is a piece of simple HTML code that creates an input field for the color. This allows the user to interact and enter the color in the field.

```
var nameInput = document.getElementById('color');
var model = new Model()
var viewModel = new ViewModel(model);
viewModel.bind(nameInput, 'color');
```

On the JavaScript side, we get the input element and store it in `nameInput`. Next, we initialize the `viewModel` and `model` and call the view model’s `bind` function to bind the view element to the model element, `color`.

This lesson will explain the solution to the problem from the previous coding challenge.


Before We Begin

Introduction To Design Patterns

Creational Patterns

Structural Patterns

Behavioral Patterns

Architectural Patterns

Conclusion

Challenge: Solution Review

Solution #

Explanation