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

class LibraryKiosk{
    open(app){
        console.log(`Opening ${app}`)
    }    
    connectTo(website) 
    { 
        console.log("Connecting to "+ website); 
    } 
}

class ProxyLibraryKiosk{
    constructor(){
        this.libraryKiosk = new LibraryKiosk() 
        this.blockedSites = ["fb.com", "instagram.com","snapchat.com","google.com", "gmail.com"]
        this.blockedApps = ["camera", "photos", "music", "settings"] 
    }
    
    open(app){
        if(this.blockedApps.includes(app)){
            console.log(`You can't access the ${app}`)
        }else{
            this.libraryKiosk.open(app)
        }
    }
    connectTo(website){
        if(this.blockedSites.includes(website)){
            console.log(`Access to ${website} denied`)
        }else{
            this.libraryKiosk.connectTo(website)
        }
    }
}

var libraryKiosk = new ProxyLibraryKiosk(); 
libraryKiosk.open("photos")
libraryKiosk.open("Chrome")
libraryKiosk.connectTo("booksportal.com"); 
libraryKiosk.connectTo("google.com"); 

# Explanation

In this challenge, you had to implement the proxy pattern, such that it restricted the use of the kiosk to access apps/websites for the students. As mentioned in the [problem statement](https://www.educative.io/courses/javascript-design-patterns-for-coding-interviews/challenge-proxy-pattern), a student can access/connect to any app/site using the `LibraryKiosk` class.

```
class LibraryKiosk{
    open(app){
        console.log(`Opening ${app}`)
    }    
    connectTo(website) 
    { 
        console.log("Connecting to "+ website); 
    } 
}
```

To restrict the use, we introduce the `ProxyLibraryKiosk` class like so:

```
class ProxyLibraryKiosk{
 constructor(){
   this.libraryKiosk = new LibraryKiosk() 
   this.blockedSites = ["fb.com", "instagram.com","snapchat.com","google.com", "gmail.com"]
   this.blockedApps = ["camera", "photos", "music", "settings"] 
   }
  //code....
}
```

The `constructor` of the proxy class initializes a `libraryKiosk` instance and two additional variables: `blockedSites` and `blockedApps`. Both variables store the list of apps and websites that the students don't have access to.

Next, we redefine the `open` function:

```
open(app){
  if(this.blockedApps.includes(app)){
     console.log(`You can't access the ${app}`)
   }else{
      this.libraryKiosk.open(app)
   }
}
```

First, we check if the `app` the student is trying to access is in the `blockedApps` list. If it is, we display the “can’t access” message. Else, we call the `libraryKiosk.open` function for the `app`.


Similarly, we redefine the `connectTo` function:

```
connectTo(website){
  if(this.blockedSites.includes(website)){
     console.log(`Access to ${website} denied`)
  }else{
    this.libraryKiosk.connectTo(website)
   }
}
```

First, we check if the `website` the student is trying to connect to is in the `blockedSites` list. If it is, we display the “access denied” message. Else, we call the `libraryKiosk.connect` function for the `website`.



Now, when a student calls the `open`/`connectTo` function on an app/website from the blocked list, the access will be denied. Another benefit of using the proxy pattern is that it reduces the number of direct requests that are sent to the target. It filters out and only sends valid requests forward, thus reducing the load.

# Explanation

In this challenge, you had to implement the proxy pattern, such that it restricted the use of the kiosk to access apps/websites for the students. As mentioned in the [problem statement](https://www.educative.io/courses/javascript-design-patterns-for-coding-interviews/challenge-proxy-pattern), a student can access/connect to any app/site using the `LibraryKiosk` class.

```
class LibraryKiosk{
    open(app){
        console.log(`Opening ＄{app}`)
    }    
    connectTo(website) 
    { 
        console.log("Connecting to "+ website); 
    } 
}
```

To restrict the use, we introduce the `ProxyLibraryKiosk` class like so:

```
class ProxyLibraryKiosk{
 constructor(){
   this.libraryKiosk = new LibraryKiosk() 
   this.blockedSites = ["fb.com", "instagram.com","snapchat.com","google.com", "gmail.com"]
   this.blockedApps = ["camera", "photos", "music", "settings"] 
   }
  //code....
}
```

The `constructor` of the proxy class initializes a `libraryKiosk` instance and two additional variables: `blockedSites` and `blockedApps`. Both variables store the list of apps and websites that the students don't have access to.

Next, we redefine the `open` function:

```
open(app){
  if(this.blockedApps.includes(app)){
     console.log(`You can't access the ＄{app}`)
   }else{
      this.libraryKiosk.open(app)
   }
}
```

First, we check if the `app` the student is trying to access is in the `blockedApps` list. If it is, we display the “can’t access” message. Else, we call the `libraryKiosk.open` function for the `app`.


Similarly, we redefine the `connectTo` function:

```
connectTo(website){
  if(this.blockedSites.includes(website)){
     console.log(`Access to ＄{website} denied`)
  }else{
    this.libraryKiosk.connectTo(website)
   }
}
```

First, we check if the `website` the student is trying to connect to is in the `blockedSites` list. If it is, we display the “access denied” message. Else, we call the `libraryKiosk.connect` function for the `website`.



Now, when a student calls the `open`/`connectTo` function on an app/website from the blocked list, the access will be denied. Another benefit of using the proxy pattern is that it reduces the number of direct requests that are sent to the target. It filters out and only sends valid requests forward, thus reducing the load.

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