Skip to main content

Command Palette

Search for a command to run...

The new Keyword in JavaScript

Updated
6 min readView as Markdown

In JavaScript, creating objects is extremely common.

You create objects for:

  • Users

  • Products

  • Orders

  • Cars

  • Game characters

  • Tasks

Sometimes you only need one object.

But what if you need:

  • Hundreds of similar objects?

Instead of manually writing each object again and again, JavaScript provides:

  • Constructor functions

  • The new keyword

The new keyword helps create objects automatically using a reusable blueprint.

In this blog, you’ll learn:

  • What the new keyword does

  • Constructor functions

  • Step-by-step object creation

  • Prototype linking

  • Instances created from constructors


The Problem Without new

Imagine manually creating multiple user objects.

const user1 = {
  name: "Alex",
  age: 22
};

const user2 = {
  name: "John",
  age: 25
};

This works…

But repeating the same structure again and again becomes inefficient.

We need a reusable way to create objects.


Constructor Functions

A constructor function acts like:

A blueprint for creating objects.


Simple Constructor Example

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

This function describes:

  • How user objects should be created

Creating Objects with new

const user1 = new User("Alex", 22);

console.log(user1);

Output

{
  name: "Alex",
  age: 22
}

What Does the new Keyword Do?

When you use:

new User()

JavaScript performs several hidden steps automatically.

This is the core idea to understand.


Step-by-Step Object Creation Process

When new is used:

Step 1: Create Empty Object

JavaScript secretly creates:

{}

Step 2: Link Prototype

The object is linked to:

  • The constructor’s prototype

Step 3: Bind this

Inside the constructor:

this

now points to the new object.


Step 4: Add Properties

this.name = name;
this.age = age;

Properties are added to the object.


Step 5: Return the Object

The completed object is returned automatically.


Constructor → Instance Creation Flow

Constructor Function
        ↓
      new
        ↓
Create Empty Object
        ↓
Add Properties
        ↓
Return Instance

Understanding this with new

Inside constructor functions:

this

refers to:

  • The newly created object

Example

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

const car1 = new Car("Toyota");

console.log(car1);

Output

{
  brand: "Toyota"
}

Why Constructor Functions Start with Capital Letters

By convention:

  • Constructor function names start with capital letters

Example:

function User() {}
function Car() {}
function Product() {}

This helps developers recognize:

  • “This function should be used with new.”

Instances Created from Constructors

Objects created using constructors are called:

Instances


Example

const user1 = new User("Alex", 22);
const user2 = new User("John", 25);

Both:

  • user1

  • user2

are instances of User.


Visual Understanding

User Constructor
      │
      ├── user1
      ├── user2
      └── user3

One constructor can create many objects.


Adding Methods to Constructor Objects

You can also add methods.


Example

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

  this.sayHello = function() {
    console.log(`Hello ${this.name}`);
  };
}

const user1 = new User("Alex");

user1.sayHello();

Output

Hello Alex

How new Links Prototypes

This is one of the most important concepts in JavaScript.

Every constructor function has:

  • A prototype object

Objects created with new automatically connect to it.


Example

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

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

const user1 = new User("Alex");

user1.sayHello();

What Happened Here?

sayHello() is not directly inside user1.

Instead:

  • JavaScript looks inside the prototype

This saves memory because:

  • All instances share the same method

Prototype Linking Visual

user1
  │
  ↓
User.prototype
  │
  └── sayHello()

Why Prototypes Matter

Without prototypes:

  • Every object would create duplicate methods

That wastes memory.

Prototypes allow:

  • Shared behavior

Real-Life Analogy

Think of constructors like:

  • Cookie cutters

Each cookie:

  • Is a separate object

But all cookies:

  • Come from the same mold

Simple Constructor Example

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

const phone = new Product("iPhone", 80000);

console.log(phone);

Output

{
  name: "iPhone",
  price: 80000
}

Common Beginner Mistake: Forgetting new

This is extremely common.


Wrong

const user = User("Alex", 22);

Without new:

  • JavaScript does not create a new object properly

This often causes bugs.


Correct

const user = new User("Alex", 22);

How to Identify Constructor Functions

Usually:

  • Capitalized names

  • Used with new

Example:

new Date()
new Array()
new User()

Built-In JavaScript Constructors

JavaScript itself uses constructors internally.

Examples:

new Date()
new Array()
new Object()

You’ve probably already used new before without realizing it.


Modern JavaScript and Classes

Modern JavaScript introduced:

  • Classes

But classes internally still use:

  • Constructor logic

  • Prototypes

  • new

So understanding new is still extremely important.


Mental Model for Beginners

The easiest way to think about new:

new = “Create a new object using this blueprint.”

That’s the core idea.


Complete Object Creation Flow

Constructor Function
       ↓
new keyword
       ↓
Create empty object
       ↓
Attach properties
       ↓
Link prototype
       ↓
Return instance

Practice Exercises

Exercise 1

Create a constructor:

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

Create two instances.


Exercise 2

Add a method using prototype:

Animal.prototype.sound = function() {
  console.log("Animal sound");
};

Exercise 3

Try creating objects both:

  • With new

  • Without new

Observe the difference.


Final Thoughts

The new keyword is one of the most important object creation concepts in JavaScript.

The key ideas are:

Concept Meaning
Constructor Function Blueprint for objects
new Keyword Creates object instances
Instance Object created from constructor
Prototype Link Shared behavior between instances

Even though modern JavaScript uses classes heavily, the underlying concepts still depend on:

  • Constructors

  • Prototypes

  • The new keyword

Understanding these concepts gives you a much deeper understanding of how JavaScript actually works behind the scenes.