Objects are everywhere in JavaScript. The new operator is used to create an object of a type defined by us or of a built-in type.

Creating built-in type

A great example of creating an object of the Array built-in type. There are various ways to create an array in JavaScript. One way is by calling Array() with new operator.

See Example

const arr = new Array(1,2,3,4);
console.log(arr); // [1, 2, 3, 4]

Writing a function that creates Objects for us.

To understand how actually new operator works, we need to understand how to write a function responsible for creating objects of the type defined by us.

So, let us write a function to create students.

function student(name, roll, course){

    const studentObject = { };
    studentObject.name = name;
    studentObject.roll = roll;
    studentObject.course = course;
    return studentObject;
}

const student1 = student("Vinay", 1011, ['Flutter', 'Dart']);
const student2 = student("Kaarthik", 1011, ['JavaScript']);

console.log(student1.name); // "Vinay"
console.log(student2.name); // "Kaarthik"
console.log(student1.course); // ["Flutter", "Dart"]

See how convenient we have made it to create student objects. The function student is called with the required arguments and we get a student object in return.

Notice that the type we have defined is that every object should have a name field, roll and a course array. This is called a user-defined type object.

Now let's see how we can make it easy to create objects using the new operator.

function Student(name, roll, course){
    this.name = name;
    this.roll = roll;
    this.course = course;
}

const student1 = new Student("Vinay", 1011, ['Flutter', 'Dart']);
const student2 = new Student("Kaarthik", 1011, ['JavaScript']);

console.log(student1.name); // "Vinay"
console.log(student2.name); // "Kaarthik"
console.log(student1.course); // ["Flutter", "Dart"]

See how new has abstracted away the overhead of creating and returning objects manually.

What actually new does?

• First of all, calling a function using the new operator is called calling it in constructor mode.

• The new operator creates a new object instance and binds to this. That's the reason why we have used this to set properties.

• It's a convention to name our constructor function with the first letter as upper case.

• Creates __proto__ (also called dunder proto) property to this newly created object. __proto__ points to the prototype object of the function from which the object has been created.

• In our example, student1.__proto__ and student2.__proto__ points to the creator function prototype i.e. Student.prototype. If you don't understand all the prototype things, please don't worry. This is a separate topic to discuss.

• Returns the this object. That's why we get our objects as student1 and student2.

The difference between these two ways of calling a function

• Calling using new automatically insert two lines of code, not adds literally but it simulates such a behaviour.

• See the code below what are those two lines.

function student(name, roll, course){
    // const this = { }
    this.name = name;
    this.roll = roll;
    this.course = course;

    //return this
}

const student1 = new student("Vinay", 1011, ['Flutter', 'Dart']);
const student2 = new student("Kaarthik", 1011, ['JavaScript']);

console.log(student1.name); // "Vinay"
console.log(student2.name); // "Kaarthik"
console.log(student1.course); // ["Flutter", "Dart"]

See I have commented on those two lines in the above snippet. It doesn't add those two lines but behaves as such. That's why we got access to this and get the object in the return

Summary

• new operator makes it easy to create objects.

• new operator creates an object internally and binds to this and also returns the same object.

If you got any questions or doubts, feel free to ping me on Twitter.

twitter.com/faheem_khan_dev

I hope it was a great read for you. If you have any feedback please share it in the comment below. Also, if you find it helpful, please like and hit the follow button on the right top corner.