Search⌘ K
Home
Courses
JavaScript Design Patterns for Coding Interviews

Challenge: Bridge Pattern

Explore how to apply the bridge pattern within JavaScript structural design patterns to enable dynamic switching between application color modes. Learn to refactor code that handles different app themes and understand the separation of concerns between applications and their display modes, preparing you for coding interview challenges.

We'll cover the following...

Problem statement

Study the code given below and its output. Carefully look at the classes defined and try to understand the purpose of the program.

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()

To further clarify, the code above has one parent class Applications and four child classes:

  • FacebookLightMode

  • FacebookDarkMode

  • WhatsAppLightMode ...