Understanding Object-Oriented Programming in JavaScript

From blueprint to car

A car manufacturer doesn’t design a brand-new car from scratch every single time one rolls off the factory line. There’s one blueprint — the design, the specifications, what every car of that model will have (an engine, four wheels, a color) — and every individual car built from it is a separate, real object that follows that same blueprint, while still having its own specific details, like its own color or license plate.

Object-Oriented Programming (OOP) applies this exact idea to code: define a blueprint once, and create as many independent objects from it as you need — each following the same structure, each with its own data.

What Object-Oriented Programming Means

OOP is a way of organizing code around objects — self-contained units that bundle together data (properties) and behavior (methods) that belong together, modeled after real-world things.

Instead of scattering related data and logic across separate variables and functions, OOP groups them into one coherent structure — a Car object naturally holds its own color and its own honk() behavior, together, rather than as unrelated, disconnected pieces of code.

Real-World Analogy: Blueprint → Objects

The blueprint (in code, a class) defines what every object of that type will have — a Car blueprint says every car has a color and can honk(). It doesn't describe one specific car — it describes the template every car of that type will follow.

Each actual car built from that blueprint (in code, an object, or instance) is a separate, independent thing — its own specific color, able to honk() on its own, completely independent of any other car built from the same blueprint.

What Is a Class in JavaScript

A class is JavaScript’s syntax for defining that blueprint — the shared structure every object created from it will follow.

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

  honk() {
    console.log(`${this.color} car says beep!`);
  }
}

This single class definition describes what every Car object will have: a color property, and a honk() method — without creating any actual car yet. It's purely the blueprint.

Creating Objects Using Classes

To actually build an object from a class, use the new keyword (covered in depth in this series's dedicated article on new):

const myCar = new Car("red");
const yourCar = new Car("blue");

console.log(myCar.color);   // "red"
console.log(yourCar.color); // "blue"

myCar.honk();   // "red car says beep!"
yourCar.honk(); // "blue car says beep!"

myCar and yourCar are two completely separate objects — both built from the same Car class, but each holding its own independent color. Changing one doesn't affect the other at all.

Constructor Method

The constructor is a special method that runs automatically whenever a new object is created from the class — it's where you set up that object's initial properties, based on whatever values were passed in.

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

const student1 = new Student("Priya", 20);
console.log(student1.name); // "Priya"
console.log(student1.age);  // 20

Every time new Student(...) runs, JavaScript calls constructor automatically, with this referring to the specific new object being built — exactly the same object-creation process covered in this series's article on the new keyword, just wrapped in cleaner class syntax.

Methods Inside a Class

Beyond the constructor, a class can define additional methods — functions that belong to every object created from it, describing what those objects can do.

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

  printDetails() {
    console.log(`${this.name} is ${this.age} years old.`);
  }
}

const student1 = new Student("Priya", 20);
student1.printDetails(); // "Priya is 20 years old."

Every Student object automatically has access to printDetails() — it doesn't need to be redefined for each individual student; it's part of the shared blueprint, available to any object built from the class.

Basic Idea of Encapsulation

Encapsulation means keeping an object’s data and the behavior that operates on it bundled together, as one coherent unit — rather than having that data floating around separately, manipulated by unrelated, disconnected pieces of code elsewhere in a program.

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

  printDetails() {
    console.log(`${this.name} is ${this.age} years old.`);
  }
}

Here, a student’s name and age, along with the printDetails() behavior that makes sense of them, all live together inside one Student class — instead of name, age, and a separate, disconnected printStudentDetails(name, age) function existing independently, with no clear relationship holding them together.

At a beginner level, the core benefit is simply this: related data and behavior stay together, making code easier to understand, reuse, and reason about — you know exactly where to look for anything related to a Student.

Practice Assignment

1. Create a class called Student

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

2. Add properties like name and age

Already included in the constructor above — every Student object will have both.

3. Add a method that prints student details

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

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

4. Create multiple student objects

const student1 = new Student("Aarav", 21);
const student2 = new Student("Meera", 19);
const student3 = new Student("Priya", 22);

student1.printDetails(); // "Name: Aarav, Age: 21"
student2.printDetails(); // "Name: Meera, Age: 19"
student3.printDetails(); // "Name: Priya, Age: 22"

Notice all three students share the exact same printDetails() method from the class, while each holds completely independent name and age values — exactly the blueprint-and-objects relationship this entire article has been building toward.

Final Takeaway

Object-Oriented Programming is really just the blueprint-and-car idea, formalized in code: a class defines the shared structure — what properties and methods every object of that type will have — and new builds as many independent objects from it as needed, each with its own specific data. The constructor sets up each object's initial values automatically; methods define shared behavior every object can use; and encapsulation is simply the practice of keeping that related data and behavior bundled together, instead of scattered. Once this clicks with something as simple as Student or Car, it becomes the foundation for organizing far larger, more complex programs the exact same way.

Frequently Asked Questions

Is a class the same thing as an object?

> No — a class is the blueprint; an object (or instance) is a specific thing built from that blueprint. You can create many different objects from the same single class, each with its own independent data.

Do I need to use classes for every JavaScript program?

> No — classes are useful when you have several related things that share the same structure and behavior (multiple students, multiple cars). Simpler programs, or one-off pieces of data, often don’t need a class at all.

Are JavaScript classes fundamentally different from constructor functions?

> Not fundamentally — as covered in this series’s dedicated article on the new keyword, classes are largely a cleaner, more readable syntax built on top of the same underlying constructor-function-and-prototype mechanism. Classes don't introduce a completely new concept; they package a familiar one more clearly.

What other OOP concepts exist beyond what’s covered here?

> Beyond classes, constructors, methods, and basic encapsulation, OOP also includes ideas like inheritance (one class building on another) and static methods (belonging to the class itself, not individual objects) — both genuinely useful, and worth exploring once these fundamentals feel comfortable.