# The new Keyword in JavaScript

When I first saw this in JavaScript:

```javascript
const user = new User();
```

…I used to just accept it and move on. Like okay cool, `new` creates something. But then a question hit me: *What is actually happening behind the scenes?*

Because JavaScript is not magic. If `new` creates an object… then HOW?  
Where does the object come from?  
How does it get properties?  
Why does it suddenly have methods?  
And honestly, once I understood what `new` actually does internally… constructor functions and prototypes started making way more sense.

* * *

## First, Why Do We Even Need `new`?

Imagine you want to create multiple users. Without any structure, you would keep doing this:

```javascript
const user1 = {
  name: "Nausheen",
  age: 22,
};

const user2 = {
  name: "Aman",
  age: 21,
};
```

This works. But if you need 100 users?  
repeating the same structure again and again becomes painful.

So JavaScript gives us **constructor functions**.

* * *

## Constructor Functions

A constructor function is basically a blueprint for creating objects.

Example:

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

Now instead of manually creating objects every time… you can do this:

```javascript
const user1 = new User("Nausheen", 22);
const user2 = new User("Aman", 21);
```

Boom.  
Two separate objects created from one constructor.

* * *

## But Wait… What Is `this` Here?

Inside constructor functions:

```javascript
this.name = name;
```

`this` refers to the object being created.  
But here’s the important part: That object does NOT exist automatically. `new` is what creates it.  
And this is where the real understanding begins.

* * *

## What the `new` Keyword Actually Does

When you write:

```javascript
const user = new User("Nausheen", 22);
```

JavaScript secretly performs multiple steps behind the scenes. And honestly… this was one of the coolest things I learned.

* * *

### Step 1: Create an Empty Object

JavaScript first creates a brand new empty object.

Something like:

```javascript
const obj = {};
```

At this moment:

```javascript
obj → {}
```

### Step 2: Link the Prototype

This is the hidden powerful part. JavaScript links the object to the constructor’s prototype.

Something like:

```javascript
obj.__proto__ = User.prototype;
```

This means: the object can now access methods from `User.prototype`  
We’ll see this soon.

### Step 3: Call the Constructor Function

Now JavaScript runs:

```javascript
User.call(obj, "Nausheen", 22);
```

This means: inside the constructor, `this = obj`

So:

```javascript
this.name = name;
```

becomes:

```javascript
obj.name = "Nausheen";
```

And now the object starts getting properties.

### Step 4: Return the Object

Finally: JavaScript returns that newly created object.

So:

```javascript
const user = new User("Nausheen", 22);
```

becomes something like:

```javascript
{
  name: "Nausheen",
  age: 22
}
```

* * *

### Visual Flow

```javascript
new User()
   ↓
1. Create empty object {}
   ↓
2. Link prototype
   ↓
3. Run constructor function
   ↓
4. Return final object
```

* * *

## Adding Methods Using Prototype

Now let’s make this more interesting.

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

Now add a method:

```javascript
User.prototype.sayHello = function () {
  console.log(`Hello, I am ${this.name}`);
};
```

Now:

```javascript
const user1 = new User("Nausheen", 22);

user1.sayHello();
```

Output:

```javascript
Hello, I am Nausheen
```

* * *

## But Why Does This Work?

Because of prototype linking. Remember this step?

```javascript
obj.__proto__ = User.prototype
```

That means: When JavaScript cannot find `sayHello()` inside `user1`… it looks inside `User.prototype`

And finds it there.

* * *

## This Is Extremely Important

Without prototypes… every object would copy methods separately. Which wastes memory.

Instead: all instances share the same methods through the prototype.

That’s smart design.

* * *

## What Are Instances?

This word confused me initially. But it’s simple.

```javascript
const user1 = new User();
```

`user1` is an instance of `User`

Meaning: it was created from that constructor blueprint.

Same here:

```javascript
const user2 = new User();
```

Another instance.

* * *

## Real-Life Mental Model

Think of a constructor like a cookie cutter.

```javascript
Constructor → Blueprint

new → Creates object using blueprint

Object → Final cookie
```

Every cookie follows the same shape… but each one can contain different data.

* * *

## Before vs Constructor Approach

Without constructor:

```javascript
const user1 = {
  name: "Nausheen"
};

const user2 = {
  name: "Aman"
};
```

With constructor:

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

const user1 = new User("Nausheen");
const user2 = new User("Aman");
```

Cleaner. Reusable. Scalable.

* * *

## Small But Important Insight

The `new` keyword does NOT just “call a function” it creates an entire object creation process behind the scenes.

That’s why constructor functions behave differently from normal functions.

* * *

## What Happens If You Forget `new`?

This is dangerous.

```javascript
const user = User("Nausheen", 22);
```

Without `new`:

> no new object gets created  
> `this` behaves differently  
> things break unexpectedly

This is why classes became popular later because they make object creation cleaner.

But under the hood… classes still use prototypes.

* * *

## Why Understanding `new` Actually Matters

At first, it feels like: “Okay cool, object creation.”

But deeper understanding helps you understand:

*   prototypes
    
*   classes
    
*   inheritance
    
*   how JavaScript objects really work
    

And honestly…  
this is one of those concepts that separates:

> “I use JavaScript”

from

> “I understand JavaScript”

* * *

## Assignment Practice

Try this yourself:

1\. Create a constructor called `Car`  
2\. Add properties like brand and speed  
3\. Create two instances using `new`  
4\. Add a method using prototype  
5\. Call the method from both objects

Then inspect the objects carefully. That’s where the real learning happens.

* * *

## Final Understanding

At first, `new` looked like just another keyword to me. But after exploring it deeply…

I realized: it’s actually automating object creation, prototype linking, and initialization all together.

And suddenly…

JavaScript objects stopped feeling magical.

They started making sense.