10-JS/TS OOP: Level Two: OOP Principles
Tags: javascript, oop, typescript
Published: 2022-11-28 06:50:56

---
title: 10-JS/TS OOP: Level Two: OOP Principles
published: true
description: 
series: jstsoop
tags: javascript, oop, typescript
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n7zg8k3tetz1sky4g2pm.png
# Use a ratio of 100:42 for best results.
# published_at: 2022-10-25 09:51 +0000
---

## OOP Principles

We have learned the basics of OOP in either `Javascript` or `Typescript`, that was just the beginning, our next level is to learn the principles of OOP.

## What is meant by OOP Principles?

We already now know what OOP is, how to construct a class, how to define its members, static members and so on, but we want now to know how to use these classes properly.

Think of classes as `Legos`, we can build a house with them, but we need to know how to use them properly, we need to know how to build a house with them, so we need to know the principles of building a house with `Legos`.

> I'll try not to write too much information and keep it simple as much as i could so you don't get lost with the information, also you may find weird words, just focus with the main idea and i'll make it easier for you to understand.

## What are the OOP Principles?

Here are some of OOP Principles:

1. Encapsulation
2. Polymorphism
3. SOLID
4. DRY
5. KISS
6. YAGNI
7. Law of Demeter
8. Composition over Inheritance
9. Separation of Concerns

And there are more, but we will focus on these principles, why? because these are the ones that i remember sofar 😂

Let's get started with the very famous principle, the `SOLID` principle.

## SOLID

SOLID is an acronym for `the first five object-oriented design (OOD) principles` by Robert C. Martin, popularized by Michael Feathers, and expanded by Martin Fowler, and they are:

1. Single responsibility principle
2. Open/closed principle
3. Liskov substitution principle
4. Interface segregation principle
5. Dependency inversion principle

So what are these weird words that i wrote above? let's break them down.

So `SOLID` is a combination of first letter of each of the above `five` principles, and each of these principles has a meaning, let's see what they mean.

### Single Responsibility Principle

The `Single Responsibility Principle` states that `a class should have one and only one job`.

We can also say that a single file should have a single class as well, this will make it easier to maintain and test.

So the principle states that the class should have one job to do, don't overload it with too many responsibilities, this will make it hard to maintain and test.

Think of it as you're in a company, an employee should do one job, this will make him/her more productive and efficient.

### Open/Closed Principle

The `Open/Closed Principle` states that `a class should be open for extension, but closed for modification`.

What does this mean? basically this principle is about to have a class to be extended `Inherited from` but not modified, so if you want to add a new feature to the class, you should extend it and not modify it.

For example, if we have a `Car` class that does it job is to drive, but if we want to make a `TurboCar` that has a turbo engine that allows you to drive faster, we should extend the `Car` class and not modify it, or even better, a `FlyingCar`, this class will extend the `Car` class which will make you drive and adds a new feature which is flying.

### Liskov Substitution Principle

The `Liskov Substitution Principle` states that `subclasses should be substitutable for their base classes`.

