The New Keyword And The Function Object Duality

Automation is the heart of Object-Oriented Programming. We've manually created objects, manually set up prototype links, and manually handled context. It's a lot of work. To speed this up, JavaScript provides the new keyword.

The Essentials

Function-Object Duality: In JavaScript, every function is also an object.
The .prototype Object: Every function has an object property called prototype where shared methods should live.
Automation: The new keyword automates the creation, linking, and returning of objects.
Capitalization Convention: Functions intended for use with new are capitalized (e.g., UserCreator) to warn other developers.

ExpandAutomation of the new keyword

The "Two-Headed Monster"

To understand new, you must realize that functions are special. You can call them like a function, but you can also treat them like an object.

JavaScript

function multiplyBy2(num) {
  return num * 2;
}

multiplyBy2.stored = 5; // Adding a property to a function!

The Default Prototype

Every function object automatically comes with a property called prototype. This is just a regular, empty object. When we use new, JavaScript expects to find our shared functions in this specific "bucket."

Solution 3: The `new` Keyword

When we put new in front of a function call, it intercedes and performs four major steps automatically:

JavaScript

function UserCreator(name, score) {
  this.name = name;
  this.score = score;
}

UserCreator.prototype.increment = function() {
  this.score++;
};

const user1 = new UserCreator("Denver", 3);

What `new` does under the hood:

Create this: It creates a brand new empty object and labels it this inside the function.
Link the Prototype: It sets the hidden [[Prototype]] link of that new object to the function's .prototype object.
Execute: It runs your code (e.g., this.name = name).
Return: It automatically returns the this object.

JavaScript Execution Engine

Thread of Execution

1function UserCreator(name, score) {

2 this.name = name;

3 this.score = score;

5UserCreator.prototype.increment = f;

6const user1 = new UserCreator('Denver', 3);

Step 1:We store the shared method in the function's 'object' side under .prototype.

Memory

UserCreator{ prototype: { increment: f } }

Call Stack

Global

Bottom of Stack

The Danger: Forgetting `new`

If you call UserCreator("Denver", 3) without the new keyword:

No object is created.
this defaults to window.
You accidentally create window.name and window.score.
The function returns undefined.

This is why the uppercase convention (UserCreator) is so important: it is a signal to your team that this function requires the new keyword to behave correctly.

But even with new, the syntax of adding methods to .prototype feels a bit disjointed. In the next part, we'll see how ES6 Classes wrap all of this into one clean, modern structure.

The New Keyword And The Function Object Duality

The Essentials

The "Two-Headed Monster"

The Default Prototype

Solution 3: The new Keyword

What new does under the hood:

The Danger: Forgetting new

Further Reading and Watching

Solution 3: The `new` Keyword

What `new` does under the hood:

The Danger: Forgetting `new`