The 'new' keyword in JS

Muhammad Usman — Sun, 11 Apr 2021 10:38:17 +0000

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 😀.

DEV Community: Muhammad Usman

The 'new' keyword in JS

Object Method, Object()

'new' and the 'this' Keyword