Mastering Hard Parts of JavaScript: Prototype & Class III
Tags: javascript, codenewbie, prototype, oop
Published: 2020-08-21 20:54:28

---
series: Mastering Hard Parts of JavaScript
description: An introduction to JavaScript Prototype & Class using 15 exercises
---
## Using the `new` keyword

### Exercise 5

> Create a function PersonConstructor that uses the this keyword to save a single property onto its scope called greet. greet should be a function that logs the string 'hello'.

```js
function PersonConstructor() {
  // add code here
}

const simon = new PersonConstructor();
simon.greet();
// -> Logs 'hello'
```

### Solution 5

```js
function PersonConstructor() {
  this.greet = function () {
    console.log("hello");
  };
}
```

Wait, what's happening here? Actually nothing we have not seen before. The `new` keyword is a modifier, it makes some changes to the function that follows it (in this case the `PersonConstructor` function). What changes you ask? Nothing we haven't seen in previous exercises. It basically creates a new empty object, sets its [[prototype]] correctly, assigns it to the value `this` and returns this object. We can of course add new properties to this `this` object, which will be methods. And we're adding a greet method here to our object.

`new` doesn't do anything magical. It just automates what we've been doing manually until this point, create an empty object, set its [[prototype]] and return it. That's it!

### Exercise 6

> Create a function personFromConstructor that takes as input a name and an age. When called, the function will create person objects using the new keyword instead of the Object.create method.

```js
function personFromConstructor(name, age) {
  // add code here
}

const mike = personFromConstructor("Mike", 30);
console.log(mike.name); // -> Logs 'Mike'
console.log(mike.age); //-> Logs 30
mike.greet(); //-> Logs 'hello'
```

### Solution 6

```js
function personFromConstructor(name, age) {
  const person = new PersonConstructor();
  person.name = name;
  person.age = age;
  return person;
}
```

A combination of using new to create a new object, but then giving it extra properties (which are passed as parameters) and returning this object. Nothing terribly new happening here, just a combination of the two patterns we've seen before.

### Exercise 7

> Without editing the code you've already written, add an introduce method to the PersonConstructor function that logs "Hi, my name is [name]".

```js
mike.introduce();
// -> Logs 'Hi, my name is Mike'
```

### Solution 7

```js
PersonConstructor.prototype.introduce = function () {
  console.log(`Hi, my name is ${this.name}`);
};
```

Notice that this is very similar to Exercise 4, we are adding a method to an object. But which object? In Exercise 4, we had manually defined the name of our object as `personStore` so we simply added introduce as a property of that object. Here we don't have the name of the object that the JS engine automatically creates for us using the `new` keyword, so where can we store our functions? The answer is the (confusingly named) property `prototype`, which itself is an object.

Remember that all functions are objects in JavaScript? So PersonConstructor is a function which we can execute when we use (). But it's also an object, and we can access its properties like any other object using the dot notation. So in order to add any methods to our personConstructor function, we access its `prototype` property and add our methods there.

Spend some time to compare and contrast exercises 2, 3 and 4 with exercises 5, 6 and 7. You'll see that they are fundamentally doing the same thing. This comparison should make clear what the keyword `new` does and what the property `prototype` refers to.