DEV Community

Souvik Guha Roy
Souvik Guha Roy

Posted on

The new Keyword in JavaScript

If you’ve ever seen code like this:

const user = new User("Rahul");
Enter fullscreen mode Exit fullscreen mode

…and wondered what exactly the new keyword does—this blog is for you.

We’ll break it down step by step so you understand how objects are created, how constructors work, and how prototypes are linked.


🧠 What Does the new Keyword Do?

The new keyword is used to:

Create an instance (object) from a constructor function.

It automates several steps behind the scenes that would otherwise be manual.


🏗️ Constructor Functions

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

Example:

```js id="ctor1"
function User(name, age) {
this.name = name;
this.age = age;
}




By convention:

* Constructor names start with a **capital letter**

---

## 🚀 Creating an Instance Using `new`



```js id="ctor2"
const user1 = new User("Rahul", 22);

console.log(user1.name); // Rahul
Enter fullscreen mode Exit fullscreen mode

👉 user1 is an instance of User


⚙️ What Happens Behind the Scenes?

When you use new User("Rahul", 22), JavaScript does the following:


Step 1: Create an Empty Object

```js id="step1"
const obj = {};




---

### Step 2: Link Prototype



```js id="step2"
obj.__proto__ = User.prototype;
Enter fullscreen mode Exit fullscreen mode

Step 3: Bind this

```js id="step3"
User.call(obj, "Rahul", 22);




---

### Step 4: Return the Object



```js id="step4"
return obj;
Enter fullscreen mode Exit fullscreen mode

📊 Visual Flow

new User("Rahul", 22)

   ↓

[ Empty Object {} ]
   ↓
Link to User.prototype
   ↓
Constructor runs (this = object)
   ↓
Return final object
Enter fullscreen mode Exit fullscreen mode

🔗 How new Links Prototypes

Every function in JavaScript has a prototype property.

When you use new, the created object is linked to it.

Example:

```js id="proto1"
function User(name) {
this.name = name;
}

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

const user1 = new User("Rahul");

user1.sayHello(); // works!




👉 Even though `sayHello` is not inside the object, it works because of **prototype linking**

---

## 🧩 Instances Created from Constructors

Each time you use `new`, you get a **new independent object**:



```js id="inst1"
const user1 = new User("Rahul");
const user2 = new User("Amit");

console.log(user1.name); // Rahul
console.log(user2.name); // Amit
Enter fullscreen mode Exit fullscreen mode

✔ Separate data
✔ Shared methods via prototype


🤔 Without Using new (What Goes Wrong?)

```js id="wrong1"
const user = User("Rahul", 22);

console.log(user); // undefined




❌ No object created
❌ `this` may point to global object (or undefined in strict mode)

---

## 🧠 Key Takeaways

* `new` creates a new object
* Links it to the constructor’s prototype
* Binds `this` to that object
* Returns the object automatically

---

## 📊 Constructor vs Instance Relationship



```id="viz2"
User (constructor)
   ↓ creates
user1 (instance)
   ↓ linked to
User.prototype
Enter fullscreen mode Exit fullscreen mode

🛠️ When Should You Use new?

Use it when:

  • Creating multiple similar objects
  • Working with constructor functions
  • Building reusable object blueprints

🚀 Final Thoughts

The new keyword might look small, but it plays a huge role in how JavaScript handles objects.

Understanding it helps you:

  • Master object-oriented concepts
  • Understand prototypes deeply
  • Write cleaner, reusable code

Top comments (0)