S.O.L.I.D principles in JavaScript are an amazing set of rules & patterns to write maintainable and scalable code.

The 5 Principles are as follows:

1. Single responsibility principle

2. Open closed principle

3. Liskov substitution principle

4. Interface segregation principle

5. Dependency Inversion principle

• Single responsibility principle:

  Your Classes should have only a single reason to change and thus have only 1 job to do, let's understand this with the help of a CalorieTracker example:

  here is how you normally would write your classes

class CalorieTracker {
    constructor(maxCalorie) {
        this.maxCalorie = maxCalorie
        this.currentCalorie = 0
    }

    trackCalories(calorieCount) {
        this.currentCalorie += calorieCount
        if (this.currentCalorie > this.maxCalorie) {
            this.logMaxcalorie()
        }
    }

    logMaxcalorie() {
        console.log("Max Calorie Exceed!");
    }
}

let mydiet = new CalorieTracker(5000);
mydiet.trackCalories(2000);
mydiet.trackCalories(2000);
mydiet.trackCalories(2000);

So we have a CalorieTracker Class and this keeps track of calorie intake and logs `Max Calorie Exceed!` every time we intake calorie more than the upper limit.

So what's wrong here ??

so here we have 2 reasons to change this class:

• If you wanna change the logic behind our calorie tracker.

• if you wanna change what to log if calories are exceeded.

This is the problem your classes should only have a Single Responsibility making them easier to manage.

here is how we should write the same class above:

we will create a different module for logging/DOM logic & then import it to use wherever required eg below we have logger.js file

export default function (message) {
    console.log(message);
}

import logMaxcalorie from './logger.js'

class CalorieTracker {
    constructor(maxCalorie) {
        this.maxCalorie = maxCalorie
        this.currentCalorie = 0
    }
    trackCalories(calorieCount) {
        this.currentCalorie += calorieCount
        if (this.currentCalorie > this.maxCalorie) {
            logMaxcalorie('Max Limit Exceed'); // using loging function
        }
    }
}

let mydiet = new CalorieTracker(5000);
mydiet.trackCalories(2000);
mydiet.trackCalories(2000);
mydiet.trackCalories(2000); // Max Limit Exceed

So basically previously our CalorieTracker class had 2 reasons to change whether we wanna change the logic to how to track things and to change what to log/console.log, we separated that logger from our class now it has only 1 responsibility of logic of tracking we have a separate module for logging. if we wanna do something else instead of logging we will change that logger function instead of the main class. makes our code concise and easier to follow.

That's it for this one! hope you liked it BYE BYE : )

---

If you would like to follow me here they are:

Twitter

Github

Linkedin