Why prototypes are needed in Javascript - Challenge Your Understanding

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output of this prototype chain example?

Consider the following JavaScript code using prototypes. What will be printed to the console?

Javascript

function Animal() {
  this.alive = true;
}
Animal.prototype.breathe = function() {
  return 'Breathing';
};

function Dog(name) {
  this.name = name;
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {
  return 'Woof!';
};

const myDog = new Dog('Buddy');
console.log(myDog.bark());
console.log(myDog.breathe());
console.log(myDog.alive);

A

"Woof!"
"Breathing"
true

B

"Woof!"
undefined
true

C TypeError: myDog.bark is not a function

D

"Woof!"
"Breathing"
undefined

💡 Hint

Remember that Dog inherits from Animal through the prototype chain.

The Dog prototype is linked to Animal.prototype, so myDog can access methods like breathe() defined on Animal.prototype. The property alive is set in the constructor Animal, but since Dog does not call Animal constructor, alive is undefined on myDog. Therefore, myDog.alive is undefined. So option D matches this.

The correct output is:

"Woof!"
"Breathing"
undefined

Therefore, option D is correct.

❓ Predict Output

intermediate

What error does this code raise?

What error will this code produce when run?

Javascript

const obj = {};
console.log(obj.toString());
obj.toString = 5;
console.log(obj.toString());

A 5

B undefined

C TypeError: obj.toString is not a function

D No error, prints '[object Object]' then '5'

💡 Hint

What happens when you assign a non-function value to a method and then call it?

Initially, obj.toString() calls the inherited toString method from Object.prototype, printing '[object Object]'. After assigning obj.toString = 5;, obj.toString is no longer a function but a number. Calling obj.toString() then causes a TypeError because 5 is not callable.

🧠 Conceptual

advanced

Why are prototypes important in JavaScript?

Which of the following best explains why prototypes are needed in JavaScript?

A To enforce strict typing of variables at runtime.

B To allow objects to inherit properties and methods from other objects, enabling code reuse and efficient memory use.

C To create private variables inside functions that cannot be accessed outside.

D To automatically convert all objects to strings when printed.

💡 Hint

Think about how JavaScript shares methods between many objects.

Prototypes allow objects to share properties and methods without duplicating them in memory. This supports inheritance and code reuse. The other options describe unrelated features.

❓ Predict Output

advanced

What is the output of this prototype modification?

What will this code print to the console?

Javascript

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  return `Hello, ${this.name}`;
};

const alice = new Person('Alice');
console.log(alice.greet());

Person.prototype.greet = function() {
  return `Hi, ${this.name}`;
};

console.log(alice.greet());

A

"Hello, Alice"
"Hi, Alice"

B

"Hello, Alice"
"Hello, Alice"

C TypeError: alice.greet is not a function

D

"Hi, Alice"
"Hi, Alice"

💡 Hint

Remember that changing the prototype method affects all instances.

The first call to alice.greet() uses the original method, printing "Hello, Alice". After modifying Person.prototype.greet, the second call uses the new method, printing "Hi, Alice".

❓ Predict Output

expert

What is the output and why?

Analyze this code and select the correct output:

Javascript

const parent = { value: 42 };
const child = Object.create(parent);
child.value = 100;

console.log(child.value);
delete child.value;
console.log(child.value);
delete child.value;
console.log(child.value);

A

100
42
42

B

100
undefined
undefined

C

42
42
42

D

100
100
100

💡 Hint

Deleting a property only removes it from the object itself, not from its prototype.

Initially, child.value is 100 (own property). After deleting it, child no longer has value, so JavaScript looks up the prototype chain and finds value in parent as 42. Deleting again does nothing since child has no own value.

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