Skip to content

Instantly share code, notes, and snippets.

@igorvolnyi
Created January 27, 2020 19:51
Show Gist options
  • Save igorvolnyi/9ea80806b33088ab9fb3195e143d5bac to your computer and use it in GitHub Desktop.
Save igorvolnyi/9ea80806b33088ab9fb3195e143d5bac to your computer and use it in GitHub Desktop.
Inheritance vs composition in JavaScript
function createProgrammer(name) {
const programmer = { name };
return {
...programmer,
...canCode(programmer)
};
}
function canCode({ name }) {
return {
code: () => console.log(`${name} is coding...`)
};
}
const programmer = createProgrammer('Fabriccio');
programmer.code();
function createFrontend(name) {
const programmer = createProgrammer(name);
return {
...programmer,
...canAngular(programmer)
};
}
function canAngular({ name }) {
return {
angular: () => console.log(`${name} is creating Angular app...`)
};
}
const frontend = createFrontend('Juan');
frontend.code();
frontend.angular();
function createBackend(name) {
const programmer = createProgrammer(name);
return {
...programmer,
...canNodejs(programmer)
};
}
function canNodejs({ name }) {
return {
nodejs: () => console.log(`${name} is writing on NodeJS...`)
};
}
const backend = createBackend('Pedro');
backend.code();
backend.nodejs();
function createFullstack(name) {
const programmer = createProgrammer(name);
return {
...programmer,
...canAngular(programmer),
...canNodejs(programmer)
};
}
const fullstack = createFullstack('Masha');
fullstack.code();
fullstack.nodejs();
fullstack.angular();
class Programmer {
constructor(name) {
this.name = name;
}
code() {
console.log(`${this.name} is coding...`);
}
}
class Frontend extends Programmer {
angular() {
console.log(`${this.name} is creating Angular app...`);
}
}
class Backend extends Programmer {
nodejs() {
console.log(`${this.name} is programming on Node JS...`);
}
}
const programmer = new Programmer('Billy');
programmer.code();
const frontend = new Frontend('Radj'); // Dude from India
frontend.code();
frontend.angular();
const backend = new Backend('Huy'); // Dude from China
backend.code();
backend.nodejs();
// Now here is the problem.
class Fullstack extends Frontend {
// We have to duplicate nodejs() method of Backend here...
nodejs() {
console.log(`${this.name} is programming on Node JS...`);
}
}
// See composition.js for solution.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment