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",
  };

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,
    };

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);
},
};
};

We can now call the function

 const regulator = regulator (Des, MoneyInbank, StopDebt);

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);

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}`);
    },
  };

Let us assign an object

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

We can increase the speed of Breadmill1

 Breadmill1.inclinespeed();

We can decrease the speed of Breadmill1

 Breadmill1.declinespeed();

We can stop the Breadmill

 Breadmill1.stopmachine();

We access the brand of Breadmill1

console.log(Breadmill1.get("brand"));

We can change the brand of Breadmill1

  Breadmill1.brand = "PowerMax";
  console.log(Breadmill1.get("brand"));

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.