How JavaScript Prototypes Work: An Easy Overview

In the heart of Varanasi, the Gupta family had run a famous sweets shop for generations. The shop, "Gupta Misthan Bhandar," was known for its special Kesar Peda and Besan Ladoo, recipes passed down through generations. But the real magic wasn’t just in the recipes—it was in the way knowledge was inherited within the family, much like JavaScript Prototypes.

The Prototype of a Legacy

Dadaji (Grandfather), the founder of the shop, had created a special recipe book. Every time a new generation took over, they didn’t start from scratch. Instead, they used the same book but added their own variations. His son, Ramesh, added a special saffron twist to the peda, and his grandson, Aryan, introduced sugar-free versions for health-conscious customers.

This is exactly how JavaScript prototypes work. Every object in JavaScript doesn’t start with nothing—it inherits properties and methods from a parent prototype, just like how the Gupta family's new recipes were based on the original book.

function Sweets() {
    this.base = "Traditional Recipe";
}

Sweets.prototype.getRecipe = function () {
    return `This sweet is based on: ${this.base}`;
};

let kesarPeda = new Sweets();
console.log(kesarPeda.getRecipe());  // This sweet is based on: Traditional Recipe

Here, the Sweets function acts as the "recipe book" (prototype), and every sweet object that is created from it inherits the getRecipe method, just like how generations inherit traditional knowledge.

The Prototype Chain – A Family Tree of Knowledge

One day, Aryan’s younger cousin, Kabir, wanted to start his own chocolate-based sweets. Instead of creating a new recipe from scratch, he borrowed the base idea from Dadaji’s book but made his own modifications.

function ChocolateSweets() {
    this.base = "Chocolate Fusion Recipe";
}

// Inheriting from Sweets prototype
ChocolateSweets.prototype = new Sweets();

let chocoLadoo = new ChocolateSweets();
console.log(chocoLadoo.getRecipe());  // This sweet is based on: Chocolate Fusion Recipe

Here, ChocolateSweets didn’t need to create a new getRecipe method. It inherited it automatically from Sweets, just like how Kabir learned from his ancestors but added his unique touch.

Do’s and Don’ts of Modifying Prototypes

Aryan once tried to modify Dadaji’s book without informing others, which led to confusion. Similarly, in JavaScript, modifying prototypes without caution can create unwanted issues.

✅ Do: Use Prototypes for Shared Methods

Instead of defining the same function repeatedly in every object, use prototypes for efficiency.

Sweets.prototype.getPrice = function () {
    return "This sweet costs ₹250 per kg.";
};

Now, all sweets created from Sweets will automatically have the getPrice method without rewriting it multiple times.

❌ Don't: Directly Modify Object Prototypes in an Uncontrolled Way

Modifying built-in JavaScript prototypes (like Object.prototype) can lead to unpredictable behavior. It’s like changing the entire Gupta family’s secret recipe overnight without consulting anyone!

Object.prototype.customMethod = function () {
    return "Not recommended to modify built-in prototypes!";
};

Instead, always extend only your own objects and not JavaScript’s core objects.

Conclusion: A Tradition That Continues

The Gupta family’s sweets business flourished because of proper inheritance and careful modifications to their recipes. Similarly, JavaScript prototypes allow us to create objects efficiently while maintaining an organized inheritance system.

So, the next time you enjoy a delicious Peda, remember—you’re experiencing inheritance, just like JavaScript prototypes! 🚀