The new Keyword in JavaScript

What does the new Keyword do

In JavaScript, the new keyword is a special command. It tells JavaScript to create a brand new object using a specific function as a template.

Think of it like using a blueprint to build a house. The blueprint itself is not a house you can live in. It is just the instructions. The new keyword acts as the construction crew that takes those instructions and builds a real, physical house for you.

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

const user1 = new User("Purakhnath");

What actually happens when we use new? Here is the exact step-by-step breakdown

1. JavaScript creates a completely empty object behind the scenes {}.

2. It takes the this keyword inside the function and points it directly to that new empty object.

3. It executes the code inside the function, which assigns the name property to our new object.

4. It automatically returns that fully built object and assigns it to our user1 variable.

Constructor Functions

To use the new keyword properly, we pair it with constructor functions. A constructor function is simply a regular JavaScript function that is specifically designed to create and initialize objects.

Imagine a factory machine that produces cars. Every time you press a button, the machine stamps out a new car with a specific color and model. The constructor function is that machine.

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

const myCar = new Car("Sedan");

Let us explain this clearly

1. We define a function called Car. By convention, we capitalize the first letter to signal to other developers that this is a constructor meant to be used with new.

2. We define parameters like model that represent the unique details of each object.

3. When we call new Car("Sedan"), the factory machine runs, creating a fresh object with a model property set to "Sedan".

What Happens Behind the Scenes

Object Creation Process

How does JavaScript create objects behind the scenes? Let us review the core process. Whenever you type new, JavaScript secretly performs four hidden steps.

It is helpful to visualize the hidden logic like this:

1. Empty object created: JavaScript makes a fresh {}.

2. Prototype linking: (We will cover this next).

3. this binding: JavaScript binds the this context to our empty object so we can add data to it.

4. Object returned: JavaScript implicitly returns the object, saving us from writing return this; manually.

Prototype Linking

One of the most important things the new keyword does is link your newly created object to the constructor's prototype.

Think of the prototype like a shared public library in a town. Instead of giving every single citizen their own personal copy of an encyclopedia, the town puts one copy in the library. All citizens are "linked" to the library and can read the book whenever they need to.

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

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

const user1 = new User("Purakhnath");
user1.sayHi();

Here is what is happening step-by-step:

1. We attach a sayHi method to User.prototype.

2. We create user1 using the new keyword.

3. The new keyword secretly creates a link between user1 and the User.prototype.

4. When we call user1.sayHi(), JavaScript checks if user1 has that method. It does not, so it follows the link to the prototype library, finds the method there, and runs it perfectly.

Instances

When we use a constructor function to create an object, we call that resulting object an "instance". Each object created is an independent instance of the constructor.

Imagine buying a notebook from a store. The notebook design is the constructor. The specific notebook sitting on your desk, with your personal notes inside it, is your instance.

const user2 = new User("Vikram");

Let us look at this clearly:

1. user2 is a completely separate object from user1.

2. It was built using the same User blueprint.

3. It has its own independent name property set to "Vikram", but it shares the exact same prototype methods.

Practical Example

Why does this matter in real code? Let us look at a practical scenario where you are building an e-commerce store and need to track products.

function Product(name, price) {
  this.name = name;
  this.price = price;
}

Product.prototype.displayDetails = function() {
  console.log(this.name + " costs " + this.price);
};

const item1 = new Product("Phone", 20000);
const item2 = new Product("Laptop", 55000);

item1.displayDetails();

Let us walk through this practical setup

1. We create a Product blueprint that accepts a name and a price.

2. We place the displayDetails logic on the prototype so we do not waste memory copying it for thousands of items.

3. We create item1 and item2. Because we used new, JavaScript handles the object creation, property assignment, and prototype linking automatically.

Common Mistakes

When learning about constructors and the new keyword, beginners often face a few common hurdles

• Forgetting the new keyword: If you call Product("Phone", 20000) without new, JavaScript will not create a new object. Instead, this will point to the global window object, which will cause confusing bugs.

• Misunderstanding this: Beginners sometimes forget that inside a constructor, this refers exclusively to the brand new object currently being created.

• Thinking constructor returns automatically always: While new implicitly returns the created object, if you manually write return { something: "else" } inside your constructor, JavaScript will return your custom object instead of the new instance.

• Not understanding prototype: Adding functions directly inside the constructor is fine for small apps, but doing so creates a brand new copy of that function for every instance. Relying on the prototype link that new provides is much more memory efficient.

Summary

Let us review the core concepts of this lesson

• The new keyword creates completely fresh objects based on constructor functions.

• A constructor initializes the starting data for your object.

• The this keyword inside the constructor points directly to the newly created object.

• The new keyword automatically links your instance to the constructor's prototype.

• Every object you create with new is known as an independent instance of that constructor.

In the next article, we will explore the this keyword in JavaScript and understand how context works inside functions.