Fully Understanding How the JavaScript `new` Operator Works

In JavaScript, the new operator is a core concept that frequently appears in both interviews and everyday development.
Many developers use new regularly, but few truly understand what actually happens behind the scenes.

In this article, we’ll implement new by hand, breaking down its internal mechanics step by step to help you fully understand how JavaScript objects are created.

1. What Does the new Operator Actually Do?

When we execute the following line of code:

const person = new Person('Alice', 25);

JavaScript actually performs four steps internally:

1. Create a new empty object
2. Set the object’s prototype to the constructor’s prototype
3. Execute the constructor and bind this to the new object
4. If the constructor returns an object, return it; otherwise return the new object

Understanding these four steps is the key to understanding how new works.

2. Why Implement new Manually?

There are three main benefits to handwriting new:

• Deepens your understanding of the prototype chain and this binding
• It is a high-frequency frontend interview question
• Helps you understand how frameworks create objects internally

Let’s jump straight into the code.

3. Handwriting the new Operator

function myNew(constructor, ...args) {
  // 1. Create a new object and link its prototype
  const obj = Object.create(constructor.prototype);

  // 2. Execute the constructor with `this` bound to the new object
  const result = constructor.apply(obj, args);

  // 3. If the constructor returns an object, return it
  //    Otherwise, return the newly created object
  return result instanceof Object ? result : obj;
}

This implementation fully reproduces the core behavior of the new operator.

4. Line-by-Line Breakdown

1. The Role of Object.create

const obj = Object.create(constructor.prototype);

This is equivalent to:

obj.__proto__ === constructor.prototype

Which means:

• The new object can access methods on the constructor’s prototype
• The prototype chain is properly established

2. constructor.apply(obj, args)

const result = constructor.apply(obj, args);

This step does two things:

• Executes the constructor function
• Binds this inside the constructor to the new object

So code like this:

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

Actually assigns properties directly to obj.

3. Why Do We Check the Return Value?

return result instanceof Object ? result : obj;

This is a detail many developers overlook.

Consider this example:

function Test() {
  this.a = 1;
  return { b: 2 };
}

const t = new Test();
console.log(t); // { b: 2 }

If a constructor explicitly returns an object, the new operator returns that object instead of this.

That’s why we must handle this case in our myNew implementation.

5. Testing Our myNew Function

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

const p1 = myNew(Person, 'Alice', 25);

console.log(p1.name); // Alice
console.log(p1.age);  // 25
console.log(p1 instanceof Person); // true

The behavior matches native new perfectly.

6. Comparing myNew and Native new

Behavior	new	myNew
Create new object	✅	✅
Bind prototype	✅	✅
Bind this	✅	✅
Handle returned object	✅	✅

In practice, myNew reproduces about 90% of the real new operator’s behavior, which is more than sufficient for interviews and deep understanding.

7. Common Interview Follow-Up Questions

Q1: Why not simply use const obj = {}?

Because objects created with {} have their prototype set to Object.prototype.
Objects created with new must have their prototype set to the constructor’s prototype.

Q2: Can constructor.apply be replaced with call?

Yes. The only difference is how arguments are passed:

constructor.call(obj, ...args);

Q3: How does instanceof work?

p1 instanceof Person

Internally, JavaScript checks whether:

Person.prototype exists in p1’s prototype chain

8. Summary

• The new operator is not magic—it follows a well-defined execution process
• Handwriting new is one of the best ways to understand prototype chains, this, and constructors
• Mastering this concept helps when learning Vue, React, and Node.js internals

If you can both write and explain this implementation,
90% of interviewers will consider your JavaScript fundamentals solid.