> [Barbara Liskov](https://en.wikipedia.org/wiki/Barbara_Liskov) is an American computer scientist and professor emerita of computer science at the Massachusetts Institute of Technology (MIT). She is known for her work on the design of programming languages and for her contributions to the field of computer science education.

So this principle states that if we have a class `A` that extends another class `B`, then `A` should be substitutable for `B`.

For example, if we have a `Car` class that extends a `Vehicle` class, then `Car` should be substitutable for `Vehicle`, so if we have a function that takes a `Vehicle` as a parameter, then we can pass a `Car` to it.

### Interface Segregation Principle

The `Interface Segregation Principle` states that `many client-specific interfaces are better than one general-purpose interface`.

What is on earth is this? 😂, let's see

So this principle states that if we have a class that implements an interface, then this class should implement only the methods that it needs, not all of them.

So don't make a BIG `interface` that has a lot of methods, instead make small interfaces that can be used separately.

Remember the single responsibility principle? this principle is related to it, so if we have a class that implements an interface, then this class should implement only the methods that it needs, not all of them (The BIG interface we talked about is a violation of the single responsibility principle).

### Dependency Inversion Principle

The `Dependency Inversion Principle` states that `one should depend upon abstractions, not concretions`.

Remember the `abstract` and `concrete` keywords? this principle is related to them.

So what could be called an `abstract`? well, basically two things: `interfaces` and `abstract classes`, any of these two can be called an `abstract` and the ones that implement them are called `concrete`.

Now regarding our principle, this principle states that we should depend on an `abstract class` or an `interface` not the `concrete class` that implements them.

For example, if we have a `Car` class that extends a `Vehicle` class, then we should depend on the `Vehicle` class, not the `Car` class.

Or even better, we can depend on `Driveable` interface, which is an interface that has a `drive()` method, so we can depend on this interface instead of the `Vehicle` class, this could be a `Vehicle` class or a `Plane` class or a `Ship` class and so on.

> This principle is the heart of Dependency Injection, which is a design pattern that allows us to decouple our classes from their dependencies that we'll talk about later in the Design Patterns section.

## 🎨 Conclusion

That was an introduction to the OOP principles, we also talked about the `SOLID` principle, which is the most famous one.

We're going to go through over each one of the listed principles list in our next articles.

## ☕♨️ Buy me a Coffee ♨️☕

If you enjoy my articles and see it useful to you, you may [buy me a coffee](https://www.paypal.com/paypalme/hassanzohdy), it will help me to keep going and keep creating more content.

## 😍 Join our community

Join our community on [Discord](https://discord.gg/uBh98KZGGF) to get help and support.

## 📚 Bonus Content 📚

You may have a look at these articles, it will definitely boost your knowledge and productivity.

General Topics

* [Event Driven Architecture: A Practical Guide in Javascript](https://dev.to/hassanzohdy/event-driven-architecture-the-best-paradigm-that-i-love-to-work-with-in-javascript-and-node-js-1gnk)
* [Best Practices For Case Styles: Camel, Pascal, Snake, and Kebab Case In Node And Javascript](https://dev.to/hassanzohdy/best-practices-for-case-styles-camel-pascal-snake-and-kebab-case-in-node-and-javascript-55oi)
* [After 6 years of practicing MongoDB, Here are my thoughts on MongoDB vs MySQL
](https://dev.to/hassanzohdy/after-6-years-of-practicing-mongodb-here-are-my-thoughts-on-mongodb-vs-mysql-574b)

Packages & Libraries

* [Collections: Your ultimate Javascript Arrays Manager](https://dev.to/hassanzohdy/collections-your-ultimate-javascript-array-handler-3o15)
* [Supportive Is: an elegant utility to check types of values in JavaScript](https://dev.to/hassanzohdy/supportive-is-an-elegant-utility-to-check-types-of-values-in-javascript-1b3e)
* [Localization: An agnostic i18n package to manage localization in your project](https://dev.to/hassanzohdy/mongez-localization-the-simplest-way-to-translate-your-website-regardless-your-favorite-framework-4gi3)

 React Js Packages

* [useFetcher: easiest way to fetch data in React Js](https://dev.to/hassanzohdy/usefetcher-the-easiest-way-to-fetch-data-in-react-45o9)

Courses (Articles)

* [ES6++: The Ultimate Guide to ES6 and Beyond](https://dev.to/hassanzohdy/es6-1-introduction-h3e)
* [Node Js 2023 Course: Node With Typescript, The Ultimate Guide](https://dev.to/hassanzohdy/nodejs-course-2023-introduction-to-nodejs-3n4e)
* [React Js: Let"s Create File Manager With React Js and Node Js](https://dev.to/hassanzohdy/lets-create-a-file-manager-from-scratch-with-react-and-typescript-chapter-i-a-good-way-to-expand-your-experience-5g4k)