Skip to main content

Command Palette

Search for a command to run...

Understanding the new Keyword and Constructor Functions in JavaScript

Updated
•5 min read•View as Markdown

As you start creating multiple objects in JavaScript, you may notice that writing the same structure again and again becomes repetitive. This is where constructor functions and the new keyword help us create objects efficiently.

They allow us to define a template and generate multiple objects from it, similar to how a blueprint creates real-world items.

In this article, we will explore:

  • What the new keyword does

  • What constructor functions are

  • The object creation process step by step

  • How new links prototypes

  • Instances created from constructors

All explanations are simple and beginner-friendly.


Why Do We Need Constructor Functions?

Imagine creating multiple users like this:

let user1 = { name: "Shivam", age: 21 };
let user2 = { name: "Rahul", age: 25 };
let user3 = { name: "Aman", age: 20 };

This works, but:

  • code is repetitive

  • difficult to scale

  • harder to maintain

Instead, we can define a constructor function and reuse it.


What is a Constructor Function?

A constructor function is a special function used to create objects.

By convention:

  • its name starts with a capital letter

  • it is used with the new keyword

Example:

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

This function acts as a blueprint for creating objects.


What Does the new Keyword Do?

When you use new, JavaScript performs several steps automatically.

Example:

let person1 = new Person("Shivam", 21);

Object Creation Process (Step-by-Step)

When new Person() is called, JavaScript does the following:

Step 1: Creates a new empty object

{}

Step 2: Sets this to the new object

Inside the constructor:

this → {}

Step 3: Assigns properties

this.name = "Shivam";
this.age = 21;

Now the object becomes:

{ name: "Shivam", age: 21 }

The new object is connected to:

Person.prototype

Step 5: Returns the object

Finally, the new object is returned and stored in person1.


Constructor → Instance Flow

Person (Constructor)
        |
        | new
        v
   New Object Created
        |
        v
person1 (Instance)

Creating Multiple Instances

Once the constructor is defined, we can create multiple objects easily.

let person1 = new Person("Shivam", 21);
let person2 = new Person("Rahul", 25);

console.log(person1);
console.log(person2);

Output:

Person { name: "Shivam", age: 21 }
Person { name: "Rahul", age: 25 }

Each object is called an instance of the constructor.


Adding Methods Using Prototype

Instead of adding methods inside the constructor (which duplicates them), we attach them to the prototype.

Person.prototype.greet = function() {
  console.log("Hello, my name is " + this.name);
};

Now every instance can use this method:

person1.greet();
person2.greet();

Output:

Hello, my name is Shivam
Hello, my name is Rahul

When an object is created using new, it is automatically linked to the constructor’s prototype.

Visual:

person1
   |
   v
Person.prototype
   |
   v
Object.prototype

This allows all instances to share common methods.


Why This is Important

Without prototype sharing:

  • each object would have its own copy of methods

  • memory usage increases

  • code becomes inefficient

With prototypes:

  • methods are shared

  • memory is saved

  • code is cleaner


Example: Car Constructor

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

Car.prototype.showDetails = function() {
  console.log(this.brand + " runs at " + this.speed + " km/h");
};

Create objects:

let car1 = new Car("Toyota", 180);
let car2 = new Car("Honda", 200);

car1.showDetails();
car2.showDetails();

Output:

Toyota runs at 180 km/h
Honda runs at 200 km/h

Assignment (Practice Exercise)

Try this in your console.

1) Create a Constructor Function

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

2) Create Multiple Instances

let s1 = new Student("Aman", 20);
let s2 = new Student("Riya", 22);

3) Add a Method Using Prototype

Student.prototype.printDetails = function() {
  console.log(this.name + " is " + this.age + " years old");
};

4) Call the Method

s1.printDetails();
s2.printDetails();

Prototype Linking Visualization

s1 ---------\
             \
              → Student.prototype → Object.prototype
             /
s2 ---------/

All instances share the same prototype.


Final Thoughts

The new keyword and constructor functions provide a structured way to create multiple objects using a single template. They help reduce repetition and make your code more organized.

By understanding:

  • how constructor functions work

  • what the new keyword does internally

  • how objects are created step by step

  • how prototypes link instances

you build a strong foundation for understanding object creation and inheritance in JavaScript.

As you practice, try creating constructors for real-world entities like Users, Products, or Orders. This will help you see how powerful and reusable this pattern can be.