The new Keyword in JavaScript

JavaScript is a flexible language where objects can be created in multiple ways. One powerful and commonly used approach involves the new keyword. In this blog, we’ll break down how it works, step by step.

What the new keyword does

The new keyword is used to create an instance of an object from a constructor function.

When you use new, JavaScript automatically performs several steps behind the scenes:

• Creates a new empty object
• Sets up prototype linking
• Binds this to the new object
• Returns the object

Constructor functions

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

By convention:

• Constructor names start with a capital letter
• They define properties and methods using this

Example:

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

Object creation process

Object Creation in JavaScript (Simple Explanation)

In JavaScript, object creation means making a new object (a collection of properties and methods). One of the most important ways to create objects is using the new keyword with constructor functions.

1. Basic Idea

An object is like a real-world thing.

Example:

const person = {
  name: "Sakshi",
  age: 21
};

This is a simple object. But what if we want to create many persons?
Instead of repeating code, we use a constructor function.

2. Object Creation Using Constructor + new

Step 1: Create a Constructor Function

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

Step 2: Create Object Using new

const p1 = new Person("Sakshi", 21);
const p2 = new Person("Rahul", 25);

Now p1 and p2 are objects.

3. What Happens Internally

When you write:

const p1 = new Person("Sakshi", 21);

JavaScript does 4 steps automatically:

Step 1: Create Empty Object

p1 = {};

Step 2: Link Prototype

p1.__proto__ = Person.prototype;

This means the object can access shared methods.

Step 3: Bind this

this → p1

Inside Person, this refers to the new object.

Step 4: Add Properties

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

Step 5: Return Object

return p1;

4. Add Methods Using Prototype

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

p1.greet(); // Hello Sakshi

How new links prototypes

Every constructor function has a .prototype property.

When you use new, the created object gets access to it:

Person.prototype.greet = function() {
  console.log("Hello!");
};

const user1 = new Person("Sakshi", 21);
user1.greet(); // Hello!

user1 → Person.prototype → Object.prototype

Instances created from constructors

When you use a constructor function with the new keyword, the object you get is called an instance.

1. What is an Instance?

An instance is simply:

A real object created from a constructor (blueprint)

Constructor = blueprint (design)
Instance = actual object (built using the design)

1. Example

Step 1: Constructor Function

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

Step 2: Create Instances

const car1 = new Car("Toyota", "Innova");
const car2 = new Car("Honda", "City");

1. What Happens Here?

• car1 and car2 are instances of Car
• Each instance has its own data

console.log(car1.brand); // Toyota
console.log(car2.brand); // Honda

1. How to Check Instance

console.log(car1 instanceof Car); // true
console.log(car2 instanceof Car); // true

plaintext

1. Shared Behavior Using Prototype

Car.prototype.drive = function() {
  console.log(this.brand + " is driving");
};

car1.drive(); // Toyota is driving
car2.drive(); // Honda is driving

plaintext

• drive() is not copied into each instance
• It is shared via prototype

1. Memory Understanding

• Each instance stores its own properties
• Methods are stored once in prototype

car1 → properties (brand, model)
      ↓
Car.prototype → drive()

markdown

Relationship Between Constructor and Object

Concept	Meaning
Constructor	Blueprint for creating objects
Instance	Actual object created
Prototype	Shared properties/methods

Constructor → instance creation flow

Person Constructor
        ↓
     new keyword
        ↓
  Create Object {}
        ↓
 Link Prototype
        ↓
 Bind this
        ↓
 Return Instance

plaintext

Prototype linking visual

user1
  ↓
Person.prototype
  ↓
Object.prototype
  ↓
null