Skip to main content

Command Palette

Search for a command to run...

The new Keyword in JavaScript

Updated
3 min readView as Markdown
The new Keyword in JavaScript
M

Full-stack developer with a good foundation in frontend, now specializing in backend development. Passionate about building efficient, scalable systems and continuously sharpening my problem-solving skills. Always learning, always evolving.

new is not just syntax sugar—it controls how objects are created and how prototypes are wired. If you don’t understand what it does internally, you’ll misuse constructors and break inheritance.


What new Actually Does

When you call a function with new, JavaScript performs four specific steps:

  1. Create a new empty object

  2. Set its internal [[Prototype]] to Constructor.prototype

  3. Call the constructor function with this bound to that object

  4. Return the object (unless the constructor explicitly returns another object)

This is the entire mechanism. No magic beyond that.


Constructor Functions

A constructor is just a normal function intended to be used with new.

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

const u1 = new User("Mohammad");
console.log(u1.name); // "Mohammad"

Without new, this breaks:

const u2 = User("Ali"); 
console.log(u2); // undefined

Why? Because this is no longer bound to a new object (in strict mode it’s undefined; otherwise it leaks to global scope—bad bug).


Object Creation Step-by-Step

Take this:

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

const c1 = new Car("Toyota");

Equivalent (roughly) to:

const obj = {}; // step 1

Object.setPrototypeOf(obj, Car.prototype); // step 2

Car.call(obj, "Toyota"); // step 3

// step 4
return obj;

That’s what new expands to conceptually.


Prototype Linking (Critical Part)

Every function has a .prototype property:

Car.prototype.drive = function () {
  console.log("Driving...");
};

const c1 = new Car("Toyota");
c1.drive(); // works

Why this works:

  • c1.__proto__ === Car.prototype

  • JS walks the prototype chain when a property isn’t found on the object

So new is what connects instances to shared behavior.


Instances Created from Constructors

Instances are just objects with a linked prototype:

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

const dog = new Animal("dog");

console.log(dog instanceof Animal); // true

instanceof works because of the prototype chain:

dog → Animal.prototype → Object.prototype → null

Common Mistakes

1. Forgetting new

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

const u = User("Aman"); // bug

Fix patterns:

  • Always use new

  • Or enforce it:

function User(name) {
  if (!(this instanceof User)) {
    return new User(name);
  }
  this.name = name;
}

2. Returning primitives vs objects

function Test() {
  this.a = 1;
  return 5;
}

new Test(); // { a: 1 }

Primitive return is ignored.

But:

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

new Test(); // { b: 2 }

Returned object overrides the default.


3. Putting methods inside constructor

Bad pattern:

function User(name) {
  this.name = name;
  this.sayHi = function () {
    console.log("Hi");
  };
}

Every instance gets a new function → memory waste.

Better:

User.prototype.sayHi = function () {
  console.log("Hi");
};

Shared across all instances.


When NOT to Use new

  • Modern JavaScript prefers class syntax (which still uses new under the hood)

  • Factory functions are often cleaner:

function createUser(name) {
  return {
    name,
    sayHi() {
      console.log("Hi");
    }
  };
}

No this, no prototype confusion.


Mental Model

Think of new as:

“Create an object, link it to a prototype, run a function to initialize it.”

If you remember those three responsibilities, you’ll avoid most bugs related to constructors and inheritance.