The 'new' keyword in JS
Tags: javascript, 100daysofcode, javascriptinwords, programming
Published: 2021-04-11 10:38:17

This is first post of my brand new series **Javascript In Words**. In this series i would be addressing small and basic parts of javascript that are sometimes overlooked by newbies.   

In this post I would be discussing the ***new keyword*** in javascript . ***new keyword*** have multiple aspects related to it but for now lets just consider the most basic functionality the ***new keyword*** performs.

> It creates a new Object.

Yes that’s it . Not so difficult to grasp right ? ***new keyword*** creates a new empty object . Enough of talking lets dive in to code, and create a *'Person'* Object

`const Person = new Object();`

What this single line of code did is created an empty object called *'Person'*. By empty I mean there are no properties attached to it , its literally empty like `Person={}` .

We can add new properties to this object

`Person.firstName=”John”;`

and we can access these properties like we normally do

`console.log(Person.firstName) //prints John on console`

lets see the typeof Person created with ***new keyword***

`console.log(typeof(Person));` 

Yes, you guessed it right!! it prints **object** as its type on console. So the most basic thing that ***new keyword*** performs is *create an empty object*.

You must be wondering that what in the line `const person = new Object();` what the Object() keyword is? and why it's used in combination to the `new` keyword ? , well don’t worry lets explore this 

## Object Method, Object()

Object() also known as Object Constructor or Object Method is default constructor method provided by javascript to create objects. Javascript provide us ability to create our own object constructors and create new objects from its type.  Don't believe me ? let's give it a try.

```
function Person(name,age,profession){
this.firstName=name;
this.age=age;
this.profession=profession
}

const john = new Person(“john”,23,”Teacher”);
console.log(john.firstName) //prints John
```

What we did is  instead of using a default constructor provided by JS to us we created our own constructor method "Person" and then created an object of Person type out of it.

We can also create our Object like this

 `const john = new Person();`

Creating an object with empty constructor would initialise its default properties with *undefined* and not *null* 

I know the *this* keyword is bothering you but don't worry i will explain it next and keep it short. 

## 'new' and the 'this' Keyword

***this keyword*** is treated differently depending on the execution context but for now lets only discuss the relation between *this* and the *new* keywords

> "new keyword binds this to object itself"

If we consider our "Person" example , new keyword makes **this** point to the object itself . So it means that the value of **this** is the object that is being created. 

```
function person(name,age,profession){
this.name=name;
this.age=age;
this.profession=profession
}
```

So for only understanding in back of our mind, behind the scenes we can replace *this* with "Person" object where ever we encounter *this*.

```
function Person(name,age,profession){
john.name=name;
john.age=age;
john.profession=profession;
}
``` 

Which makes sense how properties are assigned to our newly created object dynamically, right ? So 

> The value of this, when used in an object, is the object itself.

We can justify this statement with following example

```
function foo(name){

this.name=name;

printName(){

console.log(this.name)

      }

}

 const myobj = new foo("John");

 myobj.printName(); // Prints John

```

We didn't supplied any value to our *printName* function but still it prints "John" on the screen due to the fact that **this** points to our *myobj* object and value of `this.name` is therefore the value of `myobj.name` i.e "John"

Lets break everything we learned so far in to steps and understand how things work when you create an object with constructor method and ***new keyword***

 `const john = new Person("John",23,""Teacher);`

step 1: 

An empty object is created from the *Person* constructor named "John".

step2:

**this** points to the newly created object `john` and initialise properties of the `john` object.

Thats all for this topic. If you like this don't forget to share this and follow me . For any questions you can comment on the post or reach me out and i will be happy to assist you 😀.