Search⌘ K
AI Features
Home
Courses
JavaScript Design Patterns for Coding Interviews

Challenge: Solution Review

Understand how to optimize app mode management using the bridge pattern in JavaScript structural design patterns. This lesson reviews solution improvements by separating application modes from the app classes, reducing class duplication, and enabling flexible mode switching. Learn to implement and apply this pattern effectively for coding interviews.

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 ...