"new" Keyword in JavaScript

The new keyword is used to create instances of both user-defined objects and built-in object types that have constructor functions.

Creating Instances of User-Defined Objects

Example 1: Creating a Person Object

Let's start with an example of creating an instance of a user-defined object using the new keyword:

function Person(name, age, sex) {
  this.name = name;
  this.age = age;
  this.sex = sex;
}
 
var p1 = new Person("Deepak", 24, "Male");
 
console.log(p1.name);             // "Deepak"
console.log(p1.age);              // 24
console.log(p1.sex);              // "Male"

In this example, we define a constructor function Person and use it with the new keyword to create a new p1 object. The new keyword initializes the object's properties and assigns values.

Creating Instances of Built-In Object Types

Example 2: Creating a Date Object

The new keyword is not limited to user-defined objects; it can also create instances of built-in object types that have constructor functions. Here's an example using the Date object:

var obj = new Date();
 
var todayDate = obj.getDate();
 
console.log(todayDate);

In this case, we use the new keyword to create a new Date object named obj, allowing us to work with date-related methods and properties.

The this value with the new keyword

When a function is used as a constructor with the new keyword, its this keyword is bound to the new object being constructed. This is a fundamental aspect of constructor functions. Consider the following example:

function ConstructorFun() {
  this.age = 32;
}
 
var obj = new ConstructorFun();
 
console.log(obj.age);           // 32

In this example, the constructor function ConstructorFun initializes the property age on the newly created object obj. The this keyword refers to the object being constructed.

Questions

Q1's "undefined" and Q3's "undefined" answers assume a non-strict / classic script context. In strict mode (and ES modules, which are strict by default), the bare-function calls would see this as undefined and would throw TypeError instead.

1. What is the output of the following program?

function Person(name) {
  this.name = name;
  this.getName = function () {
    return this.name;
  };
}
 
const person1 = new Person('Deepak');
console.log(person1.getName());
 
const { getName } = person1;
console.log(getName());

Answer:

Deepak
undefined

Explanation: In this program, we define a Person constructor function and create an instance person1. When we call person1.getName(), it correctly returns "Deepak" because the this keyword within the function refers to the person1 object. However, when we extract the getName function and call it separately, it loses its context, resulting in undefined.

2. What is the output of the following program?

function Person(name) {
  this.name = name;
  this.getName = () => {
    return this.name;
  };
}
 
const person1 = new Person('Deepak');
console.log(person1.getName());
 
const { getName } = person1;
console.log(getName());

Answer:

Deepak
Deepak

Explanation: Here getName is defined using an arrow function, which captures this from its enclosing scope — the Person constructor call. Because that constructor was invoked with new, the captured this is the newly created person1 instance. Even when we extract getName and call it standalone, the arrow's this is still bound to person1, so it correctly returns "Deepak" both times.

3. What is the output of the following program?

function Dog(name) {
  this.name = name;
}
 
const myDog = new Dog("Buddy");
console.log(myDog.name);
 
const notMyDog = Dog("Max");
console.log(notMyDog);

Answer:

Buddy
undefined

Explanation: In this program, we have a Dog constructor function. When we use new Dog("Buddy"), it correctly creates a new instance of Dog, setting the name property to "Buddy". However, when we call Dog("Max") without new, it operates in the global context, modifying the global object (a side effect: window.name becomes "Max" in a browser script), and notMyDog is undefined because Dog doesn't return anything explicitly.

4. What is the output of the following program?

function Fruit(name) {
  this.name = name;
}
 
const apple = new Fruit("Apple");
 
console.log(apple.constructor === Fruit);

Answer — true

Explanation: When we create apple using new Fruit(...), it gets Fruit.prototype as its prototype. By default, Fruit.prototype.constructor points back to Fruit, so apple.constructor (resolved via the prototype chain) is Fruit — and the strict-equality check returns true.