Skip to main content

Command Palette

Search for a command to run...

The new Keywordin JavaScript

Updated
β€’6 min read

If you've spent any time with JavaScript, you may have stumbled upon code that looks like this:

const dog = new Animal("Rex");

What's the new doing there? Why can't we just call the function normally? This guide answers those questions step by step β€” no prior experience with classes or prototypes required.

πŸ’‘Think of it this way:
new is like a factory machine. You design the blueprint (the constructor function), and every time you press the button (new), the machine stamps out a fresh copy of your object.

1. What does new actually do?

The new keyword is a special operator that runs a function in a completely different mode. Instead of returning whatever value the function returns, new hijacks the process to build and return a brand-new object.

Here is the simplest possible example:

function Greet() {
  this.message = "Hello, world!";
}

const g = new Greet();
console.log(g.message); // "Hello, world!"

Without new, this inside Greet would refer to the global object (or be undefined in strict mode), and nothing useful would happen. With new, this refers to the fresh object being created.

2. Constructor Functions

A constructor function is just a regular JavaScript function with a special naming convention β€” it starts with a capital letter. That capital letter is a signal to other developers: "call me with new."

// Constructor function (note capital P)
function Person(name, age) {
  this.name = name;
  this.age  = age;
  this.greet = function() {
    console.log(`Hi, I'm ${this.name}!`);
  };
}

// Using new to create an instance
const alice = new Person("Alice", 30);
const bob   = new Person("Bob",   25);

alice.greet(); // "Hi, I'm Alice!"
bob.greet();   // "Hi, I'm Bob!"

alice and bob are two separate objects, each with their own name and age. The constructor is the mold; each call to new produces a distinct object.

3. The Object Creation Process, Step by Step

When you write new Person("Alice", 30), JavaScript performs four hidden steps behind the scenes:

  1. Create a blank object: JavaScript silently creates a fresh, empty object: {}. This will become your instance.

  2. Link to the prototype: The new object's internal [[Prototype]] is set to Person.prototype, so it can inherit shared methods.

  3. Run the constructor with this: The function body runs, and this points to the new blank object. Properties are stamped onto it.

  4. Return the object: JavaScript automatically returns this β€” the fully built object β€” even though you didn't write return.

Every function in JavaScript has a special property called prototype. When you use new, the object that gets created is quietly linked to that prototype. This is where JavaScript's inheritance magic lives.

Instead of giving every object its own copy of shared methods, we attach them to the prototype once, and all instances can use them:

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

// Shared method β€” lives on the prototype, not each object
Animal.prototype.speak = function() {
  console.log(`${this.name} makes a sound.`);
};

const cat = new Animal("Whiskers");
const dog = new Animal("Rex");

cat.speak(); // "Whiskers makes a sound."
dog.speak(); // "Rex makes a sound."

// Both share the SAME speak function
console.log(cat.speak === dog.speak); // true βœ“

πŸ”—Why does this matter?
If you have 1,000 animal instances and put speak inside the constructor, you create 1,000 copies of that function in memory. Putting it on the prototype means there's just one copy, shared by all. Huge win for performance.

When you call cat.speak(), JavaScript first looks for speak on the cat object itself. It doesn't find it there, so it walks up the prototype chain and finds it on Animal.prototype. This chain-walking is called prototype lookup.

5. Instances Created from Constructors

Each object created with new is called an instance. Instances are independent β€” changing one does not affect others:

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

const car1 = new Car("Toyota", 2020);
const car2 = new Car("Honda",  2022);

car1.brand = "Ford"; // only changes car1

console.log(car1.brand); // "Ford"
console.log(car2.brand); // "Honda"  ← unaffected

// Verify they are instances of Car
console.log(car1 instanceof Car); // true
console.log(car2 instanceof Car); // true

What happens without new?

Forgetting new is one of the most common beginner mistakes. Here's what goes wrong:

Feature With new Without new
Object Creation Fresh object is created No object is created
this Value Points to the new object Points to global / undefined
Prototype Linking Linked to constructor prototype No prototype link
Return Value Object is returned undefined is returned
function Person(name) {
  this.name = name;
}

const p1 = new Person("Alice");
console.log(p1.name); // "Alice" βœ“

const p2 = Person("Bob");  // ← forgot new!
console.log(p2);          // undefined βœ—
console.log(window.name);  // "Bob" β€” leaked to global!

Modern Syntax with Classes

Modern JavaScript introduced the class keyword, but don't be fooled β€” it's just cleaner syntax over the same constructor + prototype system. The new keyword works identically:

// Old way: constructor function
function Person(name) { this.name = name; }
Person.prototype.greet = function() { console.log(this.name); };

// New way: class syntax (same thing underneath!)
class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(this.name);
  }
}

const p = new Person("Alice"); // same new keyword!

Key Takeaways

  • newis an operator that runs a function in a special mode to produce a new object.

  • Constructor functions are regular functions named with a capital letter, designed to be called withnew.

  • Whennewruns, it creates an empty object, links its prototype, runs the constructor, then returns the object.

  • Instances share methods through the prototype chain β€” no unnecessary duplication in memory.

  • Forgettingnewis a common bug β€” the function runs, but no object is created or returned.

  • Modernclasssyntax is syntactic sugar β€” underneath, it's the same constructor + prototype system.