Constructor Functions in JavaScript

JavaScript constructor functions are like blueprints for creating objects with similar properties and behaviours. They help organize and streamline the process of creating multiple instances of objects.

Understanding constructor functions is fundamental for building JavaScript applications because they provide a structured way to create and manage objects.

Approach 1:

One common way to define a constructor function is using the function keyword, like this: function Counter() {}. In this function, you can define properties and methods that all instances of the object will share.

// Define a constructor function named Counter
var Counter = function() {
    this.count = 0;
};

// Add a method named increment to the prototype of Counter
Counter.prototype.increment = function() {
    this.count++;
};

// Create an instance of Counter
var counter = new Counter();

// Use the increment method to increase the count
counter.increment();
counter.increment();

// Log the count
console.log(counter.count); // Output: 2

Approach 2:

A more modern approach is to use a variable and an anonymous function, like var Counter = function() {}. Both approaches achieve the same result.

// Define a constructor function named Counter
function Counter() {
    // Initialize count
    this.count = 0;
}

// Add a method to the Counter prototype
Counter.prototype.increment = function() {
    this.count++;
};

// Add a method to the Counter prototype
Counter.prototype.decrement = function() {
    this.count--;
};

// Create an instance of Counter
var counter = new Counter();

// Test the counter
console.log(counter.count); // Output: 0

// Increment the counter
counter.increment();
console.log(counter.count); // Output: 1

// Decrement the counter
counter.decrement();
console.log(counter.count); // Output: 0

Both approaches, function Counter() {} and var Counter = function() {}, serve the same purpose of defining a constructor function in JavaScript. However, there are some differences between them:

  1. Function Hoisting:
    • function Counter() {} is hoisted to the top of its scope. You can call Counter() anywhere in your code, even before the actual declaration of the function.
    • var Counter = function() {} is not hoisted in the same way. If you try to call Counter() before the assignment, you will get an error saying that Counter is not a function.
  2. Expression vs Declaration:
    • function Counter() {} is a function declaration. It is parsed and loaded before any code is executed, and it creates a function in the current scope.
    • var Counter = function() {} is a function expression. It is evaluated and assigned during runtime. This means that it is created when the execution reaches that line in the code.
  3. Clarity and Readability:
    • function Counter() {} is more explicit and clear, especially when defining named functions. It’s immediately clear that you’re defining a function named Counter.
    • var Counter = function() {} is sometimes used for anonymous functions or when you want to assign functions to variables dynamically.

In modern JavaScript, both approaches are still widely used, but the function declaration syntax (function Counter() {}) is generally preferred due to its clarity and hoisting behavior. However, the choice may vary depending on the specific requirements and coding style of the project.


Congratulations! Chapter Finished. Learn more about the similar topics:
Exercises & Assignments
No Content Found.
Interview Questions & Answers
No Content Found.