The `new` Keyword in JavaScript

Introduction

JavaScript mein new keyword pehli baar dekhne par kaafi simple lagta hai.

const user = new User("Prashant");

Lekin actual mein is ek line ke peeche kaafi important kaam ho raha hota hai.

Yahi wajah hai ki new keyword ko sirf syntax ki tarah nahi, process ki tarah samajhna useful hota hai.

Simple words mein:

new ek naya object banata hai, constructor function ko chalata hai, aur object ko prototype se link karta hai

Where We Usually See new

new keyword mostly tab dikhta hai jab hum:

• constructor functions use karte hain

• classes se objects banate hain

• built-in objects jaise Date, Map, ya Set create karte hain

Beginner level par sabse clear starting point constructor functions hote hain.

Isi liye is article mein hum new ko constructor function ke saath samjhenge.

Constructor Function Refresher

Constructor function ek normal function hoti hai, but use object create karne ke purpose se likha jaata hai.

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

Ab agar hum likhen:

const user1 = new User("Prashant", 22);

toh User sirf function call nahi ho raha.

Yahan new ek proper object creation flow chala raha hai.

What the new Keyword Actually Does

Jab hum likhte hain:

const user1 = new User("Prashant", 22);

toh JavaScript roughly ye steps follow karta hai:

1. ek naya empty object create hota hai

2. us object ko constructor ke prototype se link kiya jaata hai

3. constructor ke andar this us naye object ko point karta hai

4. constructor function run hota hai

5. agar constructor khud koi object return na kare, toh wahi naya object return hota hai

Yehi new ka real magic hai.

Step 1: A New Empty Object Is Created

Sabse pehle JavaScript ek empty object banata hai.

Conceptually isse aise soch sakte ho:

const tempObject = {};

Actual engine internals isse thoda different handle karte hain, but beginner mental model ke liye ye enough hai.

Step 2: The Object Gets Linked to the Prototype

Ye step bahut important hai.

Naya object sirf empty object banke nahi reh jaata. Usse constructor function ke prototype ke saath link kiya jaata hai.

For example:

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

User.prototype.sayHi = function() {
  console.log("Hi, I am " + this.name);
};

const user1 = new User("Prashant");

Ab user1.sayHi() kaam karega because user1 ka prototype link User.prototype ke saath hai.

Step 3: this Starts Pointing to the New Object

Jab constructor function run hota hai, us waqt this newly created object ko refer karta hai.

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

Yahan:

• this.name = name

• this.age = age

ka matlab hai ki ye values naye object ke andar store ho rahi hain.

Step 4: The Constructor Function Runs

Ab constructor function normal tarah execute hota hai.

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

Jab new User("Prashant", 22) chalega, toh object ke andar ye properties set ho jaayengi:

• name

• age

• isPaid

Step 5: The Final Object Is Returned

Agar constructor function explicitly koi alag object return nahi karta, toh new wahi naya object return kar deta hai.

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

const user1 = new User("Prashant");
console.log(user1);

Output conceptually aisa hoga:

{ name: "Prashant" }

A Simple Step-by-Step Example

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

User.prototype.introduce = function() {
  console.log("I am " + this.name);
};

const user1 = new User("Prashant", 22);

user1.introduce();

Is example mein:

• user1 ek new instance hai

• properties constructor ke through aayi hain

• introduce() prototype se mil rahi hai

Yani constructor aur prototype dono milkar actual object behavior banate hain.

How new Links Prototypes

Prototype linking ko beginner-friendly way mein aise samjho:

• constructor function ke paas prototype hota hai

• new se bana object us prototype se connect hota hai

• isliye object shared methods access kar pata hai

Ye relation check karne ka clean way:

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

const user1 = new User("Prashant");

console.log(Object.getPrototypeOf(user1) === User.prototype);

Expected output:

true

Ye line prove karti hai ki user1 aur User.prototype ke beech actual prototype link bana hua hai.

Instances Created from Constructors

Jab bhi hum constructor function ke saath new use karte hain, har baar ek naya instance banta hai.

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

const user1 = new User("Prashant");
const user2 = new User("Aman");

Yahan:

• user1 ek instance hai

• user2 ek alag instance hai

• dono same constructor se bane hain

Same blueprint, different objects.

Why Prototype Linking Matters

Agar har object ke andar alag method copy kar diya jaaye, toh unnecessary duplication hoti hai.

Prototype ka idea ye duplication reduce karta hai.

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

User.prototype.sayHi = function() {
  console.log("Hi " + this.name);
};

Ab jitne bhi instances new User() se banenge, sab sayHi() access kar sakte hain without method copy in every object.

Yahi constructor functions aur prototypes ka real benefit hai.

One Important Beginner Note

new ko sirf "object bana do" command ki tarah yaad mat karo.

Better rule ye hai:

new object create karta hai, prototype link set karta hai, aur constructor ko us object ke context mein chalata hai

Agar ye line clear ho gayi, toh constructor functions, prototypes, aur later classes ka behavior kaafi easy lagne lagta hai.

A Small Practice Assignment

Is practice ka goal ye dekhna hai ki constructor, new, aur prototype ek saath kaise kaam karte hain.

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

Car.prototype.showDetails = function() {
  console.log(this.brand + " - " + this.year);
};

const car1 = new Car("Toyota", 2020);
const car2 = new Car("Honda", 2022);

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

Expected understanding:

• car1 aur car2 do alag instances hain

• brand aur year constructor se aaye

• showDetails() prototype se aaya

• new ne object creation flow handle kiya

Summary

• new keyword constructor function ke saath object create karta hai

• ek naya empty object create hota hai

• object constructor ke prototype se link hota hai

• constructor ke andar this naye object ko point karta hai

• constructor run hone ke baad final object return hota hai

• instances same constructor se ban sakte hain but alag objects hote hain

Final Thought

new keyword beginner stage par chhota lagta hai, but iske andar object creation, this, aur prototype linking teen important ideas ek saath chhupe hote hain.

Ek baar ye flow clear ho gaya, constructor functions aur classes dono kaafi zyada meaningful lagne lagte hain.

Continue Reading

• Previous: Understanding the this Keyword in JavaScript

• Next: The Magic of this, call(), apply(), and bind() in JavaScript