DEV Community

Muhammad Muhktar Musa
Muhammad Muhktar Musa

Posted on

Key difference between Inheritance and compose

Introduction

Everything in JavaScript is treated as an object. Functions too are high class objects in a way and are treated as such in javaScript.

Compose

To make large complex objects simple, many small objects are composed together. Composition is a cleaner, reusable and better solution for better code.
Let us take a look at an example


const MoneyInbank = {
    highRate(investspeed, devestSpeed) {
      return investspeed + devestSpeed;
    },
    lowrate(investspeed, devestSpeed) {
      return investspeed- investspeed;
    },
  };

const StopDebt = {
    stop(investspeed) {
      this.investspeed = 0;

      return 0;
    },
  };

const Bank = {
    model: "Grco",
  };
Enter fullscreen mode Exit fullscreen mode

To make this large object smaller and reusable and implement functionality we can create a function that implements a functionality.


 const regulator = function (Des, MoneyInbank, StopDebt) {
    const bank = Object.create(Des);
    const money = Object.create(MoneyInbank);
    const stopmoney = Object.create(StopDebt);
    const props = {
      investspeed: 0,
      model: bank.model,
    };

Enter fullscreen mode Exit fullscreen mode

We can now create our set and get methods to access the props

 return {
      set(name, value) {
        props[name] = value;
      },

      get(name) {
        return props[name];
      },

      log(name) {
        console.log(`${name}: ${props[name]}`);
      },

      slowLoan() {
        props.investspeed =  money.lowrate(props.investspeed, 5);
      },
     speedLoan() {
        props.investspeed = money.highRate(props.investspeed, 10);
    },

stopLoan() {
  props.investspeed = stopmoney.stopLoan(props.investspeed);
},
};
};

Enter fullscreen mode Exit fullscreen mode

We can now call the function


 const regulator = regulator (Des, MoneyInbank, StopDebt);
Enter fullscreen mode Exit fullscreen mode

Run the methods in our console giving them values and we can see the outcome. we can increase & decrease the investspeed according to our preferences


 regulator.slowLoan(investspeed);
 regulator.speedLoan(investspeed);
 regulator.stopLoan(investspeed);
Enter fullscreen mode Exit fullscreen mode

regulator can implement the functionality of regulator when needed. Now, regulator can increase its investspeed, decrease its investspeed. In composition the Inheritance gets assisted automatically.

Inheritance

Inheritance can be defined as gaining some or all traits (functionality) of parent and then providing a relational structure. Mixin plays a vital role when it comes to inheritance in JavaScript. Mixin is actually mixing which could be any i.e. bank into a moneymixin means mixing bank to the money.
To understand the concept properly let’s take an example

script>
  const breadMixer = {
    set(name, value) {
      this[name] = value;
    },

    get(name) {
      return this[name];
    },

    mixspeed: 0,

    inclinespeed() {
      this.mixspeed += 10;
      console.log(`Inclinedspeed is: ${this.mixspeed}`);
    },
    declinespeed() {
      this.mixspeed -= 5;
      console.log(`Declinedspeed is: ${this.mixspeed}`);
 },

    stopmachine() {
      this.mixspeed = 0;
      console.log(`Now the speed is: ${this.mixspeed}`);
    },
  };
Enter fullscreen mode Exit fullscreen mode

Let us assign an object

 const Breadmill = { brand: "Maxpro", mixspeed: 0 };
  const Breadmill1 = Object.assign({}, Breadmill, breadMixer);
Enter fullscreen mode Exit fullscreen mode

We can increase the speed of Breadmill1

 Breadmill1.inclinespeed();
Enter fullscreen mode Exit fullscreen mode

We can decrease the speed of Breadmill1

 Breadmill1.declinespeed();
Enter fullscreen mode Exit fullscreen mode

We can stop the Breadmill

 Breadmill1.stopmachine();
Enter fullscreen mode Exit fullscreen mode

We access the brand of Breadmill1

console.log(Breadmill1.get("brand"));
Enter fullscreen mode Exit fullscreen mode

We can change the brand of Breadmill1

  Breadmill1.brand = "PowerMax";
  console.log(Breadmill1.get("brand"));
Enter fullscreen mode Exit fullscreen mode

It is visible from the operations performed by Breadmill1 which was assigned a Breadmill object which possesses breadMixer.At First and foremost, the mixspeed was 0 after applying inclinespeed() method the mixspeed increased by 5 after that decline speed method was performed which reduced the speed by 5 finally stop operation was performed which stopped the mixer by making its mix speed zero. The brand was changed from Maxpro to Powermax which shows the power of Inheritance

The key differences between composition and inheritance are
Composition allows code-reuse while Inheritance does not allow code-reuse. In composition, you will not need to extend classes while in inheritance, you will need to extend classes.

Discussion (0)