Why prototypes are needed in Javascript - Visual Breakdown

Concept Flow - Why prototypes are needed

Create Object

↓

Access Property

↓

Property Found?

No→Look in Prototype

↓

Property Found?

↓

Use Property

↓

Done

↓

Repeat Until Found or null

↓

Return undefined if not found

When you try to use a property on an object, JavaScript looks for it on the object itself. If it is not there, it looks up the chain in the object's prototype, repeating until it finds the property or reaches the end.

Execution Sample

Javascript

const obj = {a: 1};
console.log(obj.a); // 1
console.log(obj.b); // undefined

obj.__proto__.b = 2;
console.log(obj.b); // 2

This code shows how JavaScript looks for properties on the object and then on its prototype if not found.

Execution Table

Step	Action	Property Accessed	Found On	Value Returned
1	Access obj.a	a	obj	1
2	Access obj.b	b	obj	undefined
3	Add b=2 to obj.__proto__	b	obj.__proto__	2
4	Access obj.b again	b	obj.__proto__	2

💡 Property b not found on obj initially, found on prototype after adding.

Variable Tracker

Variable	Start	After Step 3	After Step 4
obj	{a:1}	{a:1}	{a:1}
obj.__proto__	{}	{b:2}	{b:2}

Key Moments - 2 Insights

Why does obj.b return undefined at first but 2 after adding b to obj.__proto__?

At step 2 in the execution table, obj.b is not found on obj, so it returns undefined. After step 3, b is added to obj.__proto__, so at step 4, obj.b finds b in the prototype and returns 2.

Why does JavaScript look in obj.__proto__ when a property is not found on obj?

JavaScript uses the prototype chain to find properties. If a property is missing on the object itself, it checks the prototype (obj.__proto__) as shown in the concept flow and execution table steps 2 and 4.

Visual Quiz - 3 Questions

Look at the execution table, what value does obj.b have at step 2?

A undefined

B 2

C null

D 1

💡 Hint

Check the 'Value Returned' column for step 2 in the execution_table.

At which step is the property b added to the prototype?

A Step 1

B Step 3

C Step 2

D Step 4

💡 Hint

Look at the 'Action' column describing adding b to obj.__proto__.

If we remove the line adding b to obj.__proto__, what would obj.b return at step 4?

A null

B 2

C undefined

D 1

💡 Hint

Refer to step 2 where obj.b is undefined before adding b to prototype.

Concept Snapshot

JavaScript objects have prototypes.
When a property is not found on the object, JS looks up the prototype chain.
This allows sharing properties and methods efficiently.
Prototypes help avoid duplication and enable inheritance.
Accessing a property triggers this lookup automatically.

Full Transcript

This visual execution shows why prototypes are needed in JavaScript. When you try to access a property on an object, JavaScript first looks on the object itself. If it does not find the property, it looks on the object's prototype, then the prototype's prototype, and so on until it finds the property or reaches the end of the chain. The example code shows accessing obj.a which is found on obj, and obj.b which is initially undefined. After adding b to obj's prototype, accessing obj.b returns 2. This demonstrates how prototypes allow objects to share properties and methods without duplicating them. The execution table traces each step of property lookup and modification. The variable tracker shows how obj and its prototype change. Key moments clarify why property lookup works this way. The quiz tests understanding of the prototype lookup process. Overall, prototypes are needed to enable efficient property sharing and inheritance in JavaScript.

Practice

1. Why are prototypes needed in JavaScript?

easy

A. To prevent any changes to objects

B. To create new variables inside functions

C. To write code that runs faster on the server

D. To allow objects to share methods and properties efficiently

Solution

1. Step 1: Understand object sharing

   Prototypes let many objects share the same methods and properties without copying them.

2. Step 2: Recognize memory efficiency

   This sharing saves memory and makes code easier to maintain.

3. Final Answer:

   To allow objects to share methods and properties efficiently -> Option D

4. Quick Check:

   Prototypes = shared methods and properties [OK]

