JavaScript Prototype —

… what is it? and why is it important?

A software engineer friend of mine gave me advice on topics he deemed important to prepare for interviews. He asked, “Do you know what Javascript prototype is?” I paused. He continued “if you don’t, you should definitely read about it. It will most likely be asked in your interview” — sure enough, at a mock technical interview, I was asked about JavaScript Prototype. So what it is?…

What is Prototype-based Language?

JavaScript is an object-based language based on prototypes. This means that whenever we create a function, JavaScript adds an internal property inside the function which is also known as Prototype Object. This means we can attach methods and properties which enables all other objects to inherit these methods and properties as well.

Consider the following example:
Dog object is created using a function constructor ‘function Dog(name, age, breed)’ . Dog has a prototype property and the prototype property has a constructor object.

Since the prototype property has no value, this console.log will show an empty object { }

But first, understanding JavaScript Objects

Before delving into prototype, let’s talk about objects in JS. Objects are key/value pairs. One way to create an object in JS is with function constructors (example shown above) You can add properties and values to an object using dot notation.

Example of creating an object using the constructor function

Object.create
Object.create which is another way to create objects in JS. To read about it, please refer to last week’s blog post on Object.create() for a more in-depth understanding of this method.

Prototype Inheritance

So we know that in JavaScript, a prototype can be used to add properties and methods to a constructor function. Objects inherit properties and methods from a prototype. Consider the example below:

Input:

Output:

In the above code, we added a new property ‘gender’ to the Dog constructor function using Dog.prototype.gender = 'male' — object dog1 and dog2 inherits and can access the property ‘gender’ from the prototype property of Dog.

Changing Prototype

Since objects inherit from the prototype object, then all new objects will have changed property value if a prototype value is changed. All the previously created objects will have the previous value. Consider the example below:

Example of changing prototype

Even though we changed the prototype color from beige to brown, dog1 still has the previous value of beige.

Prototype Chaining

If an object attempts to access the same property that is in the constructor function and the prototype object, the object takes the property from the constructor function.

Example of Prototype Chaining

In the example above, a property name is declared in the constructor function and also in the prototype property of the constructor function. When the program runs the code, dog1.name looks in the constructor function to see if there is a property called name . Since the constructor function has the name property with the value ‘Sammy’, the object takes value from that property instead of ‘Kingsley’. However, because the constructor function does not have a property value of breed the code looks into the prototype object and inherits it from there. Therefore, breed gets output as ‘German Shepherd’

Prototype is code reuse where an object inherits its methods and properties from the prototype object. Objects are created using constructor function or Object.create(). Prototype is super useful and important because it allows us to easily define methods to all instances of a particular object. Since the method is applied to the prototype, it is only stored in the memory once but every instance of an object can access it! How cool!

I hope this was helpful in your learning of prototype in JavaScript!!

Happy Coding, friends!