The new Keyword in JavaScript

When beginners first see new keyword in JavaScript it looks little confusing.

Because normally we create objects directly like this.

const user = {
    name: "Ansh"
}

Then suddenly JavaScript introduces something like this.

const user = new User()

Now question comes.

What actually new is doing behind the scenes?

So let's understand it step by step in simple way.

---

What is the new Keyword?

The new keyword is used to create object from constructor function.

Simple meaning.

new automatically creates fresh object using blueprint.

Think constructor function like machine design and new creates actual product from that design.

---

Constructor Functions

Before classes were introduced JavaScript developers mostly use constructor functions for creating multiple similar objects.

Example.

function User(name, age) {
    this.name = name
    this.age = age
}

This function is called constructor function.

By convention constructor function first letter is capital.

Now creating objects.

const user1 = new User("Ansh", 20)

console.log(user1)

Output

{
   name: "Ansh",
   age: 20
}

Here new created object from constructor function.

---

What Happens Behind the Scenes?

When we use new keyword JavaScript performs some hidden steps automatically.

Example.

const user1 = new User("Ansh", 20)

Behind the scenes JavaScript does mainly four things.

---

Step 1: Creates Empty Object

JavaScript first creates empty object automatically.

Something like this happens internally.

const obj = {}

---

Step 2: Links Prototype

Then JavaScript connects object with constructor prototype.

This is why created object can access methods from prototype later.

---

Step 3: Binds this Keyword

After that this keyword inside constructor points to newly created object.

this.name = name

Means.

obj.name = name

---

Step 4: Returns Object

Finally JavaScript automatically returns created object.

So this line.

const user1 = new User("Ansh", 20)

Eventually gives object back.

---

Creating Multiple Instances

One big advantage of constructor function is creating multiple similar objects easily.

Example.

function Student(name) {
    this.name = name
}

const s1 = new Student("Rahul")
const s2 = new Student("Aman")

console.log(s1)
console.log(s2)

Output

{ name: "Rahul" }

{ name: "Aman" }

These objects are called instances of constructor.

Simple meaning.

Constructor = Blueprint Instances = Real Objects created from blueprint

---

How new Links Prototypes

JavaScript objects can inherit properties and methods using prototypes.

Example.

function User(name) {
    this.name = name
}

User.prototype.sayHello = function() {
    console.log("Hello")
}

const user1 = new User("Ansh")

user1.sayHello()

Output

Hello

Now interesting thing.

sayHello() method does not exist directly inside user1.

It comes through prototype connection created by new keyword.

This helps memory optimization because methods are shared instead of duplicated in every object.

---

Constructor and Object Relation

Constructor function acts like factory.

Every time we use new it creates separate object instance.

Without new keyword constructor function behaves like normal function.

Example.

function Car(name) {
    this.name = name
}

const c1 = Car("BMW")

This can create unexpected behavior because object creation does not happen properly.

That is why constructor functions are mostly called using new.

---

Modern JavaScript and Classes

Today JavaScript also has class syntax which internally still uses prototype system and new keyword.

Example.

class User {
    constructor(name) {
        this.name = name
    }
}

const user1 = new User("Ansh")

So even modern classes still depend on new behind the scenes.

---

Final Thoughts

The new keyword is used to create object instances from constructor functions.

Behind the scenes it creates empty object, links prototype, binds this and returns object automatically.

At first it may look little magical but once you understand the internal steps it becomes much easier.

Understanding new keyword is very important because it helps understand prototypes, classes and object creation deeply in JavaScript.