Why prototypes are needed in Javascript - See It in Action

Why prototypes are needed

📖 Scenario: Imagine you want to create many similar toys, each with the same features like color and sound. Instead of copying all features for every toy, you keep the common features in one place and each toy can use them. This is how prototypes help in JavaScript.

🎯 Goal: You will create a simple object and use a prototype to share a method among multiple objects. This shows why prototypes are useful to avoid repeating code.

📋 What You'll Learn

Create an object called toy with a property name set to 'Car'

Create a prototype object called toyPrototype with a method play that returns the string 'Playing with ' plus the toy's name

Set the prototype of toy to toyPrototype

Call the play method on toy and print the result

💡 Why This Matters

🌍 Real World

Prototypes help when many similar objects share behavior, like many users in an app sharing login methods.

💼 Career

Understanding prototypes is key for JavaScript developers to write efficient and maintainable code.

1

Create the toy object

Create an object called toy with a property name set to the string 'Car'.

Javascript

# Create the toy object with name 'Car'
// Your code here

Need a hint?

Use const toy = { name: 'Car' }; to create the object.

2

Create the prototype object

Create an object called toyPrototype with a method play that returns the string 'Playing with ' plus the toy's name property.

Javascript

const toy = { name: 'Car' };
// Create toyPrototype with play method
// Your code here

Need a hint?

Define toyPrototype as an object with a play method that uses this.name.

3

Set the prototype of toy

Set the prototype of the object toy to the object toyPrototype using Object.setPrototypeOf.

Javascript

const toy = { name: 'Car' };
const toyPrototype = {
  play() {
    return 'Playing with ' + this.name;
  }
};
// Set toyPrototype as prototype of toy
// Your code here

Need a hint?

Use Object.setPrototypeOf(toy, toyPrototype); to link the prototype.

4

Call the play method and print the result

Call the play method on the object toy and print the result using console.log.

Javascript

const toy = { name: 'Car' };
const toyPrototype = {
  play() {
    return 'Playing with ' + this.name;
  }
};
Object.setPrototypeOf(toy, toyPrototype);
// Print the result of toy.play()
// Your code here

Need a hint?

Use console.log(toy.play()); to show the message.