Constructor vs Prototype in JavaScript: What's the Difference?

When you’re first learning JavaScript, it can be confusing to differentiate between the constructor and prototype. Oftentimes, they’re used interchangeably to describe similar concepts, but they’re actually different things that serve different purposes.

In this blog post, we will demystify these two terms and explain the difference between them.

Short answer

So what’s the difference between constructor and prototype? A short answer is that the constructor is a function that is used to create an object, while the prototype is an object that contains properties and methods that are inherited by objects created from a constructor.

Let’s take a look at an example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

    function Person(name) {
      this.name = name;
    }

    Person.prototype.sayHello = function() {
      console.log(`Hello, my name is ${this.name}.`);
    }

    const person = new Person('John');

    person.sayHello(); // Hello, my name is John.

In the example above, we have a constructor function that takes a name parameter and assigns it to the name property of the object. We also have a prototype method called sayHello, which prints a message to the console.

When we create a new Person object using the constructor function, we can call the sayHello method on it, and it will print the message with the name that we passed into the constructor.

The person object can use the sayHello method because it’s inherited from the prototype of the Person constructor function.

Long answer

Overview of constructors

Constructors are functions that are used to create an object. When you call a constructor function with the new keyword, it will create a new object and return it.

If you’re coming from an OOP background, it’s easiest to compare constructor functions to classes. Just like in other languages, constructors allow you to create new objects and define their properties and methods.

For example, let’s compare a simple Java class and how we can achieve the same thing in JavaScript using a constructor:

Java

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

    public class Person {
      private String name;

      public Person(String name) {
        this.name = name;
      }

      public void sayHello() {
        System.out.println("Hello, my name is " + this.name);
      }
    }

    Person person = new Person("John");

    person.sayHello(); // Hello, my name is John

JavaScript
In JavaScript, we can create a Person constructor function with the same properties and methods:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

    function Person(name) {
      this.name = name;
    }

    Person.prototype.sayHello = function() {
      console.log(`Hello, my name is ${this.name}.`);
    }

    const person = new Person('John');
    person.sayHello(); // Hello, my name is John.

As you can see, the two are very similar. The main difference is that in JavaScript, we use the prototype keyword to add methods to our constructor function, whereas in Java we would just add them inside the class.

In fact, the new class syntax that came with ES6 is syntactic sugar that is meant to make working with constructor functions more similar to other OOP languages.

Notice also how we use this inside the JavaScript constructor function. this refers to the object that is implicitly created when you use the new keyword.

Overview of the Prototype

Now let’s cover the prototype in a bit more detail and why we use it to share properties and methods of the constructor between the created objects.

In JavaScript, functions are also JS objects themselves, and they have a property called prototype.

The purpose of the prototype is to share properties and methods between objects that are created from the constructor function.

For example, in our Person constructor function above, we added a sayHello method to the prototype. This means that every object created from the Person constructor will have a sayHello method.

Prototype chaining

Prototype shares properties between objects in a memory-efficient way. If we add a method to the prototype, only one instance of that method exists in memory, and it’s shared between all objects created from the constructor.

If we were to add the sayHello method directly to the Person constructor function, then every object would have its own copy of that method, taking up more memory.

This is called prototype chaining, and it’s an important part of the JavaScript language.

Here’s how the prototype chaining works: When JavaScript is looking for a property on an object, it will first check if that property exists on the object itself. If it doesn’t find it, it will look at the prototype of the object to see if the property is there.

If it’s not there, it will look at the prototype of the prototype, and so on until either a match is found or the end of the prototype chain is reached.

Modifying Prototype after the object is created

One of the benefits of using a constructor function and prototype is that we can add new properties and methods to the prototype after an object has been created.

For example, let’s say we want to add a getName method to our Person constructor function:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

    function Person(name) {
      this.name = name;
    }

    Person.prototype.sayHello = function() {
      console.log(`Hello, my name is ${this.name}.`);
    }

    const person = new Person('John');

    person.sayHello(); // Hello, my name is John


  Person.prototype.getName = function() {
    return this.name;
  }

  console.log(person.getName()); // John

As you can see, we were able to add the getName method to the prototype after the person object was created, and it still worked as expected.

Conclusion

In conclusion, the main difference between constructor and prototype in JavaScript is that the constructor is used to create an object, while the prototype is used to share properties and methods between objects.

If you’d like to get more web development, React and TypeScript tips consider following me on Twitter, where I share things as I learn them.
Happy coding!