The new Keywordin JavaScript
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:
newis 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:
Create a blank object: JavaScript silently creates a fresh, empty object:
{}. This will become your instance.Link to the prototype: The new object's internal
[[Prototype]]is set toPerson.prototype, so it can inherit shared methods.Run the constructor with
this: The function body runs, andthispoints to the new blank object. Properties are stamped onto it.Return the object: JavaScript automatically returns
thisβ the fully built object β even though you didn't writereturn.
4. How new Links Prototypes
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 putspeakinside 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 with
new.When
newruns, 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.
Forgetting
newis a common bug β the function runs, but no object is created or returned.Modern
classsyntax is syntactic sugar β underneath, it's the same constructor + prototype system.