Understanding Object-Oriented Programming in JavaScript

Topics to Cover

1. What Object-Oriented Programming (OOP) means

2. Real-world analogy (blueprint → objects)

3. What is a class in JavaScript

4. Creating objects using classes

5. Constructor method

6. Methods inside a class

7. Basic idea of encapsulation

What Object-Oriented Programming (OOP) Means

Object-Oriented Programming (OOP) is a programming style where we organize code using objects and classes.

Instead of writing everything as separate functions and variables, we group related data and behavior together.

This helps in:

• Organizing code better

• Reusing code

• Making programs easier to understand

In OOP, programs are built using objects that interact with each other.

Real-World Analogy (Blueprint → Objects)

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

Let us take an example of a car.

Every car has an engine, steering, gears, etc. So this is the blueprint of a Car. We can create multiple Cars with this blueprint.

Programming works the same way.

• Class → blueprint

• Object → actual instance created from that blueprint

What is a Class in JavaScript

A class is a blueprint used to create objects.

It defines:

• properties (data)

• methods (functions related to that data)

Example:

class Person {

}

This is how we create a class.

We will now add properties and behavior.

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("Kushagra", 21);
const person2 = new Person("Rahul", 20);

Here:

• Person is the class

• person1 and person2 are objects

Both objects are created from the same blueprint.

Constructor Method

A constructor is a special method inside a class.

It runs automatically when an object is created.

It is usually used to initialize properties.

Example:

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

Here:

• name and age are parameters

• this.name and this.age store values inside the object

When we create an object:

const person = new Person("Kushagra", 21);

JavaScript automatically calls the constructor.

Methods Inside a Class

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

Example:

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

    introduce(){
        console.log(`Hi, my name is \({this.name} and I am \){this.age} years old.`);
    }
}

Now we create an object and call the method:

const person1 = new Person("Kushagra", 21);

person1.introduce();

Output:

Hi, my name is Kushagra and I am 21 years old.

Here:

• introduce() is a method

• this refers to the current object

Basic Idea of Encapsulation

Encapsulation means grouping data and methods together inside a class.

Instead of storing data separately and writing functions elsewhere, we keep them together.

Example:

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

    start(){
        console.log(`${this.model} is starting`);
    }
}

Here the data (model, color) and the behavior (start) are kept together inside the class.

Why OOP is Useful

Object-Oriented Programming helps in:

Code Reusability

We can create multiple objects from the same class.

Example:

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

Both objects use the same blueprint.

Better Code Organization

Instead of scattered functions and variables, related things stay together.

Scalability

Large applications become easier to manage.

Assignment

Try this yourself.

Create a Student class.

Requirements:

• Add properties: name and age

• Add a method that prints student details

• Create multiple student objects

Example structure:

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

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

Now create multiple students and call the method.