Next ❯

OOP in JavaScript

  • Introduction to Object-Oriented Programming concepts in JavaScript.

  • Introduction to Object-Oriented Programming

    As applications grow larger and more complex, writing code using only functions and variables becomes difficult to manage.

    To solve this problem, programming languages introduced a concept called
     Object-Oriented Programming (OOP).

    OOP helps developers:

    • Organize code better

    • Reuse code efficiently

    • Model real-world entities

    • Build scalable and maintainable applications

    JavaScript supports Object-Oriented Programming using objects, prototypes, and classes.

    What is Object-Oriented Programming ?

    Object-Oriented Programming (OOP) is a programming paradigm that focuses on objects rather than only functions and logic.

    An object is a collection of:

    • Properties (data)

    • Methods (functions that act on data)

    Simple Definition

    OOP is a programming approach where programs are built using objects that represent real-world entities.

    Real-Life Example of OOP

    Consider a Car:

    Properties:

    • Color

    • Brand

    • Speed

    Methods:

    • Start

    • Stop

    • Accelerate

    In OOP, we create a Car object that contains both data and behavior.

    Why Do We Need OOP ?

    Without OOP:

    • Code becomes lengthy

    • Logic is scattered

    • Reusability is low

    • Maintenance is difficult

    With OOP:

    • Code is modular

    • Reusability increases

    • Maintenance becomes easier

    • Large projects become manageable

  • Procedural Programming vs Object-Oriented Programming

Procedural Programming Example

Uses variables and a function to print a greeting. 

let name = "Amit";
let age = 25;

function greet() {
  console.log("Hello " + name);
}

  • Problems:

    • Data and functions are separate

    • Hard to manage for large systems

Object-Oriented Programming Example

Uses an object with properties and a method to display a greeting using this. 

let user = {
  name: "Amit",
  age: 25,
  greet: function () {
    console.log("Hello " + this.name);
  }
};

  • Here, data and behavior are grouped together.

    Core Concepts of Object-Oriented Programming

    OOP is based on four main pillars:

    1. Encapsulation

    2. Abstraction

    3. Inheritance

    4. Polymorphism

    This lesson gives an overview. Each concept will be covered in detail in upcoming lessons.

    Encapsulation

    What is Encapsulation ?

    Encapsulation means binding data and methods together inside an object and controlling access to them.

    It helps in:

    • Protecting data

    • Preventing accidental modification

    • Improving code structure

Basic Encapsulation Example

Uses an object to store data (balance) and control it using a method (deposit). 

let account = {
  balance: 5000,
  deposit: function (amount) {
    this.balance += amount;
  }
};

  • Here, balance and deposit() are encapsulated in one object.

    Abstraction

    What is Abstraction ?

    Abstraction means hiding internal implementation details and showing only what is necessary.

    The user does not need to know how things work internally.

    Real-Life Example

    When you drive a car:

    • You use steering, accelerator, brake

    • You do not worry about engine mechanics

Abstraction Example

Hides complex logic inside a function and shows only the result. 

function startCar() {
  // complex internal logic
  console.log("Car started");
}

  • User only calls startCar().

    Inheritance

    What is Inheritance ?

    Inheritance allows one object or class to reuse properties and methods of another.

    It promotes:

    • Code reusability

    • Logical hierarchy

    Real-Life Example

    • Vehicle → Car → ElectricCar

    Each child inherits features of its parent.

Inheritance Example

A class inherits properties from another class and adds its own method. 

class Vehicle {
  move() {
    console.log("Vehicle is moving");
  }
}

class Car extends Vehicle {
  drive() {
    console.log("Car is driving");
  }
}

  • Polymorphism

    What is Polymorphism ?

    Polymorphism means one method behaving differently in different situations.

    Same method name, different behavior.

    Real-Life Example

    • A person can be a teacher, parent, or friend

    • Same person, different roles

Polymorphism Example

A child class overrides a parent method to provide different behavior. 

class Animal {
  sound() {
    console.log("Animal sound");
  }
}

class Dog extends Animal {
  sound() {
    console.log("Bark");
  }
}

  • sound() behaves differently.

    How JavaScript Supports OOP

    JavaScript supports OOP using:

    • Objects

    • Constructor functions

    • Prototypes

    • ES6 Classes

    JavaScript is prototype-based, but ES6 provides class syntax for simplicity.

Object Creation Example

Creates an object with properties and a method. 

let person = {
  name: "Riya",
  age: 22,
  speak() {
    console.log("Hello");
  }
};

  • This is the simplest form of OOP in JavaScript.

    Benefits of OOP in JavaScript

    • Better code organization

    • Easier debugging

    • High reusability

    • Scalable architecture

    • Real-world modeling

    Common Misconceptions

    • OOP is only for Java or C++

    • JavaScript does not support OOP

    • Classes are mandatory for OOP

    Reality:

    • JavaScript fully supports OOP

    • Objects and prototypes are enough

    • Classes are syntax sugar

    Where OOP is Used in JavaScript

    • Web applications

    • Frameworks like React and Angular

    • Backend development (Node.js)

    • Game development

    • Large enterprise applications

    Best Practices for Learning OOP

    • Understand concepts before syntax

    • Practice real-world examples

    • Focus on objects and behavior

    • Avoid overcomplicating design

    • Learn step-by-step

Next ❯