The new Keyword in JavaScript: Constructors, Objects, and Prototypes

August 5, 20265 min read

JavaScriptOopPrototypesInterview Prep

The new Keyword in JavaScript: Constructors, Objects, and Prototypes

`new Car("Tesla")` — what actually happens?

Writing new Car("Tesla") looks like a single, simple step — call a function, get an object back. But behind that one line, JavaScript is quietly performing a specific, ordered sequence of steps that most developers use constantly without ever seeing spelled out. Understanding that sequence is exactly what turns constructor functions and prototypes from memorized syntax into something you genuinely understand.

What the `new` Keyword Does

The new keyword turns an ordinary function call into an object creation process. Calling a function normally just runs its code and returns whatever it returns:

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

Car("Tesla"); // just runs the function — this refers to something unexpected here, no object is created

Calling the exact same function with new behaves completely differently:

const myCar = new Car("Tesla");
console.log(myCar.brand); // "Tesla"

new is what tells JavaScript: "treat this function as a constructor, and build me a new object from it" — the same function, used two fundamentally different ways depending on whether new is present.

Constructor Functions

A constructor function is simply a regular function written with the intention of being called with new, to produce new objects that share the same shape and behavior.

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

By convention, constructor function names start with a capital letter (Car, not car) — a widely followed signal to other developers that "this function is meant to be used with new," even though JavaScript itself doesn't enforce that capitalization rule technically.

Inside a constructor, this refers to the new object being built — which is exactly what makes the object-creation process (covered next) actually work.

Object Creation Process

When you write new Car("Tesla", 2024), JavaScript performs four distinct steps, in order:

Step 1: Create a new, empty object

// Conceptually:
const newObject = {};

Step 2: Link that new object to the constructor’s prototype

// Conceptually:
newObject.__proto__ = Car.prototype;

Step 3: Run the constructor function, with `this` bound to the new object

// Inside Car, `this` now refers to newObject
this.brand = "Tesla";
this.year = 2024;

Step 4: Return the new object automatically

Unless the constructor explicitly returns a different object itself, new automatically returns the object that was just built and populated.

This is genuinely the entire process — no extra hidden magic. new is really just a convenient shorthand for these four specific, ordinary steps.

How `new` Links Prototypes

Every function in JavaScript automatically has a prototype property — an object that becomes the shared foundation for every instance created from that constructor.

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

Car.prototype.honk = function () {
  console.log(`${this.brand} says beep!`);
};

const myCar = new Car("Tesla");
myCar.honk(); // "Tesla says beep!"

Notice honk isn't defined inside the constructor itself — it's added to Car.prototype. Yet myCar.honk() still works, because Step 2 of the creation process linked myCar to Car.prototype — when JavaScript can't find honk directly on myCar, it looks up the prototype chain and finds it there instead.

This is also why adding a method to the prototype (rather than inside the constructor itself) is efficient: every instance shares the exact same honk function in memory, rather than each instance getting its own separate copy.

const car1 = new Car("Tesla");
const car2 = new Car("Toyota");

console.log(car1.honk === car2.honk); // true — same shared function, from the prototype

Instances Created From Constructors

Each object built with new is called an instance of that constructor — a distinct object, with its own individual property values, but sharing the same prototype (and therefore the same methods) as every other instance from the same constructor.

const car1 = new Car("Tesla");
const car2 = new Car("Toyota");

console.log(car1.brand); // "Tesla"
console.log(car2.brand); // "Toyota"

car1.honk(); // "Tesla says beep!"
car2.honk(); // "Toyota says beep!"

car1 and car2 are separate objects with their own distinct brand values — but both share the exact same honk method, inherited through their shared link to Car.prototype.

Checking whether something is an instance

console.log(car1 instanceof Car); // true

instanceof checks whether an object's prototype chain includes a given constructor's prototype — a direct, practical consequence of the exact linking process described above.

Final Takeaway

new isn't a single magical operation — it's a clean shorthand for four specific, well-defined steps: create an empty object, link it to the constructor's prototype, run the constructor with this bound to that new object, and return the result. That prototype link is what lets every instance efficiently share methods defined once, rather than duplicating them per object. Once you can walk through those four steps confidently for any new SomeConstructor(...) call, constructor functions and prototypes stop feeling like separate, disconnected topics — they're really just one coherent mechanism, viewed from two different angles.

Frequently Asked Questions

What happens if I call a constructor function without new?

> this inside the function won't refer to a newly created object — depending on the context, it may refer to the global object or be undefined in strict mode, and no new object gets created or returned as intended. This is exactly why forgetting new is a common, quietly confusing bug.

Why define methods on the prototype instead of inside the constructor?

> Methods defined inside the constructor get recreated separately for every single instance, wasting memory. Methods defined on the prototype are shared by every instance, created only once, which is both more memory-efficient and the conventional approach.

Are constructor functions the same as classes in JavaScript?

> Modern JavaScript class syntax is largely a cleaner, more readable way to write the exact same underlying pattern — constructor functions and prototypes are still what's happening underneath a class, just expressed with different, more familiar syntax.

Can a constructor function return something other than the new object?

> Yes — if a constructor explicitly returns an object, new returns that object instead of the one it automatically created. Returning a primitive value (like a string or number) is ignored, and the automatically created object is returned as usual.

Originally published by Mr Madhukar

Read the complete article on Medium with full formatting & reader responses.

Read Full Article on Medium All Articles