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.
Top comments (0)