The `new` Keyword in JavaScript

Welcome back to our JavaScript series! In this #36 installment, we're diving deep into a fundamental and often misunderstood keyword: new. The new keyword is crucial for object-oriented programming in JavaScript, particularly when working with constructor functions and, more recently, ES6 classes. It's the mechanism that allows us to create instances of custom objects, each with its own properties and methods inherited from a common blueprint.

Understanding new is key to grasping how objects are instantiated and how the this context behaves in these scenarios. Let's break it down.

What Does the `new` Keyword Do?

When you invoke a function using the new keyword, it doesn't just call the function; it transforms it into a constructor call. This process involves several critical steps behind the scenes:

1. A New Empty Object is Created: JavaScript creates a brand-new, empty plain JavaScript object.
2. Prototype Linkage: The newly created object's internal [[Prototype]] (which JavaScript exposes via the __proto__ property or Object.getPrototypeOf()) is linked to the prototype property of the constructor function that was called. This establishes the inheritance chain.
3. `this` Binding: The this context inside the constructor function is bound to this newly created object. This means any properties or methods assigned to this within the constructor will become properties/methods of the new object.
4. Constructor Function Execution: The constructor function is executed with the this context set to the new object. Any arguments passed to new are forwarded to the constructor function.
5. Object Return:
   • If the constructor function does not explicitly return an object (i.e., it returns a primitive value or nothing at all), the newly created object from step 1 is returned by default.
   • If the constructor function does explicitly return an object, that object is returned instead of the one created in step 1. This is an important edge case to remember.

Constructor Functions: The Blueprints for Objects

Before ES6 classes, constructor functions were the primary way to define blueprints for creating multiple similar objects. A constructor function is essentially a regular JavaScript function that is intended to be called with new. By convention, constructor function names start with a capital letter (e.g., Person, Car).

Let's look at a basic constructor function:

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  };
}

// Creating instances (objects) using the new keyword
const person1 = new Person('Alice', 30);
const person2 = new Person('Bob', 25);

person1.greet(); // Output: Hello, my name is Alice and I am 30 years old.
person2.greet(); // Output: Hello, my name is Bob and I am 25 years old.

console.log(person1 instanceof Person); // Output: true
console.log(person2 instanceof Person); // Output: true

In this example:

• Person is our constructor function.
• When we call new Person('Alice', 30), JavaScript performs the steps outlined above.
• A new object is created.
• this inside Person refers to that new object.
• this.name = 'Alice' and this.age = 30 add properties to the new object.
• this.greet = function() { ... } adds a method to the new object.
• Finally, the new object (person1) is returned.

Improving Constructor Functions with Prototypes

While the above works, defining methods directly on this inside the constructor means each instance gets its own copy of the method. For many instances, this can be memory inefficient. A better approach is to place methods on the constructor's prototype property, making them shared by all instances through the prototype chain:

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

// Add methods to the prototype
Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const person3 = new Person('Charlie', 40);
person3.greet(); // Output: Hello, my name is Charlie and I am 40 years old.

const person4 = new Person('Diana', 35);
person4.greet(); // Output: Hello, my name is Diana and I am 35 years old.

// Both instances share the same greet method via the prototype chain
console.log(person3.greet === person4.greet); // Output: true

When person3.greet() is called, JavaScript first looks for greet on person3 itself. It doesn't find it. Then it looks up the prototype chain to Person.prototype, where it finds the greet method and executes it, with this correctly bound to person3.

The `this` Context with `new`

One of the most crucial aspects of new is how it manages the this binding. When a function is called with new, the this context inside that function is automatically set to the newly created object. This is distinct from a regular function call where this might refer to the global object (window in browsers, global in Node.js) or be undefined in strict mode.

function MyFunction() {
  console.log(this); // When called with new, this will be the new instance
  this.value = 10;
}

const obj = new MyFunction(); // Output: MyFunction {} (or similar empty object)
console.log(obj.value);      // Output: 10

// Compare with a regular call
MyFunction(); // Output: Window object (in browser non-strict mode) or undefined (in strict mode)
// console.log(value); // This would try to access a global 'value'

This automatic binding of this to the new instance is what makes constructor functions effective for initializing object properties.

Return Values from Constructor Functions

As mentioned in the steps, the return behavior of constructor functions has a subtle but important rule:

