DEV Community

Cover image for What is the `new` keyword in JavaScript?
Akande Olalekan Toheeb
Akande Olalekan Toheeb

Posted on

What is the `new` keyword in JavaScript?

The new keyword in JavaScript is used to create new object instances from either:

  1. A constructor function: A constructor function is used to create and initialize an object created with the new keyword.

  2. A JavaScript class: A class is a template for creating objects in JavaScript.

The new keyword does the following to create an object:

  1. Creates a new object instance.
  2. Binds the new object's prototype to the parent's prototype property, i.e., a constructor function or a class.
  3. Executes the function or the class with the given arguments, then binds the this keyword to the newly created object.
  4. Returns the new object.

Object creation using the new keyword

The new keyword creates new objects from a constructor function or a javascript class. Here's a quick run-through of how it's done.

The Constructor function

Follow the steps below to create a new object using the new keyword and a constructor function:

  1. Define a constructor function.
  2. Use the new keyword to create an instance from the constructor function.

When a constructor function is invoked with the new keyword, a new object is created with its properties and methods.

Example

Here's an example of using the new keyword with a constructor function:

function Writer(fname, lname){
  //Properties
  this.firstName = fname;
  this.lastName = lname;

  //Method(S)
  this.sayName = () => {
    let fullName = `${this.firstName} ${this.lastName}`;

    console.log(fullName);
  }
}

let jsWriter = new Writer('Akande', 'Olalekan Toheeb');

console.log(jsWriter);
jsWriter.sayName();

Enter fullscreen mode Exit fullscreen mode

Explanation

  • Line 1: A constructor with two parameters, fname and lname, is created.

  • Lines 3 and 4: fname and lname are assigned to this.firstName and this.lastName, respectively.

  • Line 7: A method that does something is created.

  • Line 14: The new keyword creates a new object instance, jsWriter.

When the new keyword is used with Writer, it creates a new object with its own set of fname and lname properties. The jsWriter object is assigned to the result of calling the Writer constructor function with the new keyword and passing in the arguments Akande and Olalekan Toheeb.

Note: sayName is also available to jsWriter. Remember, jsWriter is a copy of Writer.

  • Line 16: The new object is logged into the console.

  • Line 17: Test if sayName exist in jsWriter by calling it.

The Constructor function

Creating a new object using the new keyword and a Constructor function is similar to creating it with the new keyword and a JavaScript class. Below is an example.

Example


class Writer{
  constructor(fname, lname){
    //Properties
    this.firstName = fname,
    this.lastName = lname
  }

  //Method(s)
  sayName = () => {
    let fullName = `${this.firstName} ${this.lastName}`;

    console.log(fullName);
  }
}

let jsWriter = new Writer('Akande', 'Olalekan Toheeb');

console.log(jsWriter);
jsWriter.sayName();

Enter fullscreen mode Exit fullscreen mode

Explanation

  • Line 1: A javascript class was created with two parameters, fname and lname.

  • Lines 4 and 5: fname and lname are bound to this.firstName and this.lastName, respectively.

  • Line 9: A method that does something is created.

  • Line 16: The new keyword creates a new object instance, jsWriter.

Top comments (0)