Stop 04 · JavaScriptTopics · 20/36

Prototype

In short

Ever wondered how a plain array knows .map() when you never wrote it? Every object has a hidden link to a prototype, and JavaScript follows that link to find missing properties.

The underlying mechanism by which JavaScript objects inherit properties and methods from other objects — classes are just a friendlier syntax over this. Prototype chains are part of normal property lookup, so understanding them makes built-in objects, classes, inheritance, and method resolution much less mysterious.

The jaadu mascot as a young cook asks the head cook stirring a big pot of dal.

Think of it like this

Asking the senior cook

A new cook at a dhaba doesn't know the dal recipe, so he asks the head cook. If the head cook doesn't know, he asks the owner. The question climbs until someone answers, or nobody does. That's the prototype chain.

Watch it happen

Following the prototype chain

null

Object.prototype

headCook

trainee

1/4trainee.cook(): does trainee itself have cook? It only has name. Not here.

The big ideas

What you need to know

A hidden link

Every object points to another object, its prototype. Object.getPrototypeOf(obj) shows you which one.

Lookup climbs the chain

If a property isn't on the object, JavaScript checks its prototype, then that prototype's prototype, and so on.

The chain ends at null

Most chains end at Object.prototype, whose own prototype is null. Not found by then means undefined.

Classes are built on this

Class methods actually live on ClassName.prototype. Every object made with new links to it.

See it in code

Walk through the code

1const arr = [1, 2];2console.log(Object.getPrototypeOf(arr) === Array.prototype); // true3console.log(Object.hasOwn(arr, "map"));     // false, map lives on the prototype4 5const headCook = { cook() { return "Making dal"; } };6const trainee = Object.create(headCook);   // trainee's prototype is headCook7trainee.name = "Raju";8 9console.log(trainee.cook());               // "Making dal" (found on prototype)10console.log(Object.hasOwn(trainee, "cook")); // false11console.log(Object.getPrototypeOf(Object.prototype)); // null, end of chain

1/4An array's prototype is Array.prototype. map lives there, not on the array.

Object.create(proto) makes a new empty object whose prototype is proto. It's the most direct way to see the chain in action.

Save yourself the pain

Common mistakes

Oops

Adding your own methods to Array.prototype or String.prototype.

Do this instead

Every array on the page gets them, and it can clash with future JavaScript features. Write a normal helper function instead.

Oops

Mixing up .prototype and an object's prototype.

Do this instead

Only functions have a .prototype property. It becomes the prototype of objects made with new from that function.

Your mission

Walk the chain

~15 min

Quick check

What does this log? const a = { x: 1 }; const b = Object.create(a); a.x = 2; console.log(b.x);

Go deeper

1Log `Object.getPrototypeOf()` on an array or object to see its prototype chain. Validate your understanding by applying it in a small practical example.
2Add a method to `Array.prototype` as an exercise (not production practice). Test the result on both a successful path and an invalid or unexpected input.
3Learn how property lookup walks the prototype chain when a property isn't found directly.

Stuck on this topic? Ask an Insider

Get 1:1 guidance from people who've walked this exact path — on the InsideEdge app.

Download