Last active
May 24, 2023 13:22
-
-
Save vladilenm/33485ae114d44a53d68a46b9bd9880fb to your computer and use it in GitHub Desktop.
Inheritance vs Composition in JavaScript
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function createProgrammer(name) { | |
const programmer = {name} | |
return { | |
...programmer, | |
...canCode(programmer) | |
} | |
} | |
function canCode({ name }) { | |
return { | |
code: () => console.log(`${name} is coding...`) | |
} | |
} | |
function canAngular({ name }) { | |
return { | |
angular: () => console.log(`${name} is creating Angular app...`) | |
} | |
} | |
function canNodejs({ name }) { | |
return { | |
nodejs: () => console.log(`${name} is programming on Node JS...`) | |
} | |
} | |
function createFrontend(name) { | |
const programmer = createProgrammer(name) | |
return { | |
...programmer, | |
...canAngular(programmer), | |
...canReactAndVue(programmer) | |
} | |
} | |
function createBackend(name) { | |
const programmer = createProgrammer(name) | |
return { | |
...programmer, | |
...canNodejs(programmer) | |
} | |
} | |
function createFullstack(name) { | |
const programmer = createProgrammer(name) | |
return { | |
...programmer, | |
...canNodejs(programmer), | |
...canAngular(programmer) | |
} | |
} | |
function canReactAndVue({ name }) { | |
return { | |
react: () => console.log(`${name} is creating React app...`), | |
vue: () => console.log(`${name} is creating Vue app...`) | |
} | |
} | |
const programmer = createProgrammer('Oleg') | |
programmer.code() | |
const frontend = createFrontend('Frontend') | |
frontend.code() | |
frontend.angular() | |
frontend.react() | |
frontend.vue() | |
const backend = createBackend('Max') | |
backend.code() | |
backend.nodejs() | |
const fullstack = createFullstack('Elena') | |
fullstack.angular() | |
fullstack.nodejs() | |
fullstack.code() |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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...`) | |
} | |
} | |
class Fullstack extends Frontend { | |
// Bad! Dublicate! | |
nodejs() { | |
console.log(`${this.name} is programming on Node JS...`) | |
} | |
} | |
const programmer = new Programmer('Programmer 1') | |
programmer.code() | |
const frontend = new Frontend('Frontend') | |
frontend.code() | |
frontend.angular() | |
const backend = new Backend('Max') | |
backend.code() | |
backend.nodejs() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment