LinkedIn Hook

Every time you write new Person("Rakibul"), JavaScript quietly performs FOUR separate steps — and most developers can only name two.

It creates a brand new object. It links that object's prototype. It calls your constructor with this set to the new object. And finally, it decides whether to return the new object or whatever you returned manually.

That last step is where the tricky interview question hides: what happens if your constructor returns a primitive? What about an object?

In this lesson I walk through all 4 steps, show you how to simulate new yourself in ~10 lines, and explain the override rule that separates juniors from seniors.

Read the full lesson -> [link]

#JavaScript #InterviewPrep #NewKeyword #Constructors #Prototypes #CodingInterview #WebDevelopment

new Binding thumbnail

What You'll Learn

The 4 steps the new keyword silently performs behind every constructor call
How to simulate new yourself using Object.setPrototypeOf and apply
The override rule: what happens when a constructor returns an object vs a primitive

What `new` Does — Step by Step

When you use the new keyword, JavaScript does something magical behind the scenes. Think of new like a factory machine: you feed it a blueprint (constructor function), and it spits out a brand new product (object) with everything wired up.

When you call new MyFunction(), JavaScript does these 4 things:

Creates a brand new empty object {}
Sets the prototype — links the new object's __proto__ to MyFunction.prototype
Binds this — calls the function with this pointing to the new object
Returns the new object (unless the function explicitly returns a different object)

function Person(name, age) {
  // Step 1: new empty object created -> {}
  // Step 3: this = that new empty object
  this.name = name;   // { name: "Rakibul" }
  this.age = age;     // { name: "Rakibul", age: 25 }
  // Step 4: automatically returns this
}

const person1 = new Person("Rakibul", 25);
console.log(person1.name); // "Rakibul"
console.log(person1.age);  // 25

Simulating `new` Manually

To prove you understand new, here's how you'd replicate it:

function simulateNew(Constructor, ...args) {
  // Step 1: Create empty object
  const obj = {};

  // Step 2: Link prototype
  Object.setPrototypeOf(obj, Constructor.prototype);

  // Step 3: Call constructor with this = obj
  const result = Constructor.apply(obj, args);

  // Step 4: Return the object (unless constructor returns an object)
  return result instanceof Object ? result : obj;
}

function Car(brand) {
  this.brand = brand;
}
Car.prototype.drive = function() {
  return this.brand + " goes vroom!";
};

const myCar = simulateNew(Car, "Toyota");
console.log(myCar.brand);   // "Toyota"
console.log(myCar.drive()); // "Toyota goes vroom!"

What Happens If Constructor Returns Something?

function WeirdConstructor() {
  this.name = "Rakibul";
  return { name: "Karim" }; // explicitly returning an object
}

const obj = new WeirdConstructor();
console.log(obj.name); // "Karim" — the explicit return OVERRIDES the new object

function NormalConstructor() {
  this.name = "Rakibul";
  return 42; // returning a primitive — ignored!
}

const obj2 = new NormalConstructor();
console.log(obj2.name); // "Rakibul" — primitive return is ignored

Rule: If a constructor returns an object, that object is used instead. If it returns a primitive (or nothing), the new-created object is returned.

new Binding visual 1

Common Mistakes

Calling a constructor without new — the function runs as a plain call, this falls back to global (or undefined in strict mode), and your "instance" silently pollutes the global object.
Assuming a constructor's return 42 sets instance to 42 — primitives are ignored; only returned objects replace the new instance.
Forgetting step 2 — linking __proto__ to Constructor.prototype. Skip this, and instances can't access methods defined on the prototype.

Interview Questions

Q: What are the 4 steps the new keyword performs?

Creates a new empty object. 2) Sets the object's __proto__ to the constructor's .prototype. 3) Executes the constructor with this bound to the new object. 4) Returns the new object (unless the constructor explicitly returns a non-primitive).

Q: What happens if a constructor function explicitly returns an object?

The returned object replaces the one created by new. However, if the constructor returns a primitive (number, string, boolean, etc.), the return value is ignored and the new-created object is returned as usual.

Q: What happens if a constructor returns a primitive?

The primitive return value is ignored. The engine returns the newly created this object instead. This override behavior only triggers when you explicitly return an object.

Q: How would you simulate the new keyword manually?

Create an empty object, link its prototype with Object.setPrototypeOf(obj, Constructor.prototype), invoke the constructor via Constructor.apply(obj, args), and return result instanceof Object ? result : obj to honor the object-override rule.

Quick Reference — Cheat Sheet

new BINDING — QUICK MAP

The 4 Steps:
  1. const obj = {}
  2. Object.setPrototypeOf(obj, Fn.prototype)
  3. const result = Fn.apply(obj, args)
  4. return result instanceof Object ? result : obj

Return override rule:
  return {}        -> {} replaces the instance
  return []        -> [] replaces the instance (arrays are objects)
  return 42        -> ignored, instance returned
  return "hi"      -> ignored, instance returned
  no return        -> instance returned

Forgetting new:
  Person("x")      -> this = window / undefined
                      Silent bug, pollutes global scope.

Previous: Explicit Binding -> call, apply, bind Next: Arrow Functions & this -> Lexical Binding

This is Lesson 4.3 of the JavaScript Interview Prep Course — 14 chapters, 87 lessons.

new Binding