# The new Keyword in JavaScript: 

You've probably written something like this without thinking twice:

javascript

```javascript
const today = new Date();
const pattern = new RegExp("hello");
```

That `new` sitting there what is it actually doing?

Most tutorials hand-wave it as it creates an object. And technically that's true. But there's a four-step process happening every time you type `new`, and once you see it laid out clearly, a lot of things in JavaScript prototypes, instances, `this`, class syntax suddenly snap into place.

Let's build this understanding from the ground up.

```javascript
const today = new Date();
const pattern = new RegExp("hello");
```

That `new` sitting there — what is it actually doing? Most tutorials hand-wave it as "it creates an object." And technically that's true. But there's a four-step process happening every time you type `new`, and once you see it laid out clearly, a lot of things in JavaScript — prototypes, instances, `this`, class syntax — suddenly snap into place.

Let's build this understanding from the ground up.

## The problem `new` is solving

Before `new` makes sense, the problem it solves needs to make sense.

Say you're building a simple app and you need to represent multiple users. The naive approach is just making plain objects:

```javascript
const user1 = { name: "Ankit", age: 22, role: "admin" };
const user2 = { name: "Priya", age: 28, role: "editor" };
const user3 = { name: "Rohan", age: 19, role: "viewer" };
```

This works. For three users. But what happens when you have 300? You're copying the same shape by hand every time, with no guarantee the structure stays consistent. Miss a property on user 147 and you've got a bug that's annoying to track down.

What you really want is a template something you call once and get back a properly-shaped object every time. That's exactly what a constructor function is.

## Constructor functions: a template for objects

A constructor function is just a regular function that you intend to call with `new`. By convention, its name starts with a capital letter not a rule JavaScript enforces, but a strong signal to anyone reading your code.

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

That `this` inside the function is the key. When you call it with `new`, `this` refers to the brand new object being created. Every property you attach to `this` ends up on that new object.

Now you can create as many users as you need:

```javascript
const user1 = new User("Ankit", 22, "admin");
const user2 = new User("Priya", 28, "editor");
const user3 = new User("Rohan", 19, "viewer");

console.log(user1.name); // "Ankit"
console.log(user2.role); // "editor"
```

Each call to `new User(...)` produces a fresh, independent object. Change [`user1.name`](http://user1.name) and [`user2.name`](http://user2.name) doesn't budge. They share a shape but not their data.

## The four things `new` does

This is the part most explanations skip. When you write `new User("Ankit", 22, "admin")`, JavaScript silently does four things in sequence. Understanding these four steps is the unlock for everything else.

### **Step 1**

**A blank object is created.** JavaScript creates a fresh `{}`. Nothing on it yet. This is the object that will eventually be returned.

### **Step 2**

**The prototype is linked.** That blank object gets its internal `[[Prototype]]` set to `User.prototype`. This is how the object inherits methods. More on this in a moment.

### **Step 3**

**The constructor runs with** `this` **pointing to the new object.** `User` is called, and inside it, every `this.something = ...` line adds properties to that blank object. This is where your data lands.

**Step 4**

**The new object is returned.** If your constructor function doesn't explicitly return an object, JavaScript returns `this` automatically the fully populated object from step 3.

Here's how all four steps look if you imagine JavaScript doing it manually:

![](https://cdn.hashnode.com/uploads/covers/6950d1ca85602739c40abd67/46d1dde7-3453-476e-be32-4c7baad74949.png align="center")

## Prototype linking

Step 2 is the one that confuses people most, so let's give it the attention it deserves.

Every function in JavaScript automatically gets a `prototype` property it's an object that sits attached to the function. When you create an instance with `new`, that instance gets a hidden link back to the constructor's `prototype`. This link is what JavaScript follows when it can't find a property directly on the object.

Here's why this matters in practice. Instead of defining `greet` directly on every instance (which would create a new copy of the function for each object), you put it on the prototype once:

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

User.prototype.greet = function() {
  console.log("Hi, I'm " + this.name);
};

const user1 = new User("Ankit", 22);
const user2 = new User("Priya", 28);

user1.greet(); // "Hi, I'm Ankit"
user2.greet(); // "Hi, I'm Priya"
```

`user1` and `user2` don't have `greet` on them directly. But when JavaScript looks for `greet` on `user1`, it follows the hidden prototype link up to `User.prototype` and finds it there. One function, shared by every instance.

Here's the relationship laid out visually:

![](https://cdn.hashnode.com/uploads/covers/6950d1ca85602739c40abd67/0c756431-c729-4474-8ad0-36d3d3c4add8.png align="center")

The instances own their own data. The shared behavior lives on the prototype above them. That's the whole model.

## Instances

Every object created with `new SomeFunction()` is called an *instance* of that constructor. JavaScript gives you a way to verify this:

```javascript
console.log(user1 instanceof User); // true
console.log(user2 instanceof User); // true
```

`instanceof` checks whether `User.prototype` is anywhere in the object's prototype chain. Since we linked it in step 2, the answer is always `true` for objects created with `new User`.

You can also check which constructor built an object:

```javascript
console.log(user1.constructor === User); // true
```

This is useful when you're debugging and want to confirm an object came from the constructor you think it did.

## What happens if you forget `new`

This is a classic beginner mistake and it fails in a confusing way:

```javascript
const user = User("Ankit", 22, "admin"); // no new!

console.log(user);       // undefined
console.log(window.name); // "Ankit" — oops
```

Without `new`, the function runs as a regular function. There's no blank object created, nothing gets returned. Worse, `this` inside the function points to the global object so [`this.name`](http://this.name) `= "Ankit"` pollutes the global scope. This is exactly the kind of bug that takes twenty minutes to find.

The capital-letter naming convention exists precisely to signal: call this with `new`, not without it.

## Classes

If you've used ES6 classes, here's something worth knowing: they are not a new object system. They're syntactic sugar over exactly what we just covered.

```javascript
class User {
  constructor(name, age, role) {
    this.name = name;
    this.age = age;
    this.role = role;
  }

  greet() {
    console.log("Hi, I'm " + this.name);
  }
}

const user1 = new User("Ankit", 22, "admin");
```

Under the hood, this is identical to the constructor function + prototype version we wrote earlier. The `constructor` method is the function body. The `greet` method goes on `User.prototype` automatically. JavaScript is still running the same four-step process when you call `new User(...)`.

The `class` syntax is cleaner to read and write especially when inheritance gets involved but it's not doing anything fundamentally different. Once you understand what `new` actually does, class syntax stops being magic and starts being shorthand.\\