Open closed principle defines like that
Software elements (classes, modules, function...) should be open for extension, but closed for modification
😦? ← if you react like this now, keep reading this article👍
👎 Bad code
This is super small application that you can find how to say "Good morning" in each country
class Country {
name: string
constructor(name: string) {
this.name = name
}
}
const greetingList = (countries: Country[]) => {
countries.forEach(country => {
switch (country.name) {
case 'poland':
console.log('dzien dobry')
break
case 'japan':
console.log('ohayo')
break
case 'usa':
console.log('good morning')
break
default:
console.log('* no data *')
break
}
})
}
const countries: Country[] = [
new Country('poland'),
new Country('japan'),
new Country('usa')
]
greetingList(countries)
// dzien dobry
// ohayo
// good morning
😅 How could be bad code ??
well, if you want to add "spain" now, you would modify code like this
const greetingList = (countries: Country[]) => {
countries.forEach(country => {
switch (country.name) {
case 'poland':
console.log('dzien dobry')
break
case 'japan':
console.log('ohayo')
break
case 'usa':
console.log('good morning')
break
// 👇 add this code "spain", this is key code!
case 'spain':
console.log('buenos dias')
break
default:
console.log('* no data *')
break
}
})
}
const countries: Country[] = [
new Country('poland'),
new Country('japan'),
new Country('usa')
// 👇 add this code "spain"
new Country('spain')
]
This is exactly anti open-closed principle because greetingList() should be closed, we don't want it to be open.
In other words, we shouldn't modify greetingList() when we add/extension
Someone even makes some mistake while modifying code.
👍 Good code
So how we write code ??
// create interface
interface ICountry{
greeting(): string
}
// create each country class
class Poland implements ICountry {
greeting = () => 'dzien dobry'
}
class Japan implements ICountry {
greeting = () => 'ohayo'
}
class Usa implements ICountry {
greeting = () => 'good morning'
}
const greetingList = (countries: ICountry[]) => {
for (let i = 0; i < countries.length; i++) {
console.log(countries[i].greeting())
}
}
const countries: ICountry[] = [
new Poland(),
new Japan(),
new Usa()
]
greetingList(countries)
Important part of good code is creating each country class which depends on ICountry interface.
Then when you add "spain", just like that ↓
// create interface
interface ICountry{
greeting(): string
}
// create each country class
class Poland implements ICountry {
greeting = () => 'dzien dobry'
}
class Japan implements ICountry {
greeting = () => 'ohayo'
}
class Usa implements ICountry {
greeting = () => 'good morning'
}
// 👇 add just "Spain class"
class Spain implements ICountry {
greeting = () => 'Buenos dias'
}
// ⭐ Don't need to modify this function!
// ⭐ It means greetingList is closed, but for extension, it is opened
const greetingList = (countries: ICountry[]) => {
for (let i = 0; i < countries.length; i++) {
console.log(countries[i].greeting())
}
}
const countries: ICountry[] = [
new Poland(),
new Japan(),
new Usa(),
new Spain()
]
greetingList(countries)
Now as you see, just add Spain class. You don't need to modify greetingList(), so you might not make some mistake when you add country 👍
(Add) 💎 React.js
I even tweeted
He wrote it as clean code, but it also resolve opened principle problem 😎
Some people says open-closed principle is a bit exaggerated, because it makes code more complicate than bad code.
Actually I think so too, and it depends on situation.
But I'm sure it's important that you know this knowledge aside from whether you will use it or not.
And I highly recommend you to implement some code by yourself
sayonara👋
Top comments (0)