Skip to main content

Command Palette

Search for a command to run...

Understanding Object-Oriented Programming in JavaScript

Updated
•4 min read•View as Markdown

1. Introduction

Hello everyone, in programming we often need to work with data and actions together. Managing everything with separate variables and functions can become confusing when programs grow larger.

To solve this problem, programming languages provide a concept called Object-Oriented Programming (OOP).

Object-Oriented Programming helps developers organize code in a structured and reusable way using objects and classes.

Before understanding classes and objects, let's first understand this concept with a simple real-world example.


2. Real-World Analogy: Blueprint → Objects

Imagine a company that manufactures cars.

Before producing cars, engineers first create a blueprint of the car. This blueprint defines the design and features of the car such as:

  • color

  • engine

  • model

  • speed

Using this blueprint, the company can produce many cars.

In programming:

Real World Programming
Blueprint Class
Car created from blueprint Object
Car features Properties
Car actions (drive, brake) Methods

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


3. What is a Class in JavaScript?

A class in JavaScript is a template used to create objects.

It defines:

  • properties (data)

  • methods (functions)

Example:

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

Here:

  • Person → class name

  • name and age → properties of the object


4. Creating Objects Using Classes

Objects are created from a class using the new keyword.

Example:

const person1 = new Person("Akshat", 22)
const person2 = new Person("Raj", 25)

Here we created two objects:

  • person1

  • person2

Both objects are created using the Person class.

This shows how one class can create multiple objects.


5. Constructor Method

The constructor is a special method inside a class.

It runs automatically when a new object is created and is used to initialize object properties.

Example:

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

Creating objects:

const car1 = new Car("Toyota", "Fortuner")
const car2 = new Car("Honda", "City")

Each object now has its own brand and model.


6. Methods Inside a Class

Methods are functions defined inside a class. They describe the actions an object can perform.

Example:

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

  displayInfo() {
    console.log(this.brand + " " + this.model)
  }
}

Using the method:

const car1 = new Car("Toyota", "Fortuner")

car1.displayInfo()

Output:

Toyota Fortuner

7. Basic Idea of Encapsulation

Encapsulation means combining data and the methods that operate on that data inside a single unit (class).

Instead of directly changing data, we interact with it using methods.

Example:

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

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

  withdraw(amount) {
    this.balance -= amount
  }
}

Here:

  • balance is stored inside the object

  • deposit() and withdraw() control how the balance changes

This helps keep the code organized and secure.


8. Assignment Example

Now let's create a Student class as required in the assignment.

Step 1: Create a class

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

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

Step 2: Create multiple student objects

const student1 = new Student("Akshat", 20)
const student2 = new Student("Amardeep", 21)
const student3 = new Student("Raj", 22)

Step 3: Print student details

student1.printDetails()
student2.printDetails()
student3.printDetails()

Output:

Name: Akshat, Age: 20
Name: Amardeep, Age: 21
Name: Raj, Age: 22

This shows how a single class can be reused to create multiple objects.


9. Visual Representation

Blueprint → Objects

Blueprint (Class)
       │
       │
 ┌─────┴─────┐
 │           │
Car1       Car2
(Object)   (Object)

Class → Instances

Class: Student

        │
 ┌──────┼─────────┐
 │      │         │
Student1 Student2 Student3

10. Conclusion

Object-Oriented Programming is an important concept in JavaScript that helps developers organize and reuse code efficiently.

By using classes, objects, constructors, and methods, we can model real-world problems in code and build scalable applications.

Learning OOP makes JavaScript programs easier to understand, maintain, and expand.