Web Dev Day 18: Unmasking JS (Prototypes)

📅 Date: April 25, 2026

🧠 Mood: The Mechanic 🔧

🔥 Topic: Web Dev Day 18: Unmasking JS (Prototypes)

🛑 JavaScript Lied to Me

It’s Saturday. Usually, I would be grinding out Linked Lists in C++ today. But my mind is completely stuck on what I learned yesterday about Object-Oriented Programming in JavaScript. I thought I understood it. I used the class keyword, I built a constructor, and it felt exactly like C++ or Java.

Then, I dug a little deeper and hit a brutal reality check: Classes in JavaScript are fake.

Unlike Java or C++, JavaScript does not have traditional classes. The class keyword introduced in ES6 is literally just "syntactic sugar"—a nice-looking wrapper put there to make developers from other languages feel comfortable. Under the hood, JavaScript is fundamentally a prototype-based language. If you don't understand prototypes, you don't understand JavaScript. Today, I opened the hood to see the actual engine.

---

🧬 The Prototype Chain (The DNA of JS)

In JavaScript, absolutely everything is an Object. Arrays are objects. Functions are objects. Strings are objects. And every single object has a hidden, built-in property called its Prototype. This prototype is like a parent object from which it inherits methods and properties.

1. How Inheritance Actually Works

When you create an array let arr = [1, 2, 3] and type arr.push(4), where did the .push() function come from? You didn't write it. JavaScript looks at your array, doesn't find a push method, so it travels UP the chain to the master Array.prototype object. It finds the method there and uses it.

2. The End of the Line (Null)

This lookup process goes up and up. Your array inherits from Array.prototype, which inherits from the ultimate master Object.prototype. If JavaScript looks for a method and reaches Object.prototype without finding it, it hits null and throws a terrifying "undefined" error.

---

💻 Practical: Hacking the Master Object

To prove I understood this, I decided to do something dangerous but educational. I injected a custom method directly into the highest-level JavaScript Object prototype. By doing this, every single variable I create instantly gains access to this new superpower.

// Let's create an array and a string
let myFriends = ["Munmun", "Rahul"];
let myName = "Sahil";

// We inject a brand new method straight into the core Object Prototype
Object.prototype.sahilCustomPrint = function() {
    console.log(`System Override: Executing Sahil's custom logic on ${this}`);
};

// Now, watch the magic. 
// Even though I never added this method to the array or the string directly...

myFriends.sahilCustomPrint(); 
// Output: System Override: Executing Sahil's custom logic on Munmun,Rahul

myName.sahilCustomPrint();    
// Output: System Override: Executing Sahil's custom logic on Sahil

Because both the Array and the String ultimately trace their ancestry back to the master Object, they both inherited my custom function automatically. This is incredibly powerful, but it's also why you should rarely mess with the global prototype in production—you might accidentally overwrite critical browser functions!

---

🎯 The Solid Foundation

Understanding Prototypes demystifies the "magic" of JavaScript. It proves that there is no magic, just a highly logical chain of object references. Tomorrow, I will tackle the final boss of core JavaScript concepts: Closures and Lexical Scoping. Let's finish the weekend strong.