JavaScript Notes

Object-Oriented Programming in JavaScript – OOP Concepts Complete Guide

Complete guide to OOP in JavaScript: classes, objects, the 4 pillars (encapsulation, inheritance, abstraction, polymorphism), prototype chain, and interview Q&A.

Object-Oriented Programming (OOP) is a programming paradigm that organizes code around objects — bundles of related data and behavior — rather than around functions and logic. JavaScript supports OOP through its prototype system and the modern class syntax.

OOP makes programs easier to understand, maintain, extend, and debug by modeling real-world concepts as objects.

📊 OOP Core Concepts Map

Example

┌────────────────────────────────────────────────────────┐ │ OBJECT-ORIENTED PROGRAMMING │ └──────────────────────┬─────────────────────────────────┘ │ ┌───────────────┼────────────────┐ ▼ ▼ ▼ ┌─────────┐ ┌──────────┐ ┌───────────┐ │ Class │ │ Object │ │ Instance │ │(blueprint) │ (data + │ │ (created │ │ │ │ behavior)│ │ by new) │ └─────────┘ └──────────┘ └───────────┘ Four Pillars of OOP ┌────────────┐ ┌────────────┐ ┌────────────┐ ┌────────────┐ │Encapsulation│ │Inheritance │ │Abstraction │ │Polymorphism│ │ (protect │ │ (reuse │ │ (hide │ │ (many │ │ data) │ │ code) │ │ complexity)│ │ forms) │ └────────────┘ └────────────┘ └────────────┘ └────────────┘

💻 Example 1 — Objects: Data + Behavior Together

js example

// Without OOP — scattered data and functions
const studentName = "Riya";
const studentGrade = 92;
function getLetterGrade(grade) { return grade >= 90 ? "A" : "B"; }
function introduce(name, grade) { return `${name}: ${getLetterGrade(grade)}`; }

// With OOP — bundled together, self-contained
class Student {
  constructor(name, grade) {
    this.name  = name;
    this.grade = grade;
  }

  getLetterGrade() { return this.grade >= 90 ? "A" : "B"; }
  introduce()      { return `${this.name}: ${this.getLetterGrade()}`; }
}

const s = new Student("Riya", 92);
console.log(s.introduce());
console.log(s.getLetterGrade());

Output

Riya: A
A

💻 Example 2 — The Four Pillars in One Example

Example

// 1. ENCAPSULATION — data is protected, access through methods class BankAccount { #balance; constructor(owner, balance) { this.owner = owner; this.#balance = balance; } deposit(amount) { this.#balance += amount; } get balance() { return this.#balance; } // controlled read } // 2. INHERITANCE — SavingsAccount reuses BankAccount class SavingsAccount extends BankAccount { #interestRate; constructor(owner, balance, interestRate) { super(owner, balance); this.#interestRate = interestRate; } addInterest() { this.deposit(this.balance * this.#interestRate); } } // 3. ABSTRACTION — caller just calls addInterest(), doesn't know HOW const account = new SavingsAccount("Riya", 10000, 0.05); account.addInterest(); // complex math is hidden console.log(account.balance); // 4. POLYMORPHISM — shape.area() works for any shape class Shape { area() { return 0; } } class Circle extends Shape { constructor(r) { super(); this.r = r; } area() { return Math.PI * this.r ** 2; } } class Square extends Shape { constructor(s) { super(); this.s = s; } area() { return this.s ** 2; } } const shapes = [new Circle(5), new Square(4), new Circle(3)]; shapes.forEach(shape => console.log(shape.area().toFixed(2)));

Output

💻 Example 3 — Complete Real-World OOP Application: Task Manager

Example

