Javascript Introduction
Comments in Javascript
Javascript Variables
Difference between var, let and const in Javascript
Datatypes
Assignment Operators
Logical Operators
Comparison Operators
Actions alert, prompt & confirm

Javascript Flow Control
Conditional Statements in Javascript
Nullish coalescing operator in Javascript
Break and Continue in Javascript
Loops in javascript
for loop in Javascript
while loop

Javascript Functions
Javascript Functions
JavaScript Arrow Function

Javascript Objects
Javascript Objects

Javascript Array
Javascript Arrays

Javascript Error Handling
Error Handling in Javascript

Javascript ES6
Set
Javascript Spread Operator
Rest Parameter in Javascript

Javascript Asynchronous
Javascript Callback Function
Promises in Javascript
Promise Chaining
Async-Await in Javascript

Javascript DOM
DOM Document
DOM Elements
DOM Attributes
DOM Manipulation
DOM Node Lists
Javascript Events
DOM Traversing Elements
DOM EventListener

Javascript Class
Classes in javascript
Class Inheritance

Javascript Design Principles
SOLID - The Single responsibility principle in javascript
SOLID - Open-Closed principle in Javascript

Other Topics
Javascript Hoisting
Filter, Map and Reduce functions in Javascript
Closure in Javascript
Optional chaining operator in Javascript
Consoling in table format in javascript
Fetch API in Javascript
HTML web Storage API
Checking the online or offline status of the browser

SOLID - Open/Closed principle in Javascript

In this article, we shall focus on the Open/Closed principle of SOLID principles.

Open/Closed Principle

Bertrand Meyer, who gave an explanation to Open/Closed Principle as

"Software entities (classes, modules, functions, etc.) should be open for extension, but closed for modification."

This means, that our coding should be written in such a way that a class or a module or a function can allow us to add new functionality but it should not allow change to the existing code.

Below is the code which satisfies the Single-Responsibility Principle, but it violates the Open/Closed Principle.

    class Employee {
  constructor(name) {}
  getEmployeeInfo() {}
  saveEmployee(employeeObject) {}
}

class Logger {
  constructor() {}

  log(content, type) {
    const resultString = this.formatMessage(content, type);
    print(resultString);
  }

  print(resultString) {
    console.log(resultString);
  }

  formatMessage(content, type) {
    const date = new Date();
    let resultMessage = "";
    if (type === "success") {
      resultMessage = `Success: ${content} - ${date}`;
    } else if (type === "error") {
      resultMessage = `Error: ${content} - ${date}`;
    } else {
      resultMessage = `${content} - ${date}`;
    }
    return resultMessage;
  }
}

const logger = new Logger();
logger.log("Employee information saved successfully", "success");

  

In the above coding, the function formatMessage() gets the content and type as its parameter. Based on the type parameter the resultMessage will be formed.

Suppose, if we want to add a new type, say 'warning' then we are supposed to add a new else-if condition to check the type to be 'warning' and change the resultMessage string.

    formatMessage(content, type) {
    const date = new Date();
    let resultMessage = "";
    if (type === "success") {
      resultMessage = `Success: ${content} - ${date}`;
    } else if (type === "error") {
      resultMessage = `Error: ${content} - ${date}`;
    } else if (type === "warning") {
      resultMessage = `Warning: ${content} - ${date}`;
    }
	else {
      resultMessage = `${content} - ${date}`;
    }
    return resultMessage;
  }
     
  

So this type of modification violates the Open/Closed Principle. The function formatMessage() should be closed for modification. To rectify this code we have to make changes to the code as below

    class Logger {
  logObject;
  constructor(logObject) {
    this.logObject = logObject;
  }

  log(content) {
    const resultString = this.logObject.getMessage(content);
    console.log(resultString);
  }
}

class ErrorLog {
  constructor() {}
  getMessage(message) {
    return `Error: ${message} - ${new Date()}`;
  }
}

class SuccessLog {
  constructor() {}
  getMessage(message) {
    return `Success: ${message} - ${new Date()}`;
  }
}

const successLogger = new Logger(new SuccessLog());
successLogger.log("Employee information saved successfully");

const errorLogger = new Logger(new ErrorLog());
errorLogger.log("Error has occurred.");

  

Here, we have created a class named Logger, which takes an object as a parameter in its constructor. The parameter object can be the instances of a class. The Logger class will have a function named log() which uses the parameter object which is logObject to call a function getMessage() to form and return the result message. Then the returned result message will be printed to the console.

If we need to print the error message then we create the instance of ErrorLog class and return it as the parameter during the instantiation of the Logger class.

const successLogger = new Logger(new SuccessLog());

Now if we need to print any warning message, then we need to create a new class like SuccessLog and ErrorLog with getMessage() function.

Now to print a warning message, we will simply pass the instance of the Warning class to the Logger class instantiation. When rewriting the code, it looks something like the below code.

    class Logger {
  logObject;
  constructor(logObject) {
    this.logObject = logObject;
  }

  log(content) {
    const resultString = this.logObject.getMessage(content);
    console.log(resultString);
  }
}

class ErrorLog {
  constructor() {}
  getMessage(message) {
    return `Error: ${message} - ${new Date()}`;
  }
}

class SuccessLog {
  constructor() {}
  getMessage(message) {
    return `Success: ${message} - ${new Date()}`;
  }
}

class WarningLog {
  constructor() {}
  getMessage(message) {
    return `Warning: ${message} - ${new Date()}`;
  }
}

const successLogger = new Logger(new SuccessLog());
successLogger.log("Employee information saved successfully");

const errorLogger = new Logger(new ErrorLog());
errorLogger.log("Error has occurred.");

const warningLogger = new Logger(new WarningLog());
warningLogger.log("This method is depricated.");
   
  

Running the above code will produce the following output:

Success: Employee information saved successfully - Fri Jan 03 2020 23:12:55 GMT+0530 (India Standard Time)
Error: Error has occurred. - Fri Jan 03 2020 23:12:55 GMT+0530 (India Standard Time)
Warning: This method is depricated. - Fri Jan 03 2020 23:12:55 GMT+0530 (India Standard Time)

SOLID - Open/Closed principle in Javascript

Open/Closed Principle

Categories

Most Read