new, Constructor, instanceof and Instances

advanced
Published

December 10, 2024

JavaScript, being a prototype-based language, handles object creation and inheritance differently than class-based languages like Java or C++. Understanding concepts like new, constructors, instanceof, and instances is for mastering JavaScript’s object model. This post will break down these core concepts with clear explanations and examples.

The new Operator: Creating Objects

In JavaScript, the new operator is used to create instances of a constructor function. A constructor function is a special function whose primary purpose is to initialize the properties of a newly created object.

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

// Create a new Person object using the new operator
const person1 = new Person("Alice", 30);
console.log(person1); // Output: Person { name: 'Alice', age: 30 }

The new operator performs the following steps:

  1. Creates a new empty object.
  2. Sets the object’s this context to the new object.
  3. Executes the constructor function.
  4. Returns the new object.

If the constructor function doesn’t explicitly return an object, the new operator implicitly returns the newly created object.

Constructor Functions: Building Blocks of Objects

Constructor functions act as blueprints for creating objects. They define the properties and methods that instances of the object will have. Conventionally, constructor function names are capitalized.

function Dog(breed, color) {
  this.breed = breed;
  this.color = color;
  this.bark = function() {
    console.log("Woof!");
  };
}

const dog1 = new Dog("Golden Retriever", "Golden");
console.log(dog1.breed); // Output: Golden Retriever
dog1.bark(); // Output: Woof!

instanceof Operator: Checking Object Types

The instanceof operator checks if an object is an instance of a particular constructor function. It returns true if the object is an instance, and false otherwise.

console.log(person1 instanceof Person); // Output: true
console.log(dog1 instanceof Person);     // Output: false
console.log(dog1 instanceof Dog);       // Output: true

Instances: The Created Objects

Instances are the objects created using the new operator and a constructor function. Each instance represents a specific occurrence of the object defined by the constructor. They inherit properties and methods from their constructor.

In the examples above, person1 and dog1 are instances of the Person and Dog constructors, respectively. Each has its own unique values for its properties (name, age, breed, color).

Beyond Basic Constructors: Classes (ES6 and beyond)

While constructor functions are fundamental, ES6 introduced classes, providing a more syntactically familiar way to define objects. Classes are essentially syntactic sugar over constructor functions.

class Cat {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  meow() {
    console.log("Meow!");
  }
}

const cat1 = new Cat("Whiskers", 5);
console.log(cat1.name); // Output: Whiskers
cat1.meow(); // Output: Meow!

console.log(cat1 instanceof Cat); // Output: true

Understanding new, constructors, instanceof, and instances is fundamental to working effectively with objects in JavaScript. Whether you’re using traditional constructor functions or the more modern class syntax, these concepts remain central to JavaScript’s object-oriented programming capabilities.