# Object-Oriented Programming in JavaScript: Classes and Objects

As your JavaScript programs grow, keeping track of related data and functions becomes harder. You end up with scattered variables and disconnected logic that's difficult to manage. Object-Oriented Programming — OOP for short — gives you a structured way to organize your code around real-world concepts.

In this article, we'll cover what OOP is, how classes work in JavaScript, and how to start writing cleaner, more reusable code.

* * *

## What Is Object-Oriented Programming?

OOP is a way of writing code where you model real-world things as **objects**. Each object has its own data (properties) and behaviors (methods) bundled together.

Instead of writing a bunch of loose variables and functions, you group everything related to a concept into one unit.

There are four core ideas in OOP, but we'll focus on the most important one for beginners: **encapsulation** — keeping related data and behavior together in one place.

* * *

## The Blueprint Analogy

Think of a **car factory**. Before any car is built, the factory works from a **blueprint**. The blueprint defines what every car will have — an engine, four wheels, a color, a model name — and what every car can do — start, stop, accelerate.

The blueprint itself is not a car. It's just the plan. But from that one blueprint, you can manufacture hundreds of individual cars. Each car is its own object, with its own specific color and model, but all built from the same design.

```javascript
Blueprint (Class)
      |
      |--- Car 1: color = "red",  model = "Sedan"
      |--- Car 2: color = "blue", model = "SUV"
      |--- Car 3: color = "black", model = "Coupe"
```

In JavaScript:

*   The **blueprint** is a **class**
    
*   Each individual car is an **object** (also called an instance)
    

* * *

## What Is a Class in JavaScript?

A class is a template for creating objects. You define it once, then use it to create as many objects as you need — each with their own data but the same structure and behavior.

```javascript
class Car {
  // everything that defines a Car goes here
}
```

That's the basic syntax. The class keyword, a name (capitalized by convention), and a pair of curly braces.

* * *

## The Constructor Method

The `constructor` is a special method inside a class that runs automatically every time you create a new object from that class. It's where you set up the initial properties of the object.

```javascript
class Car {
  constructor(model, color) {
    this.model = model;
    this.color = color;
  }
}
```

`this` here refers to the specific object being created. When you make a new car, `this.model` becomes that car's model, and `this.color` becomes that car's color.

* * *

## Creating Objects from a Class

To create an object from a class, use the `new` keyword followed by the class name and any arguments the constructor expects.

```javascript
const car1 = new Car("Sedan", "red");
const car2 = new Car("SUV", "blue");

console.log(car1.model); // "Sedan"
console.log(car2.color); // "blue"
```

Each object is independent. Changing `car1` doesn't affect `car2`. They're built from the same blueprint but are separate instances.

```javascript
Class: Car
  |
  |--- car1: { model: "Sedan", color: "red" }
  |--- car2: { model: "SUV",   color: "blue" }
  |--- car3: { model: "Coupe", color: "black" }
```

* * *

## Adding Methods to a Class

A method is a function that belongs to a class. You define it inside the class body, and every object created from that class gets access to it.

```javascript
class Car {
  constructor(model, color) {
    this.model = model;
    this.color = color;
  }

  describe() {
    console.log("This is a " + this.color + " " + this.model + ".");
  }

  start() {
    console.log(this.model + " engine started.");
  }
}

const car1 = new Car("Sedan", "red");
const car2 = new Car("SUV", "blue");

car1.describe(); // "This is a red Sedan."
car2.start();    // "SUV engine started."
```

You define the method once in the class. All objects share it, but `this` ensures each object uses its own data when the method runs.

* * *

## A Closer Look: The Person Class

Let's try another example with a `Person` class to reinforce the concept.

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

  greet() {
    console.log("Hi, I'm " + this.name + " and I'm " + this.age + " years old.");
  }

  isAdult() {
    return this.age >= 18;
  }
}

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

person1.greet();              // "Hi, I'm Alice and I'm 25 years old."
console.log(person1.isAdult()); // true

person2.greet();              // "Hi, I'm Tom and I'm 16 years old."
console.log(person2.isAdult()); // false
```

One class, two very different objects — both with their own name and age, both using the same methods.

* * *

## Encapsulation: Keeping Things Together

**Encapsulation** means bundling related data and behavior into one unit — the class. Instead of having a `name` variable here and a `greet` function somewhere else, everything about a `Person` lives in one place.

Without encapsulation:

```javascript
// Scattered, hard to manage
let name = "Alice";
let age  = 25;

function greet(name, age) {
  console.log("Hi, I'm " + name + " and I'm " + age + " years old.");
}
```

With encapsulation:

```javascript
// Organized, reusable, clear
class Person {
  constructor(name, age) {
    this.name = name;
    this.age  = age;
  }

  greet() {
    console.log("Hi, I'm " + this.name + " and I'm " + this.age + " years old.");
  }
}
```

As your codebase grows, this difference becomes enormous. Classes keep your code modular and easy to reason about.

* * *

## Practice Assignment

Work through these steps to build your first class from scratch:

**1\. Create a class called** `Student` **with a constructor:**

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

**2\. Add a method that prints the student's details:**

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

  introduce() {
    console.log(
      "Name: " + this.name +
      ", Age: " + this.age +
      ", Grade: " + this.grade
    );
  }
}
```

**3\. Create multiple student objects and call the method:**

```javascript
const s1 = new Student("Raj", 20, "A");
const s2 = new Student("Priya", 22, "B");
const s3 = new Student("Arjun", 19, "A+");

s1.introduce(); // "Name: Raj, Age: 20, Grade: A"
s2.introduce(); // "Name: Priya, Age: 22, Grade: B"
s3.introduce(); // "Name: Arjun, Age: 19, Grade: A+"
```

**Bonus:** Add an `isPassing()` method that returns `true` if the grade is not "F".

* * *

## Quick Recap

*   OOP organizes code around objects that model real-world things
    
*   A **class** is a blueprint — a template for creating objects
    
*   The **constructor** method sets up an object's initial properties using `this`
    
*   **Methods** are functions inside a class that all instances can use
    
*   **Encapsulation** means keeping related data and behavior bundled together
    
*   Use `new ClassName()` to create an object (instance) from a class
    

Classes are one of the most powerful tools in JavaScript. Once you're comfortable with the basics here, you'll be ready to explore inheritance, where one class can extend the behavior of another.

Happy coding! 🚀

* * *

> If you enjoyed this article, check out my other blogs on this profile. 🔗 Connect with me: [LinkedIn](https://linkedin.com/in/rajharsh03) | [GitHub](https://github.com/RajHarsh03) | [X (Twitter)](https://x.com/rajharsh03)