DEV Community

Cover image for Introduction to Object-Oriented Programming (OOP) in JavaScript
Harman Panwar
Harman Panwar

Posted on

Introduction to Object-Oriented Programming (OOP) in JavaScript

As programs grow larger, organizing code becomes more important. Object-Oriented Programming (OOP) is a programming approach that helps structure code using objects and classes.

OOP focuses on modeling real-world entities in code and encourages reusability, organization, and clarity.


What is Object-Oriented Programming?

Object-Oriented Programming (OOP) is a programming style where we organize code around objects rather than just functions and variables.

An object represents something in the real world and contains:

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

Example:

A person may have:

  • name
  • age
  • city

And actions like:

  • introduce themselves
  • walk
  • speak

OOP allows us to represent these structures in code.


Real-World Analogy: Blueprint → Objects

A good way to understand OOP is through a blueprint analogy.

Imagine a car factory.

  • A blueprint defines how a car should be built.
  • Many cars can be created from the same blueprint.

In programming:

Real World Programming
Blueprint Class
Car Object

A class defines the structure, and objects are created from that structure.


What is a Class in JavaScript?

A class is a template used to create objects.

It defines:

  • what properties objects will have
  • what methods objects can use

Example:

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

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;
  }
}

let person1 = new Person("Alice", 25);
let 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

Each object gets its own data.


Constructor Method

The constructor is a special method used when creating objects from a class.

It is used to initialize properties.

Example:

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

let car1 = new Car("Toyota", "Corolla");

console.log(car1.brand);
Enter fullscreen mode Exit fullscreen mode

Output:

Toyota
Enter fullscreen mode Exit fullscreen mode

The constructor runs automatically when a new object is created.


Methods Inside a Class

Classes can also contain methods, which define actions for objects.

Example:

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

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

let 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
  • this.name refers to the object's name

Basic Idea of Encapsulation

Encapsulation means keeping data and related behavior together inside an object.

Instead of spreading data and functions across the program, OOP groups them inside classes.

Example:

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

  introduce() {
    console.log("I am " + this.name + " and I am " + this.age + " years old.");
  }
}
Enter fullscreen mode Exit fullscreen mode

Here:

  • The data (name, age)
  • And the behavior (introduce())

are kept together inside the class.

This makes code easier to understand and maintain.


Why Use OOP?

Object-Oriented Programming helps developers:

  • Organize large programs
  • Reuse code efficiently
  • Model real-world systems
  • Keep code cleaner and easier to maintain

Many modern applications rely heavily on OOP concepts.


Assignment

Questions

  1. Create a class called Student.

  2. Add properties such as:

  • name
  • age
  1. Add a method that prints the student details.

  2. Create multiple student objects using the class.


Answers

1. Create the Student Class

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

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

2. Create Student Objects

let student1 = new Student("Rahul", 20);
let student2 = new Student("Anita", 22);
Enter fullscreen mode Exit fullscreen mode

3. Call the Method

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

Output:

Student Name: Rahul
Age: 20

Student Name: Anita
Age: 22
Enter fullscreen mode Exit fullscreen mode

Conclusion

Object-Oriented Programming helps structure code using classes and objects. A class acts as a blueprint, and objects are created from that blueprint.

By using constructors and methods, we can represent real-world entities clearly in code. Learning OOP is an important step toward writing organized, reusable, and scalable JavaScript programs.

Top comments (0)