Combining OOP Principles in JavaScript: Real-World Solutions

Introduction and Lesson Goal

Today's mission involves using multiple Object-Oriented Programming (OOP) principles to tackle complex tasks. When principles like Encapsulation, Abstraction, Polymorphism, and Composition are blended, the resulting code becomes streamlined and easier to manage. Our goal is to dissect two real-world examples, gaining insights into how these principles can seamlessly orchestrate solutions.

Real-life Example 1: Building an Online Library System

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 2: Building a Shape Drawing Application

Next, we'll develop a shape-drawing application capable of drawing various shapes. For this, we'll employ the principles of Abstraction and Composition.

Abstraction simplifies the complexity associated with drawing different shapes.
Composition takes care of composite shapes.

Here's how we translate these principles into our shape-drawing application:

JavaScript

// Define the basic Shape class
class Shape {
    // Abstract method that will be implemented in each subclass
    draw() {
        throw new Error("Subclass must implement abstract method");
    }
}

// Define the Circle class
class Circle extends Shape {
    // Implement the draw method for circle
    draw() {
        console.log("Drawing a circle.");
    }
}

// Define the Square class
class Square extends Shape {
    // Implement the draw method for square
    draw() {
        console.log("Drawing a square.");
    }
}

// Define the ShapeComposite class
class ShapeComposite extends Shape {
    // Initialize with an empty list of shapes
    constructor() {
        super();
        this.shapes = [];
    }

    // Add a new shape to the composite
    addShape(shape) {
        this.shapes.push(shape);
    }

    // Implement the draw method to draw each shape in composite
    draw() {
        for (const shape of this.shapes) {
            shape.draw();
        }
    }
}

const circle = new Circle();
const square = new Square();

// Drawing individual shapes
circle.draw();  // Output: Drawing a circle.
square.draw();  // Output: Drawing a square.

// Create a ShapeComposite instance for composite shapes
const compositeShape = new ShapeComposite();

// Add individual shapes to the composite
compositeShape.addShape(circle);
compositeShape.addShape(square);

// Drawing the composite shape
compositeShape.draw();
/*
Output:
Drawing a circle.
Drawing a square.
*/

// Define the basic Shape class
class Shape {
    // Abstract method that will be implemented in each subclass
    draw() {
        throw new Error("Subclass must implement abstract method");
    }
}

// Define the Circle class
class Circle extends Shape {
    // Implement the draw method for circle
    draw() {
        console.log("Drawing a circle.");
    }
}

// Define the Square class
class Square extends Shape {
    // Implement the draw method for square
    draw() {
        console.log("Drawing a square.");
    }
}

// Define the ShapeComposite class
class ShapeComposite extends Shape {
    // Initialize with an empty list of shapes
    constructor() {
        super();
        this.shapes = [];
    }

    // Add a new shape to the composite
    addShape(shape) {
        this.shapes.push(shape);
    }

    // Implement the draw method to draw each shape in composite
    draw() {
        for (const shape of this.shapes) {
            shape.draw();
        }
    }
}

const circle = new Circle();
const square = new Square();

// Drawing individual shapes
circle.draw();  // Output: Drawing a circle.
square.draw();  // Output: Drawing a square.

// Create a ShapeComposite instance for composite shapes
const compositeShape = new ShapeComposite();

// Add individual shapes to the composite
compositeShape.addShape(circle);
compositeShape.addShape(square);

// Drawing the composite shape
compositeShape.draw();
/*
Output:
Drawing a circle.
Drawing a square.
*/

This example unveils how Abstraction streamlines the process of drawing different shapes and Composition handles complex shapes.

Combining OOP Principles in JavaScript: Real-World Solutions

Introduction and Lesson Goal

Real-life Example 1: Building an Online Library System

Join the 1M+ learners on CodeSignal

Real-life Example 2: Building a Shape Drawing Application

Lesson Summary and Practice