DEV Community

Cover image for JS/TS OOP Course: 1-Introduction
Hasan Zohdy
Hasan Zohdy

Posted on • Updated on

JS/TS OOP Course: 1-Introduction

Introduction

OOP stands for Object Oriented Programming, it is programming paradigm that is used to structure a software app into simple, reusable pieces of code blueprints (usually called classes), which are used to create individual instances of objects.

OOP In Javascript

Javascript is a multi-paradigm language, meaning that it supports multiple programming paradigms. One of the paradigms that Javascript supports is OOP.

Classes was firstly introduced in ES6, it was improved and made more powerful.

OOP Before ES6

Before ES6 Classes, Javascript had a prototype-based inheritance, which is a pattern that uses prototypal inheritance to build up inheritance hierarchies.

For example, A class like this in ES6:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age}`);
  }
}
Enter fullscreen mode Exit fullscreen mode

Is equivalent to this in ES5:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function () {
  console.log(`Hello, my name is ${this.name} and I am ${this.age}`);
};
Enter fullscreen mode Exit fullscreen mode

But we can't really say this is a formal OOP structure, that's why i consider real OOP to be introduced in ES6.

What we'll cover in this course

In this course, we'll cover the following topics:

  • Classes
  • Objects
  • Constructors
  • Class Members
  • Static And Non-Static Members
  • Methods
  • Properties
  • Getters And Setters
  • Static Methods
  • Inheritance
  • Abstract Classes
  • Access Modifiers
  • Interfaces
  • Polymorphism
  • Encapsulation
  • Composition
  • Aggregation
  • SOLID Principles
  • Coupling And Cohesion

So in the previous list, there are two things, OOP principles and OOP concepts, we'll see it in depth for each single topic of the list.

What about Design Patterns?

Design patterns are not part of the OOP paradigm, but they are very useful in OOP. We'll cover them in a separate course.

Sometimes they are also called Object-Oriented Design or OOD for short.

Hint about this course

I will try to make this course more simpler, which means it will not be an academic course, but all the concepts will be explained in a simple way, so that you can understand them easily, and i'll provide a real world examples for each topic.

So you'll not see a lot of talking here, simple words and definitions will be the Dominator here.

☕♨️ Buy me a Coffee ♨️☕

If you enjoy my articles and see it useful to you, you may buy me a coffee, it will help me to keep going and keep creating more content.

😍 Join our community

Join our community on Discord to get help and support (Node Js 2023 Channel).

📚 Bonus Content 📚

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

General Topics

Packages & Libraries

React Js Packages

Courses (Articles)

Top comments (2)

Collapse
 
jonrandy profile image
Jon Randy 🎖️

It was firstly introduced in ES6, it was improved and made more powerful.

This is incorrect. JS has always been an OOP language. It uses prototype-based OO.

ES6 merely introduced syntactic sugar to make its OOP features look more like more familiar class based languages (when in fact it is still the same old prototypes underneath)

Collapse
 
hassanzohdy profile image
Hasan Zohdy

I know this, and all bundlers convert it to ES5 syntax, but as you mentioned, it's not a familiar syntax specially if you are coming from another programming language or you are new to OOP.

I'll make an update on the article to mention it though.

Thanks for your reply