JavaScript – S.O.L.I.D – The Five Principles of Object Oriented Design – Part 1

In this article, we will learn about the Javascript 5 SOLID Principles. We will discuss about the first SOLID principle Single responsibility principle” . This is Part 1 for Javascript Object oriented design SOLID principles.

 

“JavaScript is a loosely typed language, some consider it a functional language, others consider it an object oriented language, some think its both, and some think that having classes in JavaScript is just plain wrong. — Dor Tzur.”

so what S.O.L.I.D. is ?



S.O.L.I.D. stands for :

  • S — Single responsibility principle
  • O — Open closed principle
  • L — Liskov substitution principle
  • I — Interface segregation principle
  • D — Dependency Inversion principle
 
1. Single Responsibility Principle
 
“A class should have one and only one reason to change, meaning that a class should only have one job.”
 
For example, say we have some shapes and we wanted to sum all the areas of the shapes. 
 
const circle = (radius) => {
  const proto = { 
    type: 'Circle',
    //code 
  }
  return Object.assign(Object.create(proto), {radius})
}
const square = (length) => {
  const proto = { 
    type: 'Square',
    //code 
  }
  return Object.assign(Object.create(proto), {length})
}


First, we create our shapes factory functions and setup the required parameters.


so, What is a factory function ?

“In JavaScript, any function can return a new object. When it’s not a constructor function or class, it’s called a factory function.”

Next, we move on by creating the areaCalculator factory function and then write up our logic to sum up the area of all provided shapes.

const areaCalculator = (s) => {
  const proto = {
    sum() {
      // logic to sum
    },
    output () {
     return `

Sum of the areas of provided shapes: ${this.sum()}






    }
  }
  return Object.assign(Object.create(proto), {shapes: s})
}

To use the areaCalculator factory function, we simply call the function and pass in an array of shapes, and display the output at the bottom of the page.

const shapes = [
  circle(2),
  square(5),
  square(6)
]
const areas = areaCalculator(shapes)
console.log(areas.output())

The problem with the output method is that the areaCalculator handles the logic to output the data. Therefore, what if the user wanted to output the data as json or something else ?

All of the logic would be handled by the areaCalculator factory function, this is what ‘Single Responsibility principle’ frowns against; the areaCalculator factory function should only sum the areas of provided shapes, it should not care whether the user wants JSON or HTML.

So, to fix this you can create an SumCalculatorOutputter factory function and use this to handle whatever logic you need on how the sum areas of all provided shapes are displayed.

The sumCalculatorOutputter factory function would work liked this:

const shapes = [
  circle(2),
  square(5),
  square(6)
]
const areas  = areaCalculator(shapes)
const output = sumCalculatorOputter(areas)
console.log(output.JSON())
console.log(output.HAML())
console.log(output.HTML())
console.log(output.JADE())

Now, whatever logic you need to output the data to the users is now handled by the sumCalculatorOutputter factory function.


Conclusion


In this article (Part 1), We have discussed about the first SOLID principle Single responsibility principle

In part-2, We will learn about the second SOLID principle Open closed principle


In Part-3, We will learn about the other SOLID principles Liskov substitution principleInterface segregation principle, Dependency inversion principle.

 
Thanks for reading ! I hope you enjoyed and learned about Javascript Object oriented design SOLID principles concepts. Reading is one thing, but the only way to master it is to do it yourself.
 
If you have any comments, questions, or think I missed something, feel free to leave them below in the comment box.
 
Thanks again Reading. HAPPY READING!!😊😊😊

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s