How does proto differ from prototype?

JavaScriptJunior~2 min read

In short

Property	Where it lives	What it stores
`__proto__`	On the object	A reference to its prototype
`prototype`	On the constructor function or class	The object that becomes the prototype for created objects

__proto__ → of an already created object
prototype → on the constructor (template) objects are created from

Example to understand it

javascript

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

User.prototype.sayHi = function() {
  console.log(`Hi, ${this.name}`);
};

const tim = new User('Tim');

Now let's see what happens:

javascript

console.log(tim.__proto__ === User.prototype); // true
console.log(User.prototype.constructor === User); // true

Breakdown:

User.prototype is an object that holds methods (sayHi) and serves as the prototype for all objects created via new User().
tim.__proto__ is a reference to that very User.prototype object.

Visually

javascript

User (function)
│
├── prototype  ──►  { sayHi(), constructor: User }
│
└── new User('Tim')  →  tim {
                         name: 'Tim',
                         __proto__: User.prototype
                       }

That is, the __proto__ of a created object points to the prototype of the function that created it.

In plain terms

Property	What it tells	Example
`prototype`	"What my children will get"	`User.prototype.sayHi = ...`
`__proto__`	"Who my parent is"	`tim.__proto__ === User.prototype`

Example with a chain

javascript

function Animal() {}
Animal.prototype.eats = true;

function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.barks = true;

const rex = new Dog();

console.log(rex.barks); // true (on Dog.prototype)
console.log(rex.eats);  // true (on Animal.prototype)

The chain looks like this:

javascript

rex.__proto__ → Dog.prototype → Animal.prototype → Object.prototype → null

Every object has `proto`,

while prototype exists only on functions and classes

javascript

const obj = {};
console.log(obj.__proto__);       // Object.prototype
console.log(obj.prototype);       // undefined

function Foo() {}
console.log(Foo.prototype);       // { constructor: Foo }
console.log(Foo.__proto__);       // Function.prototype

Ordinary objects have no prototype, while constructor functions have both: prototype and __proto__.

In modern practice

The __proto__ property is considered legacy. Modern equivalents are recommended:

javascript

Object.getPrototypeOf(obj); // instead of obj.__proto__
Object.setPrototypeOf(obj, proto); // instead of obj.__proto__ = proto

Summary table

Property	Where it's used	What it stores	When it applies
`__proto__`	on the object	a reference to its actual prototype	when you need to know "who is my parent"
`prototype`	on the constructor function or class	the object that becomes the prototype for created objects	when creating methods available to all instances

The key relationship

javascript

instance.__proto__ === Constructor.prototype

Every object created via new Constructor() gets a reference to Constructor.prototype in its internal __proto__ property.

In one phrase:

prototype is the "blueprint" or "template" that methods for new objects come from. __proto__ is the object's "pointer" to that template, the one it inherits everything from.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

How does __proto__ differ from prototype?

Short Answer

How does proto differ from prototype?