Skip to main content

Command Palette

Search for a command to run...

The new Keyword in JavaScript

Understanding Object Creation, Constructors, and Prototype Linking

Updated
4 min read
The new Keyword in JavaScript
R

Software engineer passionate about tech, innovation & research. I explore, build, and share insights on coding, systems, and emerging technologies.

Introduction

In JavaScript, the new keyword plays a central role in object-oriented programming. It is used to create new objects from constructor functions or classes. While it may appear simple on the surface, it performs several important operations behind the scenes.

This documentation explains what the new keyword does, how constructor functions work, how objects are created step by step, how prototype linking happens, and how instances are formed.

What the new Keyword Does

The new keyword is used to create a new instance of an object from a constructor function or class.

Basic Example

class Car {
  constructor(brand, model) {
    this.brand = brand;
    this.model = model;
  }
}

const car1 = new Car("Toyota", "Corolla");

console.log(car1);

Output

Car { brand: 'Toyota', model: 'Corolla' }

Explanation

  • Car is a class (constructor)

  • new Car(...) creates a new object

  • car1 holds the instance of Car

Constructor Functions

Before classes were introduced, JavaScript used constructor functions to create objects.

Example

function Book(title, author) {
  this.title = title;
  this.author = author;
}

const book1 = new Book("Atomic Habits", "James Clear");

console.log(book1);

Output

Book { title: 'Atomic Habits', author: 'James Clear' }

Key Points

  • Constructor functions are regular functions

  • They are invoked using the new keyword

  • this refers to the newly created object

Object Creation Process Using new

When the new keyword is used, JavaScript internally performs a sequence of steps.

Example for Explanation

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

const user1 = new User("Ravi", "Admin");

Step 1: Create an Empty Object

JavaScript creates a new empty object.

let obj = {};

The new object's internal prototype is linked to the constructor's prototype.

obj.__proto__ = User.prototype;

Step 3: Bind this

The constructor function is executed, and this is bound to the new object.

User.call(obj, "Ravi", "Admin");

This assigns:

obj.name = "Ravi";
obj.role = "Admin";

Step 4: Return the Object

The object is returned automatically unless explicitly overridden.

return obj;

Final Result

{ name: "Ravi", role: "Admin" }

Prototype linking allows objects to inherit properties and methods.

Example

function Animal(type) {
  this.type = type;
}

Animal.prototype.describe = function () {
  return `This is a ${this.type}`;
};

const animal1 = new Animal("Mammal");

console.log(animal1.describe());

Explanation

  • describe is not directly inside animal1

  • It is accessed via Animal.prototype

  • This is possible because of prototype linking

Prototype Linking Visualization

Instances Created from Constructors

An instance is a unique object created using a constructor.

Example

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

const d1 = new Device("Laptop");
const d2 = new Device("Mobile");

console.log(d1);
console.log(d2);

Output

Device { name: 'Laptop' }
Device { name: 'Mobile' }

Key Observations

  • Each instance is independent

  • Each has its own data

  • All instances share the same prototype methods

Constructor and Instance Relationship

Example

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

const s1 = new Student("Ankit");

Relationship

Check Relationship in Code

console.log(s1 instanceof Student); // true

Important Behavior of new

Implicit Return

By default, constructors return the newly created object.

Explicit Return

If a constructor returns an object explicitly, that object replaces the default return.

function Test() {
  this.value = 10;
  return { custom: true };
}

const t = new Test();

console.log(t);

Output

{ custom: true }

Constructor to Instance Creation Flow

Best Practices

Use PascalCase for Constructors

function Person(name) {}

Always Use new with Constructors

Calling without new can lead to unexpected behavior.

const p = Person("Amit"); // Incorrect usage

Keep Constructors Focused

Constructors should only initialize properties.

Use Prototypes for Methods

Avoid defining methods inside constructors to save memory.

function Example() {}
Example.prototype.method = function () {};

Conclusion

The new keyword is a fundamental part of JavaScript that enables object creation through constructors. It performs multiple internal steps, including object creation, prototype linking, context binding, and returning the instance.

Understanding how new works provides deeper insight into JavaScript's object model, especially its prototype-based inheritance system. Mastering this concept helps developers write more efficient, structured, and maintainable code.