1. Default Behavior (Returning Primitives or Nothing)

If your constructor function doesn't explicitly return an object, or if it returns a primitive value (like a number, string, boolean, null, or undefined), the new keyword will ensure that the newly created object (from step 1) is returned.

function ConstructorA() {
  this.property = 'A';
  return 5; // Returning a primitive
}

const objA = new ConstructorA();
console.log(objA);         // Output: ConstructorA { property: 'A' }
console.log(objA.property); // Output: A

function ConstructorB() {
  this.property = 'B';
  // No explicit return
}

const objB = new ConstructorB();
console.log(objB);         // Output: ConstructorB { property: 'B' }
console.log(objB.property); // Output: B

2. Explicitly Returning an Object

If your constructor function explicitly returns an object (a plain object, an array, a function, or another instance of a class/constructor), then that explicitly returned object will be the result of the new expression, effectively overriding the object that new initially created.

function ConstructorC() {
  this.property = 'C';
  return { customProperty: 'Hello' }; // Returning a new object
}

const objC = new ConstructorC();
console.log(objC);           // Output: { customProperty: 'Hello' }
console.log(objC.property);  // Output: undefined (the original 'this.property' was discarded)
console.log(objC.customProperty); // Output: Hello

function ConstructorD() {
  this.property = 'D';
  const arr = [1, 2, 3];
  return arr; // Returning an array (which is an object)
}

const objD = new ConstructorD();
console.log(objD);           // Output: [1, 2, 3]
console.log(objD instanceof ConstructorD); // Output: false

This behavior is rarely used intentionally in well-structured code but is important to be aware of for debugging or understanding unusual patterns.

`new` with ES6 Classes

With the introduction of ES6, JavaScript gained a more familiar syntax for object-oriented programming: classes. However, it's crucial to remember that ES6 classes are primarily syntactic sugar over constructor functions and prototypes. The new keyword is still fundamental for instantiating objects from classes.

class Dog {
  constructor(name, breed) {
    this.name = name;
    this.breed = breed;
  }

  bark() {
    console.log(`${this.name} barks! Woof!`);
  }
}

const myDog = new Dog('Buddy', 'Golden Retriever');
myDog.bark(); // Output: Buddy barks! Woof!

console.log(myDog instanceof Dog); // Output: true

Here, the constructor method within the class acts exactly like a constructor function, and new performs the same object creation and initialization steps.

Pitfalls and Best Practices

• Forgetting `new`: Calling a constructor function without new will execute it as a regular function. This often leads to this binding to the global object (in non-strict mode) or causing errors (in strict mode), assigning properties to the wrong context, and not returning an instance of the intended object.

  function Person(name) {
            this.name = name;
          }
          const p = Person('Eve'); // Forgetting new
          console.log(p);          // Output: undefined (no object returned)
          console.log(window.name); // Output: Eve (if in browser, non-strict mode)
          

  To mitigate this, you can add a check inside your constructor or use ES6 classes which enforce new.

• Arrow Functions as Constructors: Arrow functions cannot be used as constructors with new. They do not have their own this context (they lexically bind this from their surrounding scope), they do not have a prototype property, and they are not suitable for `new` invocation. Attempting to use new with an arrow function will throw a TypeError.
• `new` for Primitive Wrappers: While you can use new String(), new Number(), or new Boolean(), it's generally discouraged. These create object wrappers around primitive values, which behave differently than the primitives themselves and can lead to unexpected type comparisons.

  const num1 = 5;
          const num2 = new Number(5);
  
          console.log(typeof num1); // Output: "number"
          console.log(typeof num2); // Output: "object"
          console.log(num1 === num2); // Output: false (primitive vs object)
          console.log(num1 == num2);  // Output: true (loose equality converts object to primitive)
          

  Stick to primitive literals (e.g., 5, "hello", true) unless you have a very specific reason to create object wrappers.

Conclusion

The new keyword is a cornerstone of object instantiation in JavaScript, whether you're working with traditional constructor functions or modern ES6 classes. It orchestrates the creation of a new object, establishes its prototype chain for inheritance, correctly binds the this context, and ensures the proper return of the newly formed instance. A solid understanding of new empowers you to build robust and scalable object-oriented applications in JavaScript.