What is the “new” Keyword in JavaScript

The new keyword is a specific part of JavaScript that brings a lot of misunderstandings. This snippet is a quick overview of the main things that happen while using the <kbd class="highlighted">new</kbd> keyword.

If JavaScript is not your first programming language, you have probably seen <kbd class="highlighted">this</kbd> keyword whenever initiating a class.

While exploring objects in JavaScript, you have probably noticed that an object is created with the keyword <kbd class="highlighted">new</kbd>.

Let’s take a look at an example:

Javascript create object with new keyword

In general, the <kbd class="highlighted">new</kbd> keyword performs the following tasks:

• It generates an empty object e.g. <kbd class="highlighted"> obj = { };</kbd>
• It sets the invisible “prototype” property of the new object to be the constructor function’s accessible and visible “<kbd class="highlighted">prototype</kbd>”property.
• It binds a property or function, which is declared with this keyword to the new object.
• It returns the newly generated object unless the constructor function returns a non-null object reference. In such a case, that object reference is returned. If the constructor returns a primitive value, it is ignored and the newly created object is returned instead.

In other words, JavaScript executes a function and returns an object as follows:

Javascript create object with new keyword

Although a name is added to <kbd class="highlighted">this</kbd>, the function returns an object.

Please, take into account that constructor function refers to the function after the <kbd class="highlighted">new</kbd> keyword, like here:

javascript constructor function

new ConstructorFunc(arg1, arg2)

When it’s done, if an undefined property of the new object is requested, the script checks the object’s prototype object. So, in this way, you can get something equivalent to the class inheritance in JavaScript.

In JavaScript, every object has its <kbd class="highlighted">[[prototype]]</kbd>. You can only set it at object creation time with <kbd class="highlighted">new</kbd>, <kbd class="highlighted">Object.create</kbd>, or based on the literal. You can read it with <kbd class="highlighted">Object.getPrototypeOf(someObject).</kbd>.

In addition to the hidden <kbd class="highlighted">[[prototype]]</kbd> property, the object also obtains a property known as the prototype, and it is this that you may access and transform, providing inherited methods and properties for the objects that you make.

The example will look like this:

javascript create objects

ObjectMaker = function () {
  this.a = 'first';
}; // ObjectMaker is just a function, there's nothing special about it that makes 
// it a constructor. ObjectMaker.prototype.b = 'second';
 // like all functions, ObjectMaker has an accessible prototype property that 
// we can alter. I just added a property called 'b' to it. Like 
// all objects, ObjectMaker also has an inaccessible [[prototype]] property 
// that we can't do anything with 
obj = new ObjectMaker(); // 3 things just happened. 
// A new, empty object was created called obj. At first obj was the same 
// as {}. The [[prototype]] property of obj was then set to the current
// object value of the ObjectMaker.prototype (if ObjectMaker.prototype is later 
// assigned a new object value, obj's [[prototype]] will not change, but you 
// can alter the properties of ObjectMaker.prototype to add to both the 
// prototype and [[prototype]]). The ObjectMaker function was executed, with 
// obj1 in place of this... so obj.a was set to 'first'. obj.a;
// returns 'first' obj.b; 
// obj doesn't have a property called 'b', so JavaScript checks 
// its [[prototype]]. Its [[prototype]] is the same as ObjectMaker.prototype 
// ObjectMaker.prototype has a property called 'b' with value 'second' 
// returns 'second'

It looks like class inheritance as any objects you generate applying the <kbd class="highlighted">new ObjMaker()</kbd>, appear to have inherited the <kbd class="highlighted">'b'</kbd> property.

For getting a subclass, you can act like this:

Javascript create prototype objects

Although at first look the keyword new can seem confusing, you can grasp its basics by exploring its use cases.

For the effective usage of JavaScript, you need to understand how both the <kbd class="highlighted">new</kbd> and this keywords work.

To sum up, let’s state that the keyword <kbd class="highlighted">new</kbd> is targeted at creating an object from a constructor function. It must be placed before the constructor function call and carry out the following tasks: creates a new object, sets the prototype of <kbd class="highlighted">this</kbd> object to the constructor function’s prototype property, links a property or function, declared with <kbd class="highlighted">this</kbd> keyword to the new object, and, finally, returns a newly created object.