Understanding Object-Oriented Programming in JavaScript
1. Introduction
Hello everyone, in programming we often need to work with data and actions together. Managing everything with separate variables and functions can become confusing when programs grow larger.
To solve this problem, programming languages provide a concept called Object-Oriented Programming (OOP).
Object-Oriented Programming helps developers organize code in a structured and reusable way using objects and classes.
Before understanding classes and objects, let's first understand this concept with a simple real-world example.
2. Real-World Analogy: Blueprint → Objects
Imagine a company that manufactures cars.
Before producing cars, engineers first create a blueprint of the car. This blueprint defines the design and features of the car such as:
color
engine
model
speed
Using this blueprint, the company can produce many cars.
In programming:
| Real World | Programming |
|---|---|
| Blueprint | Class |
| Car created from blueprint | Object |
| Car features | Properties |
| Car actions (drive, brake) | Methods |
So a class is like a blueprint, and objects are the actual things created from that blueprint.
3. What is a Class in JavaScript?
A class in JavaScript is a template used to create objects.
It defines:
properties (data)
methods (functions)
Example:
class Person {
constructor(name, age) {
this.name = name
this.age = age
}
}
Here:
Person→ class namenameandage→ properties of the object
4. Creating Objects Using Classes
Objects are created from a class using the new keyword.
Example:
const person1 = new Person("Akshat", 22)
const person2 = new Person("Raj", 25)
Here we created two objects:
person1person2
Both objects are created using the Person class.
This shows how one class can create multiple objects.
5. Constructor Method
The constructor is a special method inside a class.
It runs automatically when a new object is created and is used to initialize object properties.
Example:
class Car {
constructor(brand, model) {
this.brand = brand
this.model = model
}
}
Creating objects:
const car1 = new Car("Toyota", "Fortuner")
const car2 = new Car("Honda", "City")
Each object now has its own brand and model.
6. Methods Inside a Class
Methods are functions defined inside a class. They describe the actions an object can perform.
Example:
class Car {
constructor(brand, model) {
this.brand = brand
this.model = model
}
displayInfo() {
console.log(this.brand + " " + this.model)
}
}
Using the method:
const car1 = new Car("Toyota", "Fortuner")
car1.displayInfo()
Output:
Toyota Fortuner
7. Basic Idea of Encapsulation
Encapsulation means combining data and the methods that operate on that data inside a single unit (class).
Instead of directly changing data, we interact with it using methods.
Example:
class BankAccount {
constructor(balance) {
this.balance = balance
}
deposit(amount) {
this.balance += amount
}
withdraw(amount) {
this.balance -= amount
}
}
Here:
balanceis stored inside the objectdeposit()andwithdraw()control how the balance changes
This helps keep the code organized and secure.
8. Assignment Example
Now let's create a Student class as required in the assignment.
Step 1: Create a class
class Student {
constructor(name, age) {
this.name = name
this.age = age
}
printDetails() {
console.log("Name: " + this.name + ", Age: " + this.age)
}
}
Step 2: Create multiple student objects
const student1 = new Student("Akshat", 20)
const student2 = new Student("Amardeep", 21)
const student3 = new Student("Raj", 22)
Step 3: Print student details
student1.printDetails()
student2.printDetails()
student3.printDetails()
Output:
Name: Akshat, Age: 20
Name: Amardeep, Age: 21
Name: Raj, Age: 22
This shows how a single class can be reused to create multiple objects.
9. Visual Representation
Blueprint → Objects
Blueprint (Class)
│
│
┌─────┴─────┐
│ │
Car1 Car2
(Object) (Object)
Class → Instances
Class: Student
│
┌──────┼─────────┐
│ │ │
Student1 Student2 Student3
10. Conclusion
Object-Oriented Programming is an important concept in JavaScript that helps developers organize and reuse code efficiently.
By using classes, objects, constructors, and methods, we can model real-world problems in code and build scalable applications.
Learning OOP makes JavaScript programs easier to understand, maintain, and expand.