Skip to main content

Command Palette

Search for a command to run...

Understanding Object-Oriented Programming in JavaScript

Published
5 min read
Understanding Object-Oriented Programming in JavaScript

As programs grow larger, organizing code becomes more important. Instead of writing scattered variables and functions, developers often use a structured approach called Object-Oriented Programming (OOP).

OOP helps us organize code around objects that represent real-world things. This makes programs easier to understand, maintain, and reuse.

JavaScript supports object-oriented programming, and learning the basics of it will help you build more structured applications.


What Object-Oriented Programming (OOP) Means

Object-Oriented Programming is a programming style where we structure code using objects and classes.

Instead of thinking about a program as a list of instructions, we think about it as a collection of objects that interact with each other.

For example:

  • A user object in a web app

  • A product object in an e-commerce site

  • A car object in a driving simulation

Each object contains:

  • Properties (data)

  • Methods (functions that operate on the data)

This approach makes it easier to organize and reuse code.


A Real-World Analogy: Blueprint and Objects

A good way to understand OOP is by thinking about blueprints.

Imagine a blueprint for a car. The blueprint describes things like:

  • color

  • engine type

  • speed

  • ability to start or stop

But the blueprint itself is not the actual car.

Using the blueprint, manufacturers can create many cars.

In programming:

  • Class → blueprint

  • Object → actual product created from the blueprint

For example, one blueprint can produce many cars:

  • Car 1 → Red Toyota

  • Car 2 → Black BMW

  • Car 3 → Blue Tesla

All of them follow the same structure.


What is a Class in JavaScript?

A class is a template used to create objects.

It defines what properties and methods an object should have.

Example of a simple class:

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

This class describes what a Car object should contain.


Creating Objects Using Classes

Once a class is defined, we can create objects from it.

This is done using the new keyword.

Example:

const car1 = new Car("Toyota", "Red");
const car2 = new Car("BMW", "Black");

Now we have two objects:

  • car1

  • car2

Both were created using the same class blueprint.


The Constructor Method

The constructor is a special method inside a class.

It runs automatically when a new object is created.

It is used to initialize the object's properties.

Example:

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

When we create a new object:

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

JavaScript automatically assigns:

this.name = "Alice"
this.age = 25

So the object becomes:

{
  name: "Alice",
  age: 25
}

Methods Inside a Class

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

Example:

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

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

Creating and using the object:

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

person1.greet();

Output:

Hello, my name is Alice

The method greet() is attached to the object.


Basic Idea of Encapsulation

Encapsulation simply means grouping related data and behavior together.

Instead of writing variables and functions separately, we place them inside a class.

Example:

A Student object might contain:

  • name

  • age

  • course

  • method to display details

All of these are bundled together.

Encapsulation helps keep code organized and prevents unrelated parts of the program from interfering with each other.


Why OOP is Useful

Object-oriented programming provides several advantages.

Code Reusability

You can create many objects from a single class.

Example:

Student1
Student2
Student3

All created from the same Student class.


Better Organization

Data and behavior stay grouped together.


Easier Maintenance

If you update the class, every object benefits from the change.


Assignment

Let’s build a small program using a class.

Step 1: Create a Student Class

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

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

Step 2: Create Multiple Student Objects

const student1 = new Student("John", 20);
const student2 = new Student("Emma", 22);
const student3 = new Student("David", 19);

Step 3: Call the Method

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

Complete Assignment Solution

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

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

const student1 = new Student("John", 20);
const student2 = new Student("Emma", 22);
const student3 = new Student("David", 19);

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

Example Output:

Name: John
Age: 20

Name: Emma
Age: 22

Name: David
Age: 19

Final Thoughts

Object-Oriented Programming is a powerful way to structure applications. By using classes and objects, developers can create reusable and organized code that closely models real-world systems.

Concepts like classes, constructors, and methods form the foundation of OOP in JavaScript. Once you understand these basics, it becomes much easier to build larger programs and explore more advanced topics such as inheritance and design patterns.

For now, focus on practicing classes and creating objects. The more examples you build, the more natural this programming style will feel.

Understanding Object-Oriented Programming in JavaScript