The new Keyword in JavaScript

JavaScript is a powerful language that allows developers to create objects in multiple ways. One of the most important concepts for object creation is the new keyword. Understanding how new works will help you grasp constructor functions, prototypes, and object-oriented programming in JavaScript.

Let’s explore this concept step by step.

---

1. What is the new Keyword?

The new keyword is used to create an instance of an object from a constructor function. It allows us to generate multiple objects with similar properties and behaviors.

Example

function Person(name, age) {
  this.name = name;
  this.age = age;
}

const person1 = new Person("Radhika", 21);
console.log(person1);

Output:

Person { name: "Radhika", age: 21 }

Here, new Person() creates a new object using the Person constructor.

---

2. What Are Constructor Functions?

A constructor function is a regular JavaScript function used to create objects. By convention, constructor names start with a capital letter.

Example

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

const car1 = new Car("Toyota", "Corolla");
const car2 = new Car("Honda", "City");

console.log(car1);
console.log(car2);

Key Points

• Constructors define the blueprint for objects.

• this refers to the newly created object.

• Multiple instances can be created with different values.

---

3. Object Creation Process Using new

When the new keyword is used, JavaScript performs the following steps:

1. Create a New Empty Object

const obj= {};

2. Link the Object to Prototype

obj.__proto__ = ConstructorFunction.prototype;

3. Bind this to the New Object

• The constructor function is executed with this referring to the new object.

4. Return the Object

• If the constructor does not explicitly return an object, the newly created object is returned automatically.

Visual Flow

Constructor Function
        │
        ▼
   new Keyword
        │
        ▼
Create Empty Object
        │
        ▼
Link to Prototype
        │
        ▼
Bind this & Execute Constructor
        │
        ▼
Return Instance

---

4. How new Links Prototypes

Every JavaScript function has a prototype property. When an object is created using new, it gets access to properties and methods defined on the constructor’s prototype.

Example

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

// Adding a method to the prototype
Person.prototype.greet = function () {
  return `Hello, my name is ${this.name}`;
};

const person1 = new Person("Radhika");
console.log(person1.greet()); // Hello, my name is Radhika

Prototype Relationship

console.log(person1.__proto__ === Person.prototype); // true
console.log(person1 instanceof Person); // true

Prototype Linking Visual

person1 ----> Person.prototype ----> Object.prototype ----> null

---

5. Instances Created from Constructors

Objects created using a constructor function are called instances. Each instance has:

• Its own properties (defined inside the constructor).

• Shared methods (defined on the prototype).

Example

function Student(name, grade) {
  this.name = name;
  this.grade = grade;
}

Student.prototype.study = function () {
  return `${this.name} is studying.`;
};

const student1 = new Student("Amit", "A");
const student2 = new Student("Neha", "B");

console.log(student1.study());
console.log(student2.study());

Why Use Prototypes?

If methods are defined inside the constructor, each instance gets its own copy, which wastes memory. Using prototypes ensures that all instances share the same method.

// ❌ Inefficient
function Animal(name) {
  this.name = name;
  this.sound = function () {
    return `${this.name} makes a sound`;
  };
}

// ✅ Efficient
function Animal(name) {
  this.name = name;
}

Animal.prototype.sound = function () {
  return `${this.name} makes a sound`;
};

---

6. What Happens If a Constructor Returns a Value?

• If a primitive is returned, it is ignored.

• If an object is returned, it replaces the newly created instance.

function Test() {
  this.value = 10;
  return { value: 20 };
}

const t = new Test();
console.log(t.value); // 20

---

7. Simulating the new Keyword

Understanding new becomes easier by recreating it manually.

function myNew(Constructor, ...args) {
  // Step 1: Create a new object
  const obj = {};

  // Step 2: Link prototype
  Object.setPrototypeOf(obj, Constructor.prototype);

  // Step 3: Bind this and execute constructor
  const result = Constructor.apply(obj, args);

  // Step 4: Return object
  return result instanceof Object ? result : obj;
}

Usage

const person2 = myNew(Person, "Radhika");
console.log(person2.greet());

---

8. new with ES6 Classes

ES6 introduced classes, which are syntactic sugar over constructor functions. The new keyword is still required.

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hello, I am ${this.name}`;
  }
}

const person1 = new Person("Radhika", 21);
console.log(person1.greet());

Key Differences

Feature	Constructor Function	ES6 Class
Syntax	Function-based	Cleaner, class-based
Hoisting	Yes	No
new Required	Yes	Yes
Strict Mode	Optional	Always

---

9. Common Mistake: Forgetting new

If you forget to use new, this may refer to the global object (or be undefined in strict mode).

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

const person = Person("Radhika"); // Missing `new`
console.log(person); // undefined

Fix

function Person(name) {
  if (!(this instanceof Person)) {
    return new Person(name);
  }
  this.name = name;
}

---

Visual Representation :

Constructor → Instance Flow

new Person("Radhika")
        │
        ▼
  [New Object Created]
        │
        ▼
Linked to Person.prototype
        │
        ▼
Constructor Executes
        │
        ▼
     Instance

Prototype Chain Visualization

Instance → Constructor.prototype → Object.prototype → null

---

Final Thoughts

Mastering the new keyword is essential for understanding JavaScript’s object-oriented nature. Once you grasp how it works behind the scenes, concepts like prototypes, inheritance, and classes become much easier to understand.

Thank you for reading this blog. I am open to feedback and suggestion.