Decorator Design Pattern

Decorator Design Pattern

Table of contents


  • The decorator pattern focuses on adding properties, functionalities, and behaviour to existing classes dynamically

  • The additional decoration functionalities aren’t considered essential enough to be a part of the original class definition as they can cause clutter. Hence, the decorator pattern allows modifying the code without changing the original class

  • Unlike the creational patterns, the decorator pattern is a structural pattern that does not focus on object creation but rather a decoration.

  • Hence, it doesn’t rely on prototypal inheritance alone. it takes the object and keeps adding decoration to it. This makes the process more streamlined.


class BasicMaths {
  addition(a, b) {
    console.log(a + b);

  subtraction(a, b) {
    console.log(a - b);

function addMethodsTOObjects(obj) {
  obj.multiply = function (a, b) {
    console.log(a * b);

  obj.division = function (a, b) {
    console.log(a / b);

  return obj;

const obj = new BasicMaths();
const newObjWithExtendedMethods = addMethodsTOObjects(obj);
console.log(obj.addition(10, 5));
console.log(obj.subtraction(10, 5));
console.log(newObjWithExtendedMethods.multiply(10, 5));
console.log(newObjWithExtendedMethods.division(10, 5));
class SuperHero {
  constructor(name, power) { = name;
    this.power = power;

function SuperHeroWithSword(superhero) {
  superhero.sword = true;
  superhero.hasSword = function () {
    return `${}'s power is ${this.power}, and he also has a sword now.`;
  return superhero;

function SuperHeroWithSuperSpeed(superhero) {
  superhero.superSpeed = true;
  superhero.hasSuperSpeed = function () {
    return `${}'s power is ${this.power}, and he also has the super speed now.`;
  return superhero;

function SuperHeroWithSpeedAndSword(superhero) {
  superhero.speedAndSword = true;

  superhero.hasSpeedAndSword = function () {
    return `${}'s power is ${this.power}, and he also has both super speed and a sword now.`;
  return superhero;

const superHero = new SuperHero();
const superHeroWithSword = SuperHeroWithSword(superHero);
const superHeroWithSuperSpeed = SuperHeroWithSuperSpeed(superHero);
const superHeroWithSpeedAndSword = SuperHeroWithSpeedAndSword(superHero);

Did you find this article valuable?

Support Bhalala Mihir by becoming a sponsor. Any amount is appreciated!