The new Keyword in JavaScript: A Simple Guide

If you have been writing JavaScript for a little while, you have probably created an object. Usually, we make objects using curly braces like this:

const user = {
  name: "Alice",
  age: 25
};

This is great if you only need one user. But what if you are building a game and need to create 100 players? Writing out curly braces 100 times would be incredibly boring and messy.

This is where Constructor Functions and the new keyword come to the rescue. Today, we are going to learn how they work together to act like a factory for your objects.

What is a Constructor Function?

A constructor function is basically a blueprint. It is a normal JavaScript function, but we use it to build objects. By tradition, developers always start the name of a constructor function with a Capital Letter so everyone knows it is a blueprint.

Here is a simple blueprint for a user:

function User(userName, userAge) {
  this.name = userName;
  this.age = userAge;
}

If we just run User("Bob", 30) like a normal function, it won't work the way we want. To make the factory work, we must use the magic word: new.

const playerOne = new User("Bob", 30);
console.log(playerOne.name); // Output: Bob

playerOne is now an instance created from the User constructor.

What Does the new Keyword Actually Do?

When you put the word new in front of a function call, JavaScript does a lot of heavy lifting for you behind the scenes. It follows a strict 4-step process:

1. Creates an empty box: It creates a brand new, empty object {}.

2. Sets up the prototype link: It connects this new object to the constructor function (we will talk more about this in a second).

3. Points this to the new object: It runs your constructor function, but it makes sure the this keyword points to the new empty object. So, when you say this.name = "Bob", it puts "Bob" inside the new object.

4. Returns the object: It automatically returns the finished object for you, even if you don't write return in your code!

Diagram: The Object Creation Flow

[ 'new' User("Bob", 30) ] 
         |
         |--> 1. Makes empty object: {}
         |--> 2. Links it to User blueprint
         |--> 3. Fills it up: { name: "Bob", age: 30 }
         |--> 4. Gives it back to you!
         |
    [ playerOne ]

How new Links Prototypes

Step 2 of the creation process is very special. When new creates your object, it creates a hidden link between your new object and the blueprint it came from. This hidden link is called the Prototype.

Why is this useful? Imagine you want all 100 of your players to have a sayHello function. If you put that function directly inside the constructor, JavaScript will copy that function 100 times, which wastes computer memory.

Instead, you can attach the function to the blueprint's prototype. Because of the hidden link that new created, all 100 players can share that single function!

// Adding a shared tool to the blueprint
User.prototype.sayHello = function() {
  console.log("Hi, I am " + this.name);
};

const playerTwo = new User("Sarah", 28);

// playerTwo doesn't own this function, but she can use it 
// because 'new' created a link to the prototype!
playerTwo.sayHello(); // Output: Hi, I am Sarah

Diagram: Prototype Linking Visual

[ The Instance ]                [ The Blueprint (Prototype) ]
  playerTwo         ======>       User.prototype
 { name: "Sarah",   hidden link   { sayHello: function() }
   age: 28 }                      

If JavaScript can't find sayHello inside playerTwo, it follows the hidden link to find it!

Conclusion

The new keyword is just a handy shortcut. It saves you from having to manually create objects, set up their properties, link their shared tools, and return them one by one.

Just remember: whenever you see new, JavaScript is building a brand new object using a blueprint, pointing this at the new object, and setting up a secret prototype link.