JavaScript Prototypes Explained prototype vs proto

Open your browser console. Type console.dir([]). Expand the array.

What do you see? A property called [[Prototype]] (or sometimes __proto__). 🧐

If you’ve ever stared at that and wondered, "What on earth is the difference between prototype and __proto__?"—you are not alone. It is one of the most confusing concepts in JavaScript, yet it is the backbone of how the entire language works.

Let’s break it down like an expert. 🔨

The Blueprint vs. The Link 🔗

To understand this, we need to separate two distinct concepts:

1. The Blueprint (prototype): This belongs to functions (specifically, constructor functions).
2. The Link (__proto__): This belongs to objects (instances).

1. prototype: The Blueprint 📝

In JavaScript, functions are objects. When you create a function, JavaScript automatically gives it a special property called prototype.

Think of this as a Blueprint Box. It’s where you put methods and properties that you want future instances to inherit.

function Robot(name) {
  this.name = name;
}

// Adding a method to the Blueprint
Robot.prototype.speak = function() {
  console.log("Beep Boop 🤖");
};

Here, Robot.prototype is the object that will become the parent of any new robot we create.

2. __proto__: The DNA Link 🧬

Now, let’s create an instance:

const myBot = new Robot("R2-D2");

When myBot is born, JavaScript secretly links it to its parent's blueprint. This secret link is exposed in many browsers as __proto__.

console.log(myBot.__proto__ === Robot.prototype); // true ✅

In simple terms:

• Robot.prototype is the parent's stash of skills.
• myBot.__proto__ is the child's wire connecting to that stash.

Why Do We See Both in the Console? 🖥️

When you inspect an object in Chrome or Firefox, you are looking at the instance.

• You see [[Prototype]] (or __proto__) because the browser is showing you who created this object.
• It’s saying: "Hey, if you call a method I don't have, I'm going to look inside THIS object (my parent) to find it."

This chain of links is what we call the Prototype Chain. ⛓️

The "Official" Way 🧐

While __proto__ is widely supported, it was originally a non-standard feature. The "proper" modern way to access an object's prototype is:

Object.getPrototypeOf(myBot);

But let’s be real—we all still peek at __proto__ in the console for debugging. 😉

Summary: The Cheat Sheet 📄

Deep Dive Resources 📚

Want to master the depths of JavaScript? Check out these industry-standard resources:

• MDN Web Docs: Object prototypes - The bible of web documentation.
• JavaScript.info: Prototypes - A fantastic, deep resource for modern JS.

Now go forth and debug that console with confidence! 🚀