const student = {
name: "Priya", age: 22, course: "JavaScript"
};Object-Oriented JavaScript: Objects, Classes, Methods, and Design Concepts
Bottom-Line Answer: JavaScript (JS) is a high-level, single-threaded, just-in-time (JIT) compiled programming language with first-class functions that conforms to the ECMAScript specification. It powers dynamic client-side web interactivity alongside HTML and CSS, and executes backend server runtimes via Node.js, Deno, and Bun.
What is Object-Oriented JavaScript? Core Concept & Direct Summary
What are the core OOP pillars supported in modern JavaScript?
So far in this series, your programs have beenscripts— instructions that run top to bottom. That works great for small tools. But imagine building a game with 50 players, a shop with 1,000 products, or a school system with 500 students. You can't writestudent1Name,student1Age,student2Name,student2Age… forever. 😵
Professional developers solve this withObject-Oriented Programming (OOP)— a way of organizing code aroundobjects: self-contained bundles that hold bothdata(properties) andbehavior(methods) together.
Think of it like this:
- 🍪 Aclassis the cookie cutter — the blueprint
- 🍪🍪🍪Objectsare the cookies — real things made from the blueprint
In this lesson, you'll go from "I know what an object is" to designing your own classes, creating objects from them, and understanding the four pillars of OOP that every interview asks about. Let's build. 🏗️
How Does Object-Oriented JavaScript Work? In-Depth Mechanics & Architecture
Part 1: Objects — The Foundation (Quick Recap+)
From Lesson 5, an object bundles related data as key-value pairs:
But objects hold more than data — they holdfunctionstoo. A function inside an object is called amethod:
🔑 Meetthis— The Object Talking About Itself
thisinside a method means"this object — the one calling the method."
It's how a method reaches itsownobject's data instead of some random variable. (We'll flagthisquirks as we go — it has famous edge cases!)
Part 2: The Problem — Copy-Paste Objects
One student works fine. Ten students? Disaster:
Same shape, same methods, repeated endlessly. Whenever you see this pattern, you need ablueprint— aclass.
Part 3: Classes — The Blueprint 🏭
Aclassdefines the structure once; you then manufacture as many objects ("instances") as you want:
Anatomy of a Class
The class vs instance moment of clarity:
One blueprint. Unlimited independent objects.Thisis how real applications manage thousands of users, products, and posts.
Part 4: Methods in Action — A Real Mini-System
Classes shine when objects havebehavior, not just data. Watch a bank account come alive:
Notice what the class gave us:
- Data (
balance) and therulesfor changing it (withdrawchecks funds) live together - Every account validates itself — no external code can accidentally create a broken state
- This isencapsulation— Pillar #1, arriving in a moment 👀
Part 5: The Four Pillars of OOP 🏛️
Every OOP interview asks about these. Here's each one — in plain JavaScript:
1️⃣ Encapsulation — Keep Data and Its Rules Together 🔒
Bundle data with the methods that safely manage it — and hide what shouldn't be touched. Modern JavaScript has true private fields with#:
(Remember the closure-based privacy fromLesson 22?#fieldsare the modern, cleaner version of that same idea.)
2️⃣ Inheritance — Build New Classes From Old Ones 🧬
ACaris aVehicle. ASavingsAccountis aBankAccount. Inheritance lets a class reuse and extend another:
extendscreates the parent-child link. The child gets everything the parent has, plus its own additions.
super — Calling the Parent
⚠️ Rule:in a child class constructor, you must call
super()beforeusingthis. Forget it → ReferenceError.
3️⃣ Polymorphism — Same Method, Different Behavior 🎭
Children canoverrideparent methods with their own versions:
One interface (speak()), many forms — that's polymorphism ("many shapes"), and it makes code beautifully extensible: add aCowclass later, and the loop just works.
4️⃣ Abstraction — Hide Complexity, Show Simplicity 🎛️
Users shouldn't need to knowhowthings work inside — just the simple controls:
You press one button; the machine handles the engineering. Your TV remote, your car's steering wheel, and every good class work this way.
🛠️ Mini Project: RPG Character System ⚔️
All four pillars in one tiny game system:
Common Beginner Mistakes (And Fixes)
⚠️ The comma trap— classes are NOT object literals:
Quick Self-Check: Lesson 23 Quiz 🧠
- What's the difference between a class and an object?
- What does the
constructormethod do, and when does it run? - What's the output?
- Why must a child class call
super()before usingthis? - Name the four pillars of OOP.
(Answers: 1. A class is the blueprint; an object is a real instance built from it (cookie cutter vs cookie) · 2. It initializes each new object — runs automatically when you writenew ClassName(...)· 3. "Woof!" — the child's overridden method wins (polymorphism) · 4. The parent must set up its part of the object first; JavaScript enforces this with a ReferenceError · 5. Encapsulation, inheritance, polymorphism, abstraction)
JavaScript Decision Matrix & Syntax Comparison
Understanding the mechanical differences between variable declarations and execution environments is critical for writing performant, bug-free modern JavaScript.
var vs let vs const| Feature / Property | var (Legacy ES5) | let (Modern ES6+) | const (Modern ES6+) |
|---|---|---|---|
| Scope | Function Scope | Block Scope ({}) | Block Scope ({}) |
| Hoisting Behavior | Hoisted (initialized as undefined) | Hoisted (Temporal Dead Zone - ReferenceError) | Hoisted (Temporal Dead Zone - ReferenceError) |
| Reassignable | ✓ Yes | ✓ Yes | ✗ No (Immutable binding) |
| Redeclarable in Same Scope | ✓ Yes (Error-prone) | ✗ No (SyntaxError) | ✗ No (SyntaxError) |
| Window Object Binding | Creates property on window | Does not attach to window | Does not attach to window |
| Dimension | Client-Side (Web Browser) | Server-Side (Node.js / Deno) |
|---|---|---|
| Global Object | window, document, navigator | global, process, globalThis |
| DOM & UI Manipulation | ✓ Full access (document.querySelector) | ✗ No DOM (Headless / Non-UI) |
| File System & OS Access | ✗ Blocked (Sandboxed security) | ✓ Full access (fs, os, child_process) |
| Primary Focus | Interactive UI, animations, client state | REST APIs, microservices, databases, I/O streaming |
Runnable JavaScript Code Example & Practical Implementation
class BankAccount {
#balance = 0;
// Private field
constructor(initialDeposit) {
this.#balance = initialDeposit;
} deposit(amount) {
this.#balance += amount;
} getBalance() {
return this.#balance;
}
}const acc = new BankAccount(100);
acc.deposit(50);
console.log(acc.getBalance());
// 150Frequently Asked Questions & Technical Interview Insights
Technical Interview & Viva Questions
Frequently asked questions for frontend & full-stack rolesQ: Are JavaScript classes dynamic like prototype objects?
Related Tools, Tutorials & Authoritative References
Recommended Interactive Tools
- Online JavaScript Editor & IDE — Browser-based JavaScript workspace with live console and DOM inspector.
- C Programming Tutorial — Master memory allocation, pointers, and systems programming fundamentals.
- C++ Programming Tutorial — Explore Object-Oriented Programming, templates, and high-performance STL.
- Online Code Editors & Compilers — Complete development tool suite for 20+ programming languages.
Authoritative Standards & Citations
- ECMA-262 ECMAScript Language Specification — The official international JavaScript language specification maintained by TC39.
- MDN Web Docs (Mozilla Developer Network) — Authoritative documentation and API guide for JavaScript and Web APIs.
- Google V8 JavaScript Engine — Open-source high-performance JavaScript and WebAssembly engine documentation.
- Node.js Official Documentation — Server-side JavaScript runtime API specification and reference.