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.