Skip to main content

Command Palette

Search for a command to run...

The new Keyword in JavaScript

Updated
3 min read

What the new keyword does ?

In JavaScript, the new keyword is used to create an instance of a user-defined object type or a built-in object that has a constructor function. It transforms a function call into a "constructor call".

When you use new, the following four-step process occurs:

1 Creates a new object: A blank, plain JavaScript object is initialized.

2 Sets the prototype: The new object’s internal [[Prototype]] (accessible via __proto__) is linked to the constructor function's prototype property. This allows the new instance to inherit methods and properties from that prototype.

3 Binds this: The constructor function is executed with its this context bound to the newly created object. This allows the function to assign properties to the new instance using this.propertyName = value.

4 Returns the object:

If the constructor returns a non-primitive (like an object or array), that return value becomes the result of the new expression.

If it returns nothing or a primitive (like a string or number), the newly created object is returned instead.

Constructor functions

A constructor function in JavaScript is a specialized function used to create and initialize multiple objects of the same type, acting as a blueprint**.** Invoked with the new keyword, it automatically assigns properties and methods to a new this object and returns it, with a convention to capitalize the first letter.

Object creation process

Types of Object Creation in JavaScript

1. Object Literal

The simplest and most common way. The engine directly creates an object and assigns values. It is automatically linked to Object.prototype.

2. Constructor Functions & Classes

Used to create multiple similar objects. With the new keyword, JavaScript:

Creates a new object

Links it to a prototype

Binds this to the object

Assigns values

Returns the object

Classes are just a cleaner syntax for this process.

3. Object.create()

Creates a new object with a specified prototype. Gives full control over inheritance and prototype linking.

4. Other Methods

Factory Functions: Functions that return objects (simple and flexible)

Object.assign(): Copies properties from one object to another

Object.fromEntries(): Converts key-value pairs into an object

When you execute const instance = new Constructor(), the following steps occur to establish the prototype link:

Object Creation: A brand-new, empty object is created in memory.

Prototype Linking: The engine sets the new object's internal [[Prototype]] property to the object currently referenced by by Constructor.prototype.

Context Binding: The constructor function is executed with the this keyword bound to the new object.

Return: The newly linked object is returned (unless the constructor explicitly returns a different object).

Instances created from constructors

Instances are objects created using a constructor, which is like a blueprint for making similar objects. When you use the new keyword with a constructor function or class, JavaScript creates a fresh object and sets its properties using the given values.

For example, a Person constructor can create multiple people with different names and ages. Each created object is called an instance. This approach helps organize code and reuse logic easily. Think of it like making multiple copies from the same design, where each copy has its own unique details but follows the same structure.