Hint: Prototypes share methods to save memory [OK]

Common Mistakes:

• Thinking prototypes create new variables
• Believing prototypes speed up server code
• Assuming prototypes prevent object changes

2. Which syntax correctly sets a method on a prototype in JavaScript?

easy

A. MyObject.myMethod = function() { return 1; };

B. MyObject.prototype.myMethod = function() { return 1; };

C. prototype.MyObject.myMethod = function() { return 1; };

D. MyObject->prototype->myMethod = function() { return 1; };

Solution

1. Step 1: Identify correct prototype syntax

   In JavaScript, the prototype property is accessed as MyObject.prototype.

2. Step 2: Confirm method assignment

   Assigning a function to MyObject.prototype.myMethod adds it to the prototype.

3. Final Answer:

   MyObject.prototype.myMethod = function() { return 1; }; -> Option B

4. Quick Check:

   Correct prototype syntax = MyObject.prototype.myMethod = function() { return 1; }; [OK]

Hint: Use .prototype to add methods to objects [OK]

Common Mistakes:

• Using MyObject.myMethod instead of prototype
• Writing prototype.MyObject instead of MyObject.prototype
• Using arrows (->) instead of dots (.)

3. What will be the output of this code?

function Person(name) { this.name = name; }
Person.prototype.greet = function() { return 'Hi, ' + this.name; };
const p = new Person('Anna');
console.log(p.greet());

medium

A. 'Hi, Anna'

B. ReferenceError: name is not defined

C. TypeError: p.greet is not a function

D. 'Hi, undefined'

Solution

1. Step 1: Understand constructor and prototype method

   The Person function sets this.name to 'Anna'. The greet method is on Person.prototype.

2. Step 2: Call greet on instance

   Calling p.greet() finds greet on prototype and returns 'Hi, Anna'.

3. Final Answer:

   'Hi, Anna' -> Option A

4. Quick Check:

   Prototype method returns greeting with name [OK]

Hint: Prototype methods are accessible on instances [OK]

Common Mistakes:

• Expecting greet to be undefined
• Confusing instance properties with prototype
• Thinking greet is not a function

4. Find the error in this code that tries to add a method to a prototype:

function Car() {}
Car.prototype = {
  start: function() { return 'Car started'; }
};
const c = new Car();
console.log(c.start());

medium

A. The prototype is overwritten, losing the constructor reference

B. The start method is not a function

C. Car is not defined before use

D. Cannot assign an object to prototype

Solution

1. Step 1: Check prototype assignment

   Assigning an object to Car.prototype replaces the original prototype and removes the constructor link.

2. Step 2: Understand consequence

   This can cause issues if code relies on constructor property or inheritance chain.

3. Final Answer:

   The prototype is overwritten, losing the constructor reference -> Option A

4. Quick Check:

   Overwriting prototype removes constructor [OK]

Hint: Avoid overwriting prototype object directly [OK]

Common Mistakes:

• Thinking start is not a function
• Believing Car is undefined
• Assuming prototype cannot be an object

5. You want to add a method describe to all objects created by function Animal(type) without copying it to each instance. How should you do it?

hard

A. Add describe method to each instance manually after creation

B. Add describe method inside Animal function using this.describe

C. Add describe method to Animal.prototype

D. Add describe method to Object.prototype

Solution

1. Step 1: Understand method sharing

   Adding describe to Animal.prototype shares it with all instances without copying.

2. Step 2: Avoid inefficient or unsafe options

   Adding inside constructor copies method per instance; adding to Object.prototype affects all objects globally.

3. Final Answer:

   Add describe method to Animal.prototype -> Option C

4. Quick Check:

   Use prototype to share methods efficiently [OK]

Hint: Put shared methods on constructor's prototype [OK]

Common Mistakes:

• Adding methods inside constructor wastes memory
• Modifying Object.prototype can cause bugs
• Manually adding methods to each instance is inefficient