Skip to main content

Command Palette

Search for a command to run...

Understanding Object-Oriented Programming in Javascript

Published
β€’4 min read
Understanding Object-Oriented Programming in Javascript

Object-oriented programming is a concept of writing code in which we organize everything around objects.

An object is a combination of

  1. Properties

  2. Methods

Instead of writing separate variables and functions, we bundle them together.

Real-World Analogy: Blueprint β†’ Objects

Let’s understand object-oriented programming with a simple example:

Imagine you are a car manufacturer.

You first create a blueprint (design)

  • Then you use that blueprint to create multiple cars

πŸ‘‰ In JavaScript:

  • Blueprint = Class

  • Car = Object (Instance)

So instead of rewriting code again and again, we define a class once and reuse it.


🧱 What is a Class in JavaScript?

A class is a blueprint used to create objects.

It defines:

  • What properties an object will have

  • What actions it can perform

Example:

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

  greet() {
    console.log(`Hi, my name is ${this.name}`);
  }
}

πŸ§ͺ Creating Objects (Instances)

We use the new keyword to create objects from a class.

const person1 = new Person("Ashish", 25);
const person2 = new Person("Rahul", 30);

person1.greet(); // Hi, my name is Ashish
person2.greet(); // Hi, my name is Rahul

πŸ‘‰ Each object:

  • Has its own data

  • Shares the same structure and methods


βš™οΈ Understanding the Constructor

The constructor is a special method inside a class.

Key Points:

  • It runs automatically when an object is created

  • It initializes object properties

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

πŸ‘‰ this refers to the current object.


πŸ”§ Methods Inside a Class

Methods define what an object can do.

greet() {
  console.log(`Hi, my name is ${this.name}`);
}

πŸ‘‰ Methods are shared across all instances (memory efficient).


πŸ”’ Basic Idea of Encapsulation

Encapsulation means:

πŸ‘‰ Keeping data and methods together and controlling access

Real-world example:

Think of a car:

  • You don’t directly control the engine

  • You use steering, brakes, accelerator

Same in code:

  • Internal data is hidden

  • Access is controlled via methods

Simple Example:

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

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

  getBalance() {
    return this.balance;
  }
}

πŸ‘‰ We interact using methods instead of directly modifying data.


♻️ Why Use OOP?

OOP helps you write better code:

  • βœ… Reusable (write once, use many times)

  • βœ… Organized (structured code)

  • βœ… Scalable (easy to expand)

  • βœ… Maintainable (easy to debug and update)


🧠 Class vs Object (Quick Comparison)

Concept Meaning
Class Blueprint
Object Real instance created from class

🎯 Assignment

Try this yourself πŸ‘‡

Task:

Create a Student class with:

  • Properties: name, age

  • Method: printDetails()

Example Solution:

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

  printDetails() {
    console.log(`Name: \({this.name}, Age: \){this.age}`);
  }
}

const student1 = new Student("Aman", 20);
const student2 = new Student("Neha", 22);

student1.printDetails();
student2.printDetails();

🧩 Visual Understanding (Conceptual)

Class (Blueprint)
      ↓
Create using new
      ↓
Objects (Instances)

Example:

Car (Class)
  ↓
car1, car2, car3 (Objects)

πŸ“Œ Common Mistakes Beginners Make

❌ Forgetting new keyword ❌ Not using this properly ❌ Thinking each object has separate methods (they are shared) ❌ Confusing class with object


🧠 Final Thoughts

OOP is not just a conceptβ€”it’s a way of thinking.

Once you understand:

  • Class

  • Object

  • Constructor

  • Methods

You can build real-world applications much more easily πŸš€


Happy Coding! πŸ’»

JavaScript: Beginner to Advance πŸš€

Part 4 of 14

This blog series is designed for professionals who want to learn JavaScript step by step. Starting from the basics like variables and data types, we gradually move to functions, DOM manipulation, and real-world mini projects.

Up next

Array Flatten in Javascript

You have read in the previous blog on datatypes that an array is a non-primitive data type that can contain various data types. But have you ever wondered what would happen if an array contained anoth