What's the SOLID principles?

It's inevitable as you develop an application that it's going to grow in complexity. As your code base gets bigger and more complex, you will want to maintain how approachable it is. The goal is to have a code base where you have the freedom to build new features and extend current behaviour, while not having to worry about how hard it's going to be because of the existing code that's already in place.

Robert Cecil Martin named 5 different rules to create the SOLID principles. The aim of the rules is to provide a guideline to help you write code thats easier to work with and maintain.

The solid principles stand for:

  S - Single responsibility
O - Open/closed principle
L - Liskov substitution principle
I - Interface segregation principle 
D - Dependency inversion principle

This is the first article in a series of 5 where we will explore how these rules can be applied in JavaScript.

Single responsibility

The rule

A class should have only one reason to change.

Why it is important?

  • Testable. Code will be easier to test. Your expectations will be "I expect it to do this single thing".
  • Reusable. You can utilise existing tested code to compose a new feature.
  • Readable. Code is clearly defined in what it does. You can read the codebase and think "ok this bit is doing this particular thing and this bit over here is doing this other thing".
  • Refactorable. Having the ability to understand what code does, means you'll be able to confidently and more easily make change.

How can I use it?

You can use these techniques in every day work, across all languages. Whether your building something new or refactoring something old.

You can ask yourself these questions:

  • What is this code doing?
  • Is the code doing more than one thing?
  • Does this bit of code make sense in the context of the file?


Let's look at some code to cement this idea further.

This pen is set up as an example to illustrate code that should be improved by using the Single Responsibility Principle. As you'll see its a Greeter class that takes a list of guests and greets each guest.

Have a read of the code below, think about the questions we should ask and then we'll examine it.

What is this code doing?
  • It has a greet method that takes in a list of guests.
  • It loops over each of the guests.
  • It formats the name:
    • Switches all the characters to lowercase.
    • Grabs the first letter and makes it uppercase.
    • Gets all the characters except the first one and joins it to the first uppercase letter.
  • It creates a string of HTML, containing a message and the guest's name.
  • It appends that HTML string to the document.
Is the code doing more than one thing?

Looking at the previous question we can see the greet method is doing 5 main things. We can definitely refactor this and break it up into smaller chunks.

Does this bit of code make sense in the context of the file?

The Greeter class is responsible for greeting guests. Should it know how to format or care how guests names are formatted? We can see it is doing three formatting steps, perhaps it makes sense to pull the formatting steps into it's own Formatter class?


Here is a refactored version of the code with the single responsibility principle rule applied.

  • Pulled out the formatting code into it's own greeter class.
  • Changed the way we initialised the Greeter class.
    • We provide an optional parameter for the formatter we want to use. Not providing one will default to the Formatter class.
  • When we construct a class we provide the formatter and guests to use. Rather than leaving that in the greet method where its responsibility is to greet.
  • Now have a sendGreeting method which appends the greetings to the DOM.
  • New class with 3 formatting methods. These methods can be used independently from each other.
  • Formatter knows nothing about the Greeter class.

Wrap up

That's the single responsibility principle. If you have any questions about it or some of the ES6 syntax I've used, ask a question in the comments section.

If you want to see how another person explains it then check out the links below. They are both short videos which go over the same principle.