Skip to content

Instantly share code, notes, and snippets.

@vladilenm
Last active May 24, 2023 13:22
Show Gist options
  • Save vladilenm/33485ae114d44a53d68a46b9bd9880fb to your computer and use it in GitHub Desktop.
Save vladilenm/33485ae114d44a53d68a46b9bd9880fb 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...`)
}
}
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()
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