Why prototypes are needed in Javascript - Quick Recap

Recall & Review

beginner

What is a prototype in JavaScript?

A prototype is an object that other objects inherit properties and methods from. It allows sharing features between objects without copying them.

beginner

Why do JavaScript objects use prototypes?

Prototypes let objects share methods and properties efficiently, saving memory and enabling easy updates to shared behavior.

intermediate

How do prototypes help with method sharing?

Instead of each object having its own copy of a method, the method lives on the prototype. Objects access it through the prototype chain.

intermediate

What happens if a property is not found on an object?

JavaScript looks up the prototype chain to find the property. If it exists on the prototype, it is used.

beginner

How do prototypes support code reuse?

By putting shared code on prototypes, many objects can reuse the same code without duplication, making programs smaller and faster.

What is the main purpose of prototypes in JavaScript?

A To create new variables

B To share properties and methods between objects

C To store data permanently

D To run code faster

Prototypes allow objects to share properties and methods, avoiding duplication.

If a property is missing on an object, where does JavaScript look next?

A In the prototype of the object

B In the global variables

C In the browser cache

D It throws an error immediately

JavaScript checks the object's prototype chain to find missing properties.

How do prototypes help save memory?

A By deleting unused variables

B By compressing code automatically

C By storing shared methods once on the prototype instead of in every object

D By running code in the background

Methods on prototypes are shared, so each object doesn't need its own copy.

Which of these is true about the prototype chain?

A It is used to find properties not directly on the object

B It stores all variables in the program

C It runs code faster by skipping steps

D It is a list of all functions in the program

The prototype chain helps locate properties and methods by checking prototypes.

What happens if a property is found on both the object and its prototype?

A An error occurs

B The prototype's property is used

C Both are used together

D The object's own property is used

The object's own property overrides the prototype's property.

Explain why prototypes are important in JavaScript and how they help objects share behavior.

Think about how many objects can use the same method without copying it.

Describe what happens when you try to access a property that an object does not have directly.

JavaScript looks beyond the object itself.

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