JavaScript Design Patterns for Coding Interviews/

...

/

Challenge: Solution Review

Challenge: Solution Review

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

We'll cover the following...

Solution #

Node.js
class Applications{
    constructor(name, type){
        this.name = name
        this.type = type
    }
    display(){}
    displayMode(){}
}
class Mode{
    constructor(app){
        this.app = app
        this.lightMode = function(){
            this.app.setLightMode()
        }
        this.darkMode = function(){
            this.app.setDarkMode()
        }
    }
}
class Facebook extends Applications{
    constructor(name,type){
        super(name,type)
        this.mode = "light"
        this.setLightMode = function(){
            this.mode = "light"
        }
        this.setDarkMode = function(){
            this.mode = "dark"
        }
    }
    display(){
        console.log(`Welcome to Facebook for ${this.type}.`)
    }
    displayMode(){
        console.log(`You are using facebook in ${this.mode} mode.`)
    }
}
class WhatsApp extends Applications{
    constructor(name,type){
        super(name,type)
          this.setLightMode = function(){
            this.mode = "light"
        }
        this.setDarkMode = function(){
            this.mode = "dark"
        }
    }
    display(){
        console.log(`Welcome to Whatsapp for ${this.type}.`)
    }
    displayMode(){
        console.log(`You are using whatsapp in ${this.mode} mode.`)
    }    
}
const fb = new Facebook("Facebook", "Social Networking")
const mode = new Mode(fb)
mode.darkMode()
fb.displayMode() 
  
const whatsapp = new WhatsApp("Whatsapp", "Chatting")
const mode2  = new Mode(whatsapp)
mode2.lightMode()
whatsapp.displayMode()

Explanation

Let’s start by looking at the code we had originally:

Node.js
class Applications{
    constructor(name, type){
        this.name = name
        this.type = type
    }
    display(){}
    displayMode(){}
}
class FacebookLightMode extends Applications{
    constructor(name,type){
        super(name,type)
    }
    display(){
        console.log(`Welcome to Facebook for ${this.type}.`)
    }
    displayMode(){
        console.log("You are using facebook in light mode.")
    }
}
class FacebookDarkMode extends Applications{
    constructor(name,type){
        super(name,type)
    }
    display(){
        console.log(`Welcome to Facebook for ${this.type}.`)
    }
    displayMode(){
        console.log("You are using facebook in dark mode.")
    }
}
class WhatsAppLightMode extends Applications{
    constructor(name,type){
        super(name,type)
    }
    display(){
        console.log(`Welcome to Whatsapp for ${this.type}.`)
    }
    displayMode(){
        console.log("You are using whatsapp in light mode.")
    }    
}
class WhatsAppDarkMode extends Applications{
    constructor(name,type){
        super(name,type)
    }
    display(){
        console.log(`Welcome to Whatsapp for ${this.type}.`)
    }
    displayMode(){
        console.log("You are using whatsapp in dark mode.")
    }    
}
const fbLight = new FacebookLightMode("Facebook", "Social Networking")
const whatsappDark = new WhatsAppDarkMode("Whatsapp", "Chatting")
fbLight.display()
fbLight.displayMode()
whatsappDark.display()
whatsappDark.displayMode()

As you can see, there is a parent class Applications. It has four child classes:

  • FacebookLightMode

  • FacebookDarkMode

  • WhatsAppLightMode

  • WhatsAppDarkMode

The definitions of these classes are simple. Apart from initializing the application name and type, each class also defines the following functions:

  • display

  • displayMode

Node.js
class FacebookLightMode extends Applications{
    //code..
    display(){
        console.log(`Welcome to Facebook for ${this.type}.`)
    }
    displayMode(){
        console.log("You are using facebook in light mode.")
    }
}
class FacebookDarkMode extends Applications{
    //code...
    display(){
        console.log(`Welcome to Facebook for ${this.type}.`)
    }
    displayMode(){
        console.log("You are using facebook in dark mode.")
    }
}
class WhatsAppLightMode extends Applications{
    //code..
    display(){
        console.log(`Welcome to Whatsapp for ${this.type}.`)
    }
    displayMode(){
        console.log("You are using whatsapp in light mode.")
    }    
}
class WhatsAppDarkMode extends Applications{
    //code...
    display(){
        console.log(`Welcome to Whatsapp for ${this.type}.`)
    }
    displayMode(){
        console.log("You are using whatsapp in dark mode.")
    }    
}

Each class has its definition of both these ...