DEV Community

Cover image for Understanding Object-Oriented Programming in JavaScript
Souvik Guha Roy
Souvik Guha Roy

Posted on

Understanding Object-Oriented Programming in JavaScript

As applications grow larger, managing code becomes more difficult. Developers need a way to organize code so it becomes reusable, structured, and easier to maintain.

One approach that helps solve this problem is Object-Oriented Programming (OOP).

JavaScript supports Object-Oriented Programming, allowing developers to model real-world concepts directly in code.

In this blog, we will explore the basics of OOP in JavaScript and understand how classes and objects work.


Topics Covered

In this article we will learn:

  • What Object-Oriented Programming (OOP) means
  • A real-world analogy (blueprint → objects)
  • What a class is in JavaScript
  • Creating objects using classes
  • The constructor method
  • Methods inside a class
  • A basic idea of encapsulation

What is Object-Oriented Programming?

Object-Oriented Programming (OOP) is a programming paradigm based on the idea of objects.

Instead of writing programs only as sequences of instructions, OOP organizes code around objects that contain both data and behavior.

Each object can contain:

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

This approach makes code:

  • More modular
  • Easier to reuse
  • Easier to maintain

Real-World Analogy: Blueprint → Objects

A helpful way to understand OOP is by thinking about blueprints and real objects.

Imagine a car factory.

  • The blueprint defines how a car should look and behave.
  • Each car created from that blueprint is an actual object.

Example:

Blueprint → Car design
Objects → Individual cars produced from that design

In programming:

  • Class → Blueprint
  • Object → Instance created from the blueprint

What is a Class in JavaScript?

A class is a template used to create objects.

It defines:

  • What properties an object will have
  • What methods it can perform

Example of a simple class:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}
Enter fullscreen mode Exit fullscreen mode

Here:

  • Person is the class
  • name and age are properties defined inside the constructor

Creating Objects Using Classes

Objects are created from classes using the new keyword.

Example:

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

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

console.log(person1.name);
console.log(person2.age);
Enter fullscreen mode Exit fullscreen mode

Output:

Alice
30
Enter fullscreen mode Exit fullscreen mode

Here:

  • person1 and person2 are objects (instances) of the Person class.

The Constructor Method

The constructor is a special method inside a class.

It runs automatically when a new object is created.

Its main purpose is to initialize object properties.

Example:

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

const car1 = new Car("Toyota", "Corolla");
Enter fullscreen mode Exit fullscreen mode

Here the constructor assigns values to the properties brand and model.


Methods Inside a Class

Classes can also contain methods. Methods are functions that belong to the class.

Example:

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

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

const person1 = new Person("Alice", 25);
person1.greet();
Enter fullscreen mode Exit fullscreen mode

Output:

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

Here, greet() is a method that belongs to the Person class.


Basic Idea of Encapsulation

Encapsulation is the concept of bundling data and methods together inside a class.

This helps protect data and organize code better.

Instead of modifying data directly everywhere in the program, we manage it through the class.

Example:

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

  getDetails() {
    console.log(this.name + " is " + this.age + " years old.");
  }
}

const student1 = new Student("Rahul", 20);
student1.getDetails();
Enter fullscreen mode Exit fullscreen mode

Here the data (name, age) and behavior (getDetails) are grouped together.


Assignment Example

Let’s create a Student class and use it to create multiple student objects.

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

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

const student1 = new Student("Kunal", 21);
const student2 = new Student("Ananya", 20);

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

Output:

Student Name: Kunal
Age: 21
Student Name: Ananya
Age: 20
Enter fullscreen mode Exit fullscreen mode

This shows how one class can be used to create multiple objects easily.


Visualizing Class and Objects

You can imagine the relationship like this:

Class (Blueprint)
      ↓
   Student
      ↓
Objects (Instances)

student1 → { name: "Kunal", age: 21 }
student2 → { name: "Ananya", age: 20 }
Enter fullscreen mode Exit fullscreen mode

One class can generate many objects.


Why OOP is Useful

Object-Oriented Programming helps developers:

  • Reuse code using classes
  • Organize large programs better
  • Represent real-world entities in code
  • Make applications easier to maintain

This is why OOP is widely used in modern JavaScript applications.


Final Thoughts

Object-Oriented Programming is a powerful way to structure JavaScript code.

In this article we learned:

  • What OOP means
  • How classes work
  • How to create objects using classes
  • How constructors initialize data
  • How methods define behavior
  • The basic idea of encapsulation

Once you understand these fundamentals, you can move on to more advanced concepts like inheritance and polymorphism.


Top comments (0)