Dependency Inversion Principle with Example

Object-Oriented Programming | Solid Principles with Examples

Solid principle

Please refer above blog post to Understand SOLID principles in JavaScript. In this post, we will learn the Last Solid principle of Dependency Inversion with an Example in Javascript.

💡Let’s Create a Zoo Model

The zoo contains below all things.

1. There are Cages in the zoo.
2. There are Guards in the zoo
3. There are Humans in the zoo.
4. There is a Food zone in the zoo.
5. There are Animals in the zoo.
6. There are Vehicles in the zoo.
7. There are Trees and Plants in the zoo.
8. There are nests for several birds.

and many more things…

💻Now Design one of the things that is the Cage structure.

Cages have –
1. Bars – Wooden, Iron bars, small bars
2. Feeding Bowl – Fruits, water, meat.
3. size – height, width

▶️ Let’s first create an interface and classes for the above properties.

interface IBars {}
class WoodenBars implements IBars {}
class IronBars implements IBars {}
class SmallGapBars implements IBars {}

interface IFeedingBowl {}
class MeatFeedingBowl implements IFeedingBowl {}
class FruitFeedingBowl implements IFeedingBowl {}
class WaterFeedingBowl implements IFeedingBowl {}

interface ISize {}
class CageSize implements ISize {}

carnivorous animals -मांसाहारी जानवर
herbivorous animals – शाकाहारी जानवर

class CarnivorousCage {
  meetFeedingBowl: MeatFeedingBowl;
  waterBowl: WaterFeedingBowl;
  ironBars: IronBars;
  smallGapBars: SmallGapBars;
  listOfAnimals = new Array(5);

  putAnimals() {
    for (let i = 0; i < 5; i++) {
      this.listOfAnimals.push('carnivorous animal' + i);
    }
  }
}

class HerbivorousCage {
  fruitsFeedingBowl: FruitFeedingBowl;
  waterBowl: WaterFeedingBowl;
  woodenBars: WoodenBars;
  listOfAnimals = new Array(5);

  putAnimals() {
    for (let i = 0; i < 5; i++) {
      this.listOfAnimals.push('herbivorous animal' + i);
    }
  }
}

✔️ Composite Class – Classes that are made upon several other classes. CarnivorousCage & HerbivorousCage are composite classes because they are created with other classes.

✔️ Utility Class – FruitFeedingBowl, WoodenBars, IronBars, etc – are utility classes.

🤔 PROBLEM WITH THE ABOVE CODE –

1. For each type of cage, we have to create a new class.
2. Maximum codes are common in both classes, so this is a code duplicate.

Let’s try to understand the Dependencies in this structure –

💡 First Understand, what are High level and low-level designs?

High Level – They are generic and abstract and they may contain several things in self.

Low level – They are very specific and very details about one thing. It may be talking about only one thing.

Example –

College – High-level design
Medical college – low level (specific to medical studies only)
Eng College – low level
Clothes – High level
Jacket – low level
Coats – low level

So in the above code (Zoo) – find out low-level and high-level –

1. IFeedingBowl – High level
2. IBars – High level
3. FruitFeedingBowl – Low level (specific to fruits only)
4. MeatFeedingBowl – Low level
5. HerbivorousCage – High level
6. CarnivorousCage – High level

interfaces – High level (IBars, IFeedingBowl)

Implementations – Low level (FruitFeedingBowl, MeatFeedingBowl, WoodenBars)

Class – High level (HerbivorousCage, CarnivorousCage) – It seems specific but they are composite classes.

CarnivorousCage depends on three classes MeatFeedingBowl, WaterFeedingBowl, and IronBars and
they internally depend on other interfaces.

👀 Issue is here –

High-level modules or Classes depend on Low-level modules or details.

⭐ Dependency Inversion Principle ⭐

High-level modules should NOT depend on low-level modules/details.
Instead, they should depend on Abstractions (interfaces).

How can we achieve dependency inversion – by 💉 Dependency Injection?

Redesign Cage class using dependency inversion-

class Cage {
  // dependency inversion
  bowl: IFeedingBowl;
  bars: IBars;
  listOfAnimals: string[] = [];

  // inject the dependencies in the constructor
  constructor(bowl: IFeedingBowl, bars: IBars, animals: string[]) {
    this.bowl = bowl;
    this.bars = bars;
    this.listOfAnimals = animals;
  }
}

// Client will pass dependencies.

class Client {
  main() {
    var CarnivorousCage = new Cage(new MeatFeedingBowl(), new IronBars(), ['Tiger', 'Cheetah']);
    var HerbivorousCage = new Cage(new FruitFeedingBowl(), new WoodenBars(), ['Horse', 'Monkey', 'Peecock']);
  }
}

JS Mount

Learn More

Dependency Inversion Principle with Example | Solid Principles

👀 Issue is here –

Leave a Reply Cancel Reply