We All Know Objects, But What’s Object Prototypes?

We all know what an object is in JavaScript, right? A good ol' data structure that lets you store key-value pairs. const user = { name: "Alice", age: 28, greet() { console.log(`Hello, I'm ${this.name}`); } }; Simple. Clean. Works. But have you ever wondered: How is it that every object can use methods like toString() even if you didn’t define them? Try this: console.log(user.toString); // [Function: toString] Wait a minute. You never wrote toString in your user object. So… where’s it coming from? Enter the World of Prototypes In JavaScript, every object has a hidden property called [[Prototype]] (you can think of it as a secret link to another object). That link points to another object, which we lovingly call the prototype. In modern JavaScript, you can see it via proto: console.log(user.proto); This prototype object is like a blueprint or a backup storage. If JavaScript doesn’t find a property in the object itself, it’ll go check the prototype. Still not there? It’ll go up the chain again. This chain of looking-up is called the prototype chain. Object Prototypes: A Real Example Let’s build our own: const animal = { speak() { console.log("Animal sound"); } }; const dog = { name: "Charlie", proto: animal }; dog.speak(); We never defined speak() inside dog, but it still works — because it found it in animal, the prototype. Think of it like dog saying: “I don’t have a speak method... but let me ask my prototype real quick.” Behind the Scenes When you create an object using literal syntax {}, it automatically gets a prototype: const empty = {}; console.log(empty.proto === Object.prototype); This Object.prototype is the grandparent of all objects — the final stop in the chain. Function Prototypes vs Object Prototypes Another curveball: Functions in JavaScript also have a prototype property. But hold up — this one’s for when you use them as constructors: function Car() {} Car.prototype.drive = function () { console.log("Vroom!"); }; const myCar = new Car(); myCar.drive(); So: Car.prototype is what new objects created with new Car() will link to. myCar.proto === Car.prototype is true. Why Care? Understanding prototypes helps you: Build cleaner inheritance models Avoid duplicating methods across objects Know what’s really going on when you write Object.create(), or use class in modern JS Plus, you’ll look super smart in code reviews

Apr 19, 2025 - 19:30

We All Know Objects, But What’s Object Prototypes?

We all know what an object is in JavaScript, right?

A good ol' data structure that lets you store key-value pairs.

const user = {
  name: "Alice",
  age: 28,
  greet() {
    console.log(`Hello, I'm ${this.name}`);
  }
};

Simple. Clean. Works.

But have you ever wondered:

How is it that every object can use methods like toString() even if you didn’t define them?

Try this:

console.log(user.toString); // [Function: toString]

Wait a minute. You never wrote toString in your user object.

So… where’s it coming from?

Enter the World of Prototypes

In JavaScript, every object has a hidden property called [[Prototype]] (you can think of it as a secret link to another object).

That link points to another object, which we lovingly call the prototype.

In modern JavaScript, you can see it via __proto__:

console.log(user.__proto__);

This prototype object is like a blueprint or a backup storage.

If JavaScript doesn’t find a property in the object itself, it’ll go check the prototype.

Still not there? It’ll go up the chain again.

This chain of looking-up is called the prototype chain.

Object Prototypes: A Real Example

Let’s build our own:

const animal = {
  speak() {
    console.log("Animal sound");
  }
};

const dog = {
  name: "Charlie",
  __proto__: animal
};

dog.speak();

We never defined speak() inside dog, but it still works — because it found it in animal, the prototype.

Think of it like dog saying:

“I don’t have a speak method... but let me ask my prototype real quick.”

Behind the Scenes

When you create an object using literal syntax {}, it automatically gets a prototype:

const empty = {};
console.log(empty.__proto__ === Object.prototype);

This Object.prototype is the grandparent of all objects — the final stop in the chain.

Function Prototypes vs Object Prototypes

Another curveball: Functions in JavaScript also have a prototype property.

But hold up — this one’s for when you use them as constructors:

function Car() {}
Car.prototype.drive = function () {
  console.log("Vroom!");
};

const myCar = new Car();
myCar.drive();

So:

Car.prototype is what new objects created with new Car() will link to.
myCar.__proto__ === Car.prototype is true.

Why Care?

Understanding prototypes helps you:

Build cleaner inheritance models
Avoid duplicating methods across objects
Know what’s really going on when you write Object.create(), or use class in modern JS

Plus, you’ll look super smart in code reviews