Skip to main content

Command Palette

Search for a command to run...

The new Keyword in JavaScript: The Magic Behind Object Creation

Updated
4 min read
The new Keyword in JavaScript: The Magic Behind Object Creation
A

Focused on building robust web applications and understanding the underlying infrastructure of the internet.

In the world of JavaScript, we often need to create multiple objects that share the same structure as hundreds of "User" profiles or thousands of "Product" cards. While you could manually type out each object, that would be inefficient.

Instead, we use a specialized tool: the new keyword. Think of new as a 3D Printer. You provide the blueprint (a Constructor Function), and the new keyword executes the "print" command to create a physical instance of that blueprint.

What is a Constructor Function?

Before understanding new, you must understand the Constructor Function. In JavaScript, a constructor is just a regular function, but by convention, we capitalize its first letter (PascalCase) to signal to other developers that it’s intended to be used with new.

The Blueprint:

function User(name, email) {
  this.name = name;
  this.email = email;
  this.isAdmin = false;
}

If you call this function normally User('Abhishek', 'test@test.com') it will likely return undefined and cause errors because this won't point where you expect. To make it work, you need the magic of new.

The 4-Step Process: What new Actually Does

When you put new in front of a function call, four specific things happen behind the scenes. Understanding these steps is the key to mastering JavaScript internals.

  1. Creates a Blank Object: A brand new, empty object {} is created.

  2. Links the Prototype: The new object’s internal [[Prototype]] property is linked to the constructor function’s .prototype object. This allows the object to "inherit" methods.

  3. Binds this: The this keyword inside the constructor is pointed to the new empty object. Any properties assigned to this are added to the new object.

  4. Returns the Object: Unless the constructor explicitly returns its own object, JavaScript automatically returns the newly created object.

Instances Created from Constructors

When you use new, you are creating an Instance. An instance is a unique object that carries the DNA of its constructor but holds its own specific data.

const user1 = new User("Abhishek", "abhishek@dev.com");
const user2 = new User("Jane", "jane@dev.com");

console.log(user1.name); // "Abhishek"
console.log(user2.name); // "Jane"

You can check if an object was created from a specific blueprint using the instanceof operator: console.log(user1 instanceof User); // true

This is where the real power lies. Instead of giving every single User object its own copy of a greet function (which would waste a lot of memory), we can attach the function to the Prototype.

Because the new keyword handles the linkage (Step 2 above), every instance created with new can access these shared methods.

User.prototype.greet = function() {
  console.log(`Hello, I am ${this.name}`);
};

user1.greet(); // Works!
user2.greet(); // Works!

Comparison: Manual Creation vs. new Keyword

Feature Object Literal {} new Keyword
Effort High (must type every property). Low (uses a reusable blueprint).
Memory High (methods are copied every time). Low (methods are shared via prototype).
Consistency Hard to maintain across 10+ objects. Guaranteed structure for all instances.
Best For One-off, unique objects. Repetitive objects (Users, Products, etc.).

The "Hidden" Return Rule

A common interview question is: "What happens if a constructor function returns something?"

  1. If the constructor returns a primitive (like a string or number), the new keyword ignores it and returns the object it created.

  2. If the constructor returns an object, the new keyword throws away the one it made and returns your object instead.

Moral of the story: Don't use return statements inside constructor functions unless you have a very specific reason to do so!

Summary

  • Constructor: A function used as a blueprint (Capitalized name).

  • new: The keyword that triggers the 4-step object creation process.

  • this: Refers to the specific instance being created.

  • Prototypes: new links the instance to shared methods to save memory.

  • Instances: Independent objects that share the same structure.

More from this blog

T

Terminal Thoughts

53 posts

A developer’s log of experiments, errors, and breakthroughs. Terminal and Thoughts captures my evolution through a web development cohort, featuring deep dives into the modern tools and technologies.