Skip to main content

Command Palette

Search for a command to run...

The new Keyword in JavaScript

Updated
6 min read
The new Keyword in JavaScript

1) What the new Keyword Does

In JavaScript, the new keyword is used to create an object from a constructor function. It helps set up the object automatically and links it to the constructor.

When new is used, JavaScript performs a few important steps behind the scenes.

Steps Performed by new

  1. A new empty object is created

  2. The object is linked to the constructor’s prototype

  3. The constructor function is called with this referring to the new object

  4. The new object is returned automatically

Object Creation Step by Step

When new is used with a constructor function, JavaScript performs these steps:

  1. Creates a new empty object

  2. Sets this to point to that new object

  3. Links the object to the constructor’s prototype

  4. Executes the constructor function

  5. Returns the newly created object

Simple Constructor Example

function Car(brand, model) {
    this.brand = brand;
    this.model = model;
}

let car1 = new Car("Toyota", "Camry");
let car2 = new Car("Honda", "Civic");

console.log(car1);
console.log(car2);

Output

{ brand: "Toyota", model: "Camry" }
{ brand: "Honda", model: "Civic" }

Explanation

  • Car is the constructor function

  • new Car() creates a new object each time

  • this.brand and this.model assign values to that object

  • car1 and car2 are separate objects with the same structure

Relation Between Constructor and Object

  • The constructor function is like a blueprint

  • The new keyword uses that blueprint to create objects

  • Each object is an instance of the constructor

Visualization:

Constructor (Car)
        ↓
   new keyword
        ↓
Creates Objects
   ↓          ↓
car1        car2

2) Constructor Functions

A constructor function in JavaScript is a special function used to create multiple objects with the same structure. It acts like a blueprint for creating objects.

Instead of writing the same object again and again, we use a constructor to create many similar objects easily.

Key Points

  • Constructor functions start with a capital letter (by convention)

  • They are used with the new keyword

  • this refers to the new object being created

  • They help reduce code repetition

Simple Example

function Person(name, age) {
    this.name = name;
    this.age = age;
}

let user1 = new Person("John", 25);
let user2 = new Person("Alice", 30);

console.log(user1);
console.log(user2);

Output

{ name: "John", age: 25 }
{ name: "Alice", age: 30 }

Explanation

  • Person is the constructor function

  • new Person() creates a new object

  • this.name and this.age assign values to each object

  • user1 and user2 are different objects created from the same constructor

Relation Between Constructor and Object

  • The constructor is like a blueprint

  • Objects are instances created from it

  • Each object has its own data but the same structure


3) Object Creation Process

In JavaScript, objects can be created using constructor functions along with the new keyword. The process happens automatically in a few steps behind the scenes.

Step-by-Step Process

When we create an object using new, JavaScript follows these steps:

  1. A new empty object is created

  2. this is set to refer to that new object

  3. The constructor function runs and adds properties to the object

  4. The object is linked to the constructor’s prototype

  5. The fully created object is returned

Simple Example

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

let student1 = new Student("Rahul", "A");

console.log(student1);

Output

{ name: "Rahul", grade: "A" }

Explanation

  • new Student("Rahul", "A") starts the object creation process

  • A new object is created automatically

  • this.name and this.grade assign values to that object

  • The final object is stored in student1

Visualization

new Student()
     ↓
[ Empty Object ]
     ↓
Add Properties (name, grade)
     ↓
Return Object

When we use the new keyword with a constructor function, JavaScript not only creates a new object but also connects it to the constructor’s prototype. This link allows the object to access shared properties and methods.

What Happens Behind the Scenes

During object creation, one important step is:

  • The new object is internally linked to the constructor’s prototype

This means the object can use properties and methods defined on that prototype.

Simple Example

function Animal(name) {
    this.name = name;
}

// Adding method to prototype
Animal.prototype.speak = function() {
    console.log(this.name + " makes a sound");
};

let dog = new Animal("Dog");

dog.speak();

Output

Dog makes a sound

Explanation

  • Animal is the constructor function

  • Animal.prototype contains shared methods

  • new Animal("Dog") creates a new object

  • The object is linked to Animal.prototype

  • So dog can access the speak() method

Internal Link (Concept)

dog → [[Prototype]] → Animal.prototype
  • The [[Prototype]] (hidden link) connects the object to the prototype

  • This is how JavaScript supports inheritance

Why This Is Useful

  • Methods are shared instead of copied

  • Saves memory

  • Allows all objects to use common behavior


5) Instances Created from Constructors

In JavaScript, when a constructor function is used with the new keyword, it creates an instance. An instance is a specific object created from a constructor function. Each instance has its own data but shares the same structure defined by the constructor.

Key Points

  • An instance is an object created from a constructor function

  • Each instance is independent (has its own values)

  • All instances share the same blueprint (constructor)

  • Methods defined on the prototype are shared among instances

Simple Example

function Car(brand, model) {
    this.brand = brand;
    this.model = model;
}

let car1 = new Car("Toyota", "Camry");
let car2 = new Car("Honda", "Civic");

console.log(car1);
console.log(car2);

Output

{ brand: "Toyota", model: "Camry" }
{ brand: "Honda", model: "Civic" }

Explanation

  • Car is the constructor function

  • car1 and car2 are instances of Car

  • Both instances have the same structure

  • But their values are different

Relationship Between Constructor and Instance

Constructor (Car)
        ↓
   creates instances
   ↓              ↓
car1            car2
  • Constructor is the blueprint

  • Instances are objects created from it

Example with Prototype Method

function Person(name) {
    this.name = name;
}

Person.prototype.sayHello = function() {
    console.log("Hello " + this.name);
};

let p1 = new Person("Amit");
let p2 = new Person("Sara");

p1.sayHello();
p2.sayHello();

Output

Hello Amit
Hello Sara

Explanation

  • p1 and p2 are instances

  • They share the sayHello method from prototype

  • Each instance has its own name value


Summary

Constructor functions in JavaScript are used to create multiple objects with the same structure using the new keyword. When an object is created, it is called an instance of the constructor. Each instance has its own unique data, but all instances share the same blueprint defined by the constructor. The new keyword also links each instance to the constructor’s prototype, allowing shared methods to be used efficiently. This makes object creation organized, reusable, and memory-efficient in JavaScript.