class Task { #id; #done = false; constructor(id, title, priority = "medium") { this.#id = id; this.title = title; this.priority = priority; this.createdAt = new Date().toISOString().split("T")[0]; } complete() { this.#done = true; return this; } get isDone() { return this.#done; } get id() { return this.#id; } toString() { const status = this.#done ? "✅" : "⏳"; return `${status} [${this.priority.toUpperCase()}] ${this.title}`; } } class TaskManager { #tasks = []; #nextId = 1; add(title, priority) { const task = new Task(this.#nextId++, title, priority); this.#tasks.push(task); return task; } complete(id) { const task = this.#tasks.find(t => t.id === id); if (!task) throw new Error(`Task ${id} not found`); task.complete(); } get pending() { return this.#tasks.filter(t => !t.isDone); } get completed() { return this.#tasks.filter(t => t.isDone); } summary() { this.#tasks.forEach(t => console.log(t.toString())); console.log(`\nTotal: ${this.#tasks.length} | Done: ${this.completed.length} | Pending: ${this.pending.length}`); } } const manager = new TaskManager(); manager.add("Learn JavaScript OOP", "high"); manager.add("Build a project", "medium"); manager.add("Practice interview questions", "high"); manager.complete(1); manager.summary();

Output

✅ [HIGH] Learn JavaScript OOP
⏳ [MEDIUM] Build a project
⏳ [HIGH] Practice interview questions

Total: 3 | Done: 1 | Pending: 2

📋 OOP vs Functional Programming

Aspect	OOP	Functional
Core unit	Objects	Functions
State	Mutable (controlled by methods)	Immutable data preferred
Code reuse	Inheritance, composition	Higher-order functions, composition
Best for	Modeling real-world entities	Data transformation pipelines
JavaScript support	Classes, prototypes	Map/filter/reduce, closures
Paradigm	Imperative	Declarative

JavaScript supports both paradigms — choose what fits the problem.

⚠️ Common Mistakes

❌ Mistake 1 — Over-Engineering with OOP for Simple Problems

Example

// BAD — class for a simple one-time operation class NumberAdder { constructor(a, b) { this.a = a; this.b = b; } add() { return this.a + this.b; } } console.log(new NumberAdder(2, 3).add()); // GOOD — just use a function const add = (a, b) => a + b; console.log(add(2, 3));

❌ Mistake 2 — Making Everything a Global Object

js example

// BAD — tightly coupled global state
window.currentUser = { name: "Riya", loggedIn: true };

// GOOD — encapsulate in a class
class UserSession {
  #user = null;
  login(user)  { this.#user = user; }
  logout()     { this.#user = null; }
  get current(){ return this.#user; }
}

❌ Mistake 3 — Mistaking Object Literals for OOP

Object literals are fine for simple data structures but they don't give you inheritance, encapsulation, or the ability to create many instances with shared behavior. Use classes for that.

🎯 Key Takeaways

OOP organizes code around objects that bundle data and behavior
The four pillars are: Encapsulation, Inheritance, Abstraction, Polymorphism
A class is a blueprint; new ClassName() creates an instance (object)
JavaScript OOP is prototype-based — class is clean syntax over prototypes
Use OOP when modeling real-world entities with state and behavior
Combine OOP and functional programming — JavaScript supports both
Start simple: don't add classes until you have a clear reason to

❓ Interview Questions

Q1. What is OOP and why is it useful? > OOP is a paradigm that organizes code around objects — bundling related data and behavior together. It makes code more readable, reusable, and maintainable by modeling real-world entities as self-contained units.

Q2. What are the four pillars of OOP? > 1. Encapsulation — protect data by restricting direct access. 2. Inheritance — child classes reuse and extend parent class behavior. 3. Abstraction — hide complexity, expose clean interfaces. 4. Polymorphism — different objects respond to the same method call in different ways.

Q3. Is JavaScript truly object-oriented? > JavaScript is a multi-paradigm language. It supports OOP via prototype-based inheritance and ES6 classes, but also functional programming. Unlike Java or C++, JavaScript's OOP is prototype-based, not class-based — class is syntactic sugar over prototypes.

Q4. What is the difference between a class and an object? > A class is a blueprint (definition) — it does not occupy runtime memory by itself. An object (instance) is created from the class using new — it is a real value in memory with its own state.

Q5. What is a prototype in JavaScript OOP? > Every JavaScript object has an internal [[Prototype]] link to another object. Methods defined on a class are stored on its prototype object and shared by all instances via this chain. This is how JavaScript implements inheritance without copying methods into every object.

Q6. What is the difference between null and undefined in the context of OOP? > In OOP, null is often used to intentionally signal "no object here" (e.g., this.currentUser = null after logout). undefined signals a property has not been set at all. Using null makes intent clearer.

Q7. When should you use OOP vs functional programming in JavaScript? > Use OOP when you have entities with state and identity (User, Account, Task, Car). Use functional programming for data transformation pipelines (processing arrays, pure computations). JavaScript lets you mix both — use whatever best fits each problem.

Q8. What is the difference between class-based and prototype-based OOP? > In class-based OOP (Java, C++), classes are rigid blueprints, and instances are copies. In prototype-based OOP (JavaScript), objects inherit directly from other objects via prototype links. ES6 classes provide a class-like syntax, but the underlying mechanism is still prototype delegation.

Exam Focus

Revise definitions, diagrams, examples, and short-answer points for Object-Oriented Programming in JavaScript – OOP Concepts Complete Guide.

Interview Use

Prepare one clear explanation, one practical example, and one common mistake for this JavaScript Master Course topic.

Search Terms

javascript-complete-guide, javascript master course, javascript, complete, guide, oop, object, oriented

Continue learning this concept

Oop In JavascriptAbstraction in JavaScript OOP – Hide Complexity, Expose SimplicityLearn abstraction in JavaScript OOP with class examples, private fields, real-world analogies, common mistakes, and interview Q&A. beginner-friendly tutorial.Oop In JavascriptJavaScript Classes Tutorial – ES6 Class Syntax, Inheritance & MoreMaster JavaScript ES6 classes with constructors, methods, static members, inheritance, private fields, and real-world examples. beginner-friendly JS OOP tutorial.Oop In JavascriptJavaScript Constructor Functions – new Keyword, Prototype & OOP PatternsUnderstand JavaScript constructor functions with the new keyword, prototype methods, object creation, comparison with ES6 classes, and interview-ready Q&A.Oop In JavascriptEncapsulation in JavaScript – Private Fields, Getters, Setters & Data ProtectionLearn encapsulation in JavaScript with private class fields, getters, setters, closures, and real-world examples. Protect your data with ES2022 OOP techniques.Oop In JavascriptJavaScript Inheritance – extends, super, and Prototype-Based InheritanceMaster JavaScript inheritance with ES6 extends, super keyword, method overriding, prototype chain, multi-level inheritance, and interview-ready Q&A examples.Oop In JavascriptJavaScript OOP Projects – Build Real-World Apps with Classes & OOPPractice JavaScript OOP with 3 real-world projects: Shopping Cart, Library System, and Student Grade Manager. Apply classes, inheritance, encapsulation, and polymorphism.

PreviousJavaScript Inheritance – extends, super, and Prototype-Based Inheritance NextJavaScript OOP Projects – Build Real-World Apps with Classes & OOP