Open-Closed Principle (OCP) - SOLID
🧱

Open-Closed Principle (OCP) - SOLID

Tags
Clean Code
Javascript
Software Development
SOLID
Published
Published September 13, 2022
Author
Due Date

The SOLID Principles

SOLID is an acronym for five other class-design principles:
  • Interface Segregation Principle
  • Dependency Inversion Principle.

The Open-Closed Principle (OCP)

☑️ Topic: Objects and Data Structures
 
☑️ Idea: Classes should be closed for modification but open for extension. In other words, you shouldn’t need to change existing code to add more functionality to a class.
 
☑️ Benefits: Maintainability, Re-usability
 
☑️ Guideline: If you are thinking of adapting a class to add new functionality, consider extending it instead.

Benefits Explained

  • Minimizes changes: You only need to add things when you need to extend a class.
  • Working code is not affected: It’s harder to break things because changes in existent classes are not needed.
 

Example

BAD

// BAD class AjaxAdapter extends Adapter { constructor() { super(); this.name = "ajaxAdapter"; } } class NodeAdapter extends Adapter { constructor() { super(); this.name = "nodeAdapter"; } } class HttpRequester { constructor(adapter) { this.adapter = adapter; } fetch(url) { if (this.adapter.name === "ajaxAdapter") { return makeAjaxCall(url).then(response => { // transform response and return }); } else if (this.adapter.name === "nodeAdapter") { return makeHttpCall(url).then(response => { // transform response and return }); } } } function makeAjaxCall(url) { // request and return promise } function makeHttpCall(url) { // request and return promise }
 

GOOD

class AjaxAdapter extends Adapter { constructor() { super(); this.name = "ajaxAdapter"; } request(url) { // request and return promise } } class NodeAdapter extends Adapter { constructor() { super(); this.name = "nodeAdapter"; } request(url) { // request and return promise } } class HttpRequester { constructor(adapter) { this.adapter = adapter; } fetch(url) { return this.adapter.request(url).then(response => { // transform response and return }); } }