Prototype in Javascript - 03 - The new keyword
Tags: javascript, oop, prototype
Published: 2020-04-16 21:38:35

In the previous article, we saw how to create objects and set their prototypes using the internal **\_\_proto\_\_** property. Let us now look at another way of creating objects and how we assign prototypes to it.

## The new keyword

 ```javascript
    function createUser(name, score) {
      let user = {};
      user.name = name;
      user.score = score;
      return user;
    }

    let user = createUser('Kabir', 5);
```

If you look at the code of the *createUser* function, you could argue that it's a bit verbose. There are two lines of code, particularly that can be considered as boilerplate when writing functions to create objects. They are the first and last line in the function, namely 

1. `let user = {};`
2. `return user;`

Javascript provides us a way to get rid of these lines of boilerplate code with the introduction of the `new` keyword. Let us see with an example.

```javascript
    function User(name, score) {
      this.name = name;
      this.score = score;
    } 

    let user = new User('Kabir', 5);
```

As you can see, the amount of code needed to create an object is made much simpler by using the *new* keyword. How does it do that? Basically, when you use 'new' before a function call, it tells Javascript to do a few things inside the function body.

1. Create an empty object.
2. Set the `this` inside the function to point to that object.
3. Return that object at the end of the function.

In other words, you could say that `new` is a kind of syntactic sugar in Javascript when it comes to object creation. The two ways of creating a user object mentioned above work in exactly the same way under the hood in Javascript to create the object. There are however some minor differences when we use `new` (for example, the function name is capitalized to 'User'. Although this isn't compulsory, it is practiced by developers as a convention to let other people know that this function is meant to be used with the new keyword) but they aren't relevant to our topic at hand.

Now, you might be wondering, how does one set the \_\_proto\_\_ object when creating an object using the `new` keyword? The answer to that lies in a default property available in a Javascript function called **prototype**.

### Function.prototype

All constructor functions in Javascript have a property called `prototype`. Please note that this is slightly different from the \_\_proto\_\_ or [[Prototype]] property of objects in a few ways (You can read more about that [here](https://javascript.info/prototype-methods)). The `prototype` property of a function is used to assign the [[Prototype]] to the object that would be created when the `new` keyword is used with that function. Let us look at an example.

```javascript
    function User(name, score) {
      this.name = name;
      this.score = score;
    } 

    let userFunctions = {
      incrementScore: function() {
        this.score++;
      }
    }

    User.prototype = userFunctions;

    let user = new User('Kabir', 5);
    user.incrementScore();
    console.log(user.score); // Outputs 6
```

In the above code, we assign a custom object called *userFunctions* to User.prototype. By doing so, we are telling Javascript that whenever an object is created using `new User()`, then set the \_\_proto\_\_ of that object to *userFunctions*. In this way, we are able to set the prototypes for objects created through functions as well.

An important point to note is that it isn't wise to directly assign an object to the function prototype as this leads to the function's constructor value being overridden as well. This is because every function in Javascript has a default object for its prototype. This object holds the reference to a constructor, whose value you normally wouldn't want to be overwritten. Hence, a better way would be to set properties to the prototype as shown below.

```javascript
    User.prototype.incrementScore = function() {
      this.score++;
    };
```

In using the new keyword, we have seen that we write the code for the constructor function in one block and assign properties to its prototype in another block. There's a cleaner way to do both of these in Javascript in the same block of code, using classes. We shall see more about it in the next article of this series.