The new Keyword in JavaScript

I vividly remember the day I got tired of copy-pasting.

I was building a simple browser game, and I needed to create enemies. So, I wrote out an object.

const goblin1 = {
  name: "Brog",
  health: 100,
  attack: function() { console.log("Brog swings a club!"); }
};

Then I needed another one. So I copied it, pasted it, and changed the name to goblin2. Then I needed twenty more. By the time I was done, my file was a massive wall of nearly identical text. It felt incredibly wrong.

And what if I wanted to change the attack function for all of them later? I’d have to update twenty different objects manually.

There had to be a better way to stamp out identical objects without tearing my hair out.

Enter the Constructor Function and its magical sidekick: the new keyword.

The Blueprint: Constructor Functions

Before we talk about new, we have to talk about what it attaches to.

If you want to build twenty identical houses, you don't design each one from scratch. You draw one blueprint, and then you hand that blueprint to a builder twenty times.

In JavaScript, a blueprint is called a Constructor Function.

It’s literally just a normal JavaScript function, but by convention, we capitalize the first letter so other developers know, "Hey, this isn't a normal function, this is a blueprint."

function Goblin(name) {
  this.name = name;
  this.health = 100;
}

Notice the this keyword? In a normal function, this can be incredibly confusing. It changes depending on how the function is called. But when paired with the new keyword, this stops acting wild and behaves perfectly.

The 4-Step Magic Trick

Here is where the magic happens. When you call that function, you just put the word new in front of it.

const myGoblin = new Goblin("Brog");

When JavaScript sees that new keyword, it immediately pauses and performs a 4-step magic trick entirely behind the scenes. You don't write this code; it just happens automatically.

Here is exactly what the new keyword does:

1. It creates a brand new, empty object. Imagine it instantly creating a blank box in memory: {}.

2. It points this to that empty box. Inside your blueprint function, every time you say this.name, JavaScript knows you are specifically talking about dropping a name into that brand-new box.

3. It links the prototypes. (We'll look at this secret thread in a second).

4. It automatically returns the object. Notice how our Goblin function didn't have a return statement at the end? We didn't need one. The new keyword automatically hands the finished box back to you so you can store it in your myGoblin variable.

The Secret Thread: Prototype Linking

Let's circle back to Step 3 of that magic trick, because it’s the absolute most powerful part of the new keyword.

Remember my problem with the attack function? If I put this.attack = function() {...} inside my blueprint, and I create 1,000 goblins, JavaScript will create 1,000 separate, identical copies of that function in your computer's memory. That is heavy, redundant, and slow.

Instead, constructor functions have a special space attached to them called a prototype. Think of it like a community center that every house built from that blueprint has a private road to.

If we put the attack function in the community center...

Goblin.prototype.attack = function() {
  console.log(`${this.name} swings a club!`);
};

...we only create it once.

When the new keyword creates your object, Step 3 establishes an invisible thread between your new object and that shared community center.

If you type myGoblin.attack(), JavaScript looks inside the myGoblin box and says, "Hmm, there's no attack function in here." But then it sees the invisible thread. It follows the thread up to the Goblin prototype, finds the function, and runs it perfectly.

Stepping into the Uncomfortable Zone

Okay, everything sounds great so far. But let’s step into the uncomfortable zone for a second. JavaScript has a few weird edge cases with new that can completely break your app if you don't see them coming.

Gotcha #1: The Return Value Hijack

I told you in Step 4 that new automatically returns your newly built object. But what if your constructor function tries to be rebellious and returns something else on purpose?

function Dragon(name) {
  this.name = name;
  this.health = 500;

  // Wait, what happens here?
  return { imposter: true, message: "I hijacked your object!" };
}

const myDragon = new Dragon("Smaug");
console.log(myDragon.name); // undefined
console.log(myDragon.imposter); // true

If your constructor explicitly returns an object, the new keyword's magic trick is canceled. It throws away the nice this box it was building and just gives you the returned object instead.

However, if you try to return a primitive value (like a string, number, or boolean), JavaScript just ignores it and returns your this object anyway. It’s a very weird quirk, so the golden rule is: never write a return statement inside a constructor.

Gotcha #2: Forgetting the new keyword

I have to warn you about this one, because you will do it, usually on a Friday afternoon when you're tired.

If you just type const myGoblin = Goblin("Brog"); without the new keyword, the magic trick doesn't happen.

1. No empty box is created.

2. Nothing is returned (so myGoblin becomes undefined).

3. Worst of all, this doesn't point to a new box. In a browser, it defaults to the global window object. You will accidentally overwrite global browser variables.

To protect against this, modern JavaScript gave us a neat little security guard called new.target. It lets a function check if it was called with new or not.

You can actually write your constructors to "auto-correct" themselves if someone forgets the keyword:

function Goblin(name) {
  // If 'new' wasn't used, new.target is undefined
  if (!new.target) {
    console.warn("You forgot 'new'! Fixing it for you...");
    return new Goblin(name);
  }

  this.name = name;
  this.health = 100;
}

// Now, even if you forget the keyword, it fixes itself!
const safeGoblin = Goblin("Brog");

The Takeaway

Object creation doesn't have to be a tedious, copy-paste nightmare.

By using constructor functions and the new keyword, you are setting up an automated factory. The new keyword builds the empty box, wires up the this context, attaches the invisible thread to shared tools, and hands the finished product right back to you.

(Side note: Modern JavaScript introduced the class keyword to make this syntax look a bit friendlier, but under the hood? A class is doing this exact same 4-step magic trick).