DEV Community

Hiral
Hiral

Posted on

Understanding Object-Oriented Programming in JavaScript

Object Oriented Programming (oop) is a programming style that helps developer organise code using Objects and classes. It helps developer to write code that's easier to reuse, understand and maintain.

A simple real world analogy:
Imagine you are building a car:

  1. A blueprint describes how a car should look and behave
  2. Using blueprint you can manufacture cars Blueprint is a class. Car itself is a object.

What is class in Javascript?
A class is a template used to create objects.
properties-> information about object
Method-> action to preform

Example:

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

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

Here:

  • Person is the class
  • name and age are properties
  • greet() is a method

Creating object using class
Once we define a class, we can create objects using the new keyword.

let person1 = new Person("Alice", 25)
let person2 = new Person("Bob", 30)

person1.greet()
person2.greet()
Enter fullscreen mode Exit fullscreen mode

Output:

Hello, my name is Alice
Hello, my name is Bob

Each object stores its own data but uses the same class structure

The Constructor Method

The constructor is a special method that runs automatically when an object is created.

It is used to initialize object properties
Example:

class Car {
  constructor(brand, color) {
    this.brand = brand
    this.color = color
  }
}
Enter fullscreen mode Exit fullscreen mode

Creating objects:

let car1 = new Car("Toyota", "Red")
let car2 = new Car("BMW", "Black")
Enter fullscreen mode Exit fullscreen mode

Now each car object has its own brand and color.

Methods Inside a Class

Methods are functions defined inside a class that describe what an object can do.

Example:

class Car {
  constructor(brand) {
    this.brand = brand
  }

  start() {
    console.log(this.brand + " car started")
  }
}

let car = new Car("Toyota")
car.start()

Enter fullscreen mode Exit fullscreen mode

Output:

Toyota car started
Methods allow objects to perform actions.

Basic Idea of Encapsulation

Encapsulation means keeping data and the functions that operate on that data together in one place (inside a class).

Instead of writing separate variables and functions, everything related to an object is grouped.
Example:

class BankAccount {
  constructor(owner, balance) {
    this.owner = owner
    this.balance = balance
  }

  deposit(amount) {
    this.balance += amount
  }
}
Enter fullscreen mode Exit fullscreen mode

Here the balance data and deposit behavior are packaged together, making the code cleaner and safer.

Understanding Object-Oriented Programming (OOP) in JavaScript

Object-Oriented Programming (OOP) is a programming style that organizes code using objects and classes. It helps developers write code that is easier to reuse, understand, and maintain.

Instead of writing scattered functions and variables, OOP groups related data and behavior together into objects.


A Simple Real-World Analogy

Imagine you are building cars.

  • A blueprint describes how a car should look and behave.
  • Using that blueprint, you can manufacture many cars.

In programming:

Real World Programming
Blueprint Class
Actual Car Object (Instance)

So a class is like a blueprint, and objects are the real things created from that blueprint.

Example:

Car Blueprint → Car1, Car2, Car3
Enter fullscreen mode Exit fullscreen mode

Each car is built from the same design but can have different colors or speeds.


What is a Class in JavaScript?

A class is a template used to create objects.

It defines:

  • Properties → information about the object
  • Methods → actions the object can perform

Example:

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

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

Here:

  • Person is the class
  • name and age are properties
  • greet() is a method

Creating Objects Using Classes

Once we define a class, we can create objects using the new keyword.

let person1 = new Person("Alice", 25)
let person2 = new Person("Bob", 30)

person1.greet()
person2.greet()
Enter fullscreen mode Exit fullscreen mode

Output:

Hello, my name is Alice
Hello, my name is Bob
Enter fullscreen mode Exit fullscreen mode

Each object stores its own data but uses the same class structure.


The Constructor Method

The constructor is a special method that runs automatically when an object is created.

It is used to initialize object properties.

Example:

class Car {
  constructor(brand, color) {
    this.brand = brand
    this.color = color
  }
}
Enter fullscreen mode Exit fullscreen mode

Creating objects:

let car1 = new Car("Toyota", "Red")
let car2 = new Car("BMW", "Black")
Enter fullscreen mode Exit fullscreen mode

Now each car object has its own brand and color.


Methods Inside a Class

Methods are functions defined inside a class that describe what an object can do.

Example:

class Car {
  constructor(brand) {
    this.brand = brand
  }

  start() {
    console.log(this.brand + " car started")
  }
}

let car = new Car("Toyota")
car.start()
Enter fullscreen mode Exit fullscreen mode

Output:

Toyota car started
Enter fullscreen mode Exit fullscreen mode

Methods allow objects to perform actions.


Basic Idea of Encapsulation

Encapsulation means keeping data and the functions that operate on that data together in one place (inside a class).

Instead of writing separate variables and functions, everything related to an object is grouped.

Example:

class BankAccount {
  constructor(owner, balance) {
    this.owner = owner
    this.balance = balance
  }

  deposit(amount) {
    this.balance += amount
  }
}
Enter fullscreen mode Exit fullscreen mode

Here the balance data and deposit behavior are packaged together, making the code cleaner and safer.


Why OOP is Useful

OOP provides several benefits:

1. Code Reusability

You can create many objects from a single class.

2. Better Organization

Related code is grouped into classes.

3. Easier Maintenance

Changes made in one class automatically apply to all objects created from it.


Visualizing Class and Objects

        Class (Blueprint)
            Car
        /     |      \
     Car1   Car2    Car3
Enter fullscreen mode Exit fullscreen mode
  • Car → Class
  • Car1, Car2, Car3 → Objects (instances)

All objects share the same structure but can contain different data.


Assignment

Create a Student class with the following features.

Requirements

  1. Add properties:
  • name
  • age
  1. Add a method:
  • printDetails() → prints student information
  1. Create multiple student objects.

Example structure:

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

  printDetails() {
    console.log("Name: " + this.name + ", Age: " + this.age)
  }
}

let student1 = new Student("John", 20)
let student2 = new Student("Emma", 22)

student1.printDetails()
student2.printDetails()
Enter fullscreen mode Exit fullscreen mode

Summary

Object-Oriented Programming helps structure programs using classes and objects.

Key ideas:

  • Class → blueprint for objects
  • Object → instance created from a class
  • Constructor → initializes object data
  • Methods → actions objects can perform
  • Encapsulation → bundling data and functions together

By using OOP, developers can write cleaner, reusable, and more organized code.

Top comments (0)