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 new keyword.

If JavaScript is not your first programming language, you have probably seen this keyword whenever initiating a class.

While exploring objects in JavaScript, you have probably noticed that an object is created with the keyword new.

Let’s take a look at an example:

Javascript create object with new keyword
function MyFunction() { this.val = 100; } let obj = new MyFunction(); console.log(obj.val);

In general, the new keyword performs the following tasks:

  • It generates an empty object e.g. obj = { };
  • It sets the invisible “prototype” property of the new object to be the constructor function’s accessible and visible “prototype”property.
  • It bounds 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.

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

Javascript create object with new keyword
function Dog() { this.name = "Richi" } let myDog = new Dog("Retriever"); // {breed: "Retriever""} console.log(myDog.name); // "Richi"

Although a name is added to this, the function returns an object.

Please, take into account that constructor function refers to the function after the new keyword, like here:

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 [[prototype]]. You can only set it at object creation time with new, Object.create, or based on the literal. You can read it with Object.getPrototypeOf(someObject)..

In addition to the hidden [[prototype]] property, 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:

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 new ObjMaker(), appear to have inherited the 'b' property.

For getting a subclass, you can act like this:

Javascript create prototype objects
function MyFunc() { this.name = "W3Docs"; } MyFunc.prototype.book = "Javascript"; let obj1 = new MyFunc(); console.log(obj1.name); console.log(obj1.book);

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 new and this keywords work.

To sum up, let’s state that the keyword new 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 this object to the constructor function’s prototype property, links a property or function, declared with this keyword to the new object, and, finally, returns a newly created object.