Design Patterns in JavaScript: Practical Applications

Lesson Introduction

Hello! Today, we'll venture into the realm of design patterns . Specifically, we'll tackle exercises that apply a single design pattern to problem-solving. Mastering these patterns is a surefire way to extend your coding skills. Our goal today is to fortify your understanding of when and how to apply specific Object-Oriented Programming (OOP) design patterns. These patterns include Encapsulation, Abstraction, Polymorphism, and Composition . We'll dissect four real-life scenarios and distinguish which pattern is applicable and why. Let's get underway!

Real-life Example 1: Database Management System (Encapsulation)

The Encapsulation pattern proves beneficial for the development of a Database Management System (DBMS). Each DBMS table represents a class, the fields represent private data members, and the functions operating on this data serve as methods. Encapsulation ensures that data members are accessed through methods that promote data integrity and prevent inadvertent anomalies. Here's a mini-code snippet to support this concept: JavaScript class Employees {#employees = {}; // private data member addEmployee(eid, name) { // method to operate on private data this.#employees[eid] = name;} updateEmployee(eid, newName) { // method to operate on private data if (this.#employees.hasOwnProperty(eid)) {this.#employees[eid] = newName;}}} const employees = new Employees(); employees.addEmployee(1, "John"); employees.addEmployee(2, "Mark"); employees.updateEmployee(2, "Jake"); In this context, Encapsulation restricts direct access to employee data, presenting a protective layer via designated methods.

Real-life Example 2: Graphic User Interface (GUI) Development (Polymorphism)

When transitioning to GUI development, consider the creation of controls like buttons or checkboxes. Despite belonging to the same class, each responds differently when clicked. This situation illustrates Polymorphism, which allows us to handle different objects uniformly via a common interface. Check out this illustrative example: JavaScript class Control { // common base class click() { // method that can be overridden throw new Error("This method should be overridden by subclasses");}} class Button extends Control { // derived class click() {console.log("Button Clicked!"); // overridden method}} class CheckBox extends Control { // derived class click() {console.log("CheckBox Clicked!"); // overridden method}} // Create objects const b = new Button(); const c = new CheckBox(); // Click Controls b.click(); // Outputs: Button Clicked! c.click(); // Outputs: CheckBox Clicked! Despite sharing the common click interface, different controls display unique responses. This characteristic demonstrates Polymorphism .

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Real-life Example 3: Creating a Web Page Structure (Composition)

Let's explore the Composition design pattern through a JavaScript approach to create a simple web page structure. Here, we'll build a fundamental structure representing a webpage composed of various elements like headers, paragraphs, and lists. This abstraction allows us to understand how composite objects work together to form a larger system.

JavaScript

class WebPageElement {
    render() {
        throw new Error("This method should be overridden by subclasses");
    }
}

class Header extends WebPageElement {
    constructor(text) {
        super();
        this.text = text;
    }
    
    render() {
        return `<h1>${this.text}</h1>`;
    }
}

class Paragraph extends WebPageElement {
    constructor(text) {
        super();
        this.text = text;
    }
    
    render() {
        return `<p>${this.text}</p>`;
    }
}

class List extends WebPageElement {
    constructor(items) {
        super();
        this.items = items;
    }
    
    render() {
        const itemsStr = this.items.map(item => `<li>${item}</li>`).join("\n");
        return `<ul>${itemsStr}</ul>`;
    }
}

class WebPage {
    constructor(title) {
        this.title = title;
        this.elements = [];
    }
    
    addElement(element) {
        this.elements.push(element);
    }
    
    display() {
        const elementsStr = this.elements.map(element => element.render()).join("\n");
        return `<html>\n<head>\n  <title>${this.title}</title>\n</head>\n<body>\n  ${elementsStr}\n</body>\n</html>`;
    }
}

// Example usage
const page = new WebPage("My Web Page");
page.addElement(new Header("Welcome to My Web Page"));
page.addElement(new Paragraph("This is a paragraph of text on the web page."));
page.addElement(new List(["Item 1", "Item 2", "Item 3"]));

console.log(page.display());

In this code, we've designed a web page structure using the Composition design pattern. Each web page element (Header, Paragraph, and List) is a WebPageElement, allowing for unified handling while maintaining their specific behaviors (rendering as HTML elements).

The WebPage class acts as a composite object that can contain an arbitrary number of WebPageElement instances, each representing different parts of a web page. By adding these elements to the WebPage and invoking the display method, we dynamically compose a complete web page structure in HTML format.

Real-life Example 4: Creating a Vehicle (Abstraction)

Consider creating a Vehicle class in JavaScript. Here, Abstraction comes into play. It allows you to expose only the necessary functionality and abstract away the internal workings of the Vehicle.

Let's see this in code: