Object-Oriented Programming in JavaScript

If you are in programming then once in while you must hear about about OOP that stands for OBJECT-ORIENTED-PROGRAMMING. We'll learn about the OOP in this article in simple explanation. Object-Oriented Programming does not exist only in JavaScript.
OOP is a programming style used in many programming languages.

If we understand OOP in simple explanation then they are a simply a programming style of storing data in "objects" that represent real world things.

So instead of writing random functions and variables to store data, we group related things together. This give clean structure to code and data.

Real world objects like:

• A Car

• A User

• A Student

• A Bank Account

Each object has:

• properties (data - information)

• methods (actions - which does something)

For example a Car can has colour, speed and model as it's properties and it can perform actions such as start(), moveAhead(), moveBack() and break().

Understanding class with Real-world analogy: Blueprint → Objects

Think about building a house.

First, you create a blueprint.

Then many houses can be built using that blueprint.

Blueprint → House 1
          → House 2
          → House 3

In programming:

Class → Object 1
      → Object 2
      → Object 3

So Class is the blueprint and object are real instance created from the blueprint.

Class

Understanding Class in JavaScript

A class is a template used to create objects (think of class as blueprint - which help to build many similar things).

Example:

class User {
}

This class currently does nothing.

But it will define how a user object should look.

Creating Objects Using Classes

To create an object from a class we use the new **'**keyword'.

Example:

class User {}

const user1 = new User()

Here:

User → class
user1 → object

You can create many objects:

const user1 = new User()
const user2 = new User()
const user3 = new User()

Constructor Method

A constructor is a special method used to initialize objects when they are created.

Example:

class User {

  constructor(name, age) {
    this.name = name
    this.age = age
  }

}

Now to create an object:

const user1 = new User("Sam", 25)

console.log(user1)

Output:

{ name: "Sam", age: 25 }

Explanation:

this.name = name
this.age = age

this refers to the current object being created.

Methods Inside a Class

Methods are functions inside a class.

They describe actions an object can perform.

Example:

class User {

  constructor(name, age) {
    this.name = name
    this.age = age
  }

  greet() {
    console.log("Hello, my name is " + this.name)
  }

}

Create an object:

const user1 = new User("Sam", 25)

user1.greet()

Output:

Hello, my name is Sam

Here:

greet() → method

Let's understand it with full example:

class Car {

  constructor(brand, speed) {
    this.brand = brand
    this.speed = speed
  }

  drive() {
    console.log(this.brand + " is driving at " + this.speed + " km/h")
  }

}

const car1 = new Car("Toyota", 120)
const car2 = new Car("BMW", 150)

car1.drive()
car2.drive()

Output:

Toyota is driving at 120 km/h
BMW is driving at 150 km/h

Basic Idea of Encapsulation

Encapsulation means hiding internal details and controlling access to data.

Example:

class BankAccount {

  constructor(balance) {
    this.balance = balance
  }

  deposit(amount) {
    this.balance += amount
  }

  getBalance() {
    return this.balance
  }

}

Here the user interacts through methods instead of changing data directly.

deposit()
getBalance()

This protects the data.

In TypeScript we often use:

private
public

for better encapsulation.

Summary

So in sort we can say that OOP = data + behaviour grouped together inside objects. OOP is an important concept which help us understand and write good code.