DEV Community

Cover image for Understanding Constructor Functions
Doumbouyah DEV
Doumbouyah DEV

Posted on

Understanding Constructor Functions

A constructor function is a special type of function used to create and initialize objects in programming, particularly in object-oriented languages like JavaScript. Think of it as a blueprint or factory for making many similar objects.

Real-World Analogy

Imagine you're managing a car manufacturing company. Every car you build shares the same structureโ€”engine, wheels, color, and brandโ€”but each one has its own values.

Instead of manually building each car from scratch, you use a car-making machine (constructor function). You input values like color, brand, and engine size, and the machine builds the car for you.

Basic Syntax in JavaScript

function Car(brand, color, engineSize) {
  this.brand = brand;
  this.color = color;
  this.engineSize = engineSize;
}
Enter fullscreen mode Exit fullscreen mode

This is the constructor function. To create a car:

let car1 = new Car("Toyota", "Red", "2.0L");
let car2 = new Car("Honda", "Blue", "1.8L");

console.log(car1.brand); // Toyota
console.log(car2.color); // Blue
Enter fullscreen mode Exit fullscreen mode

Notice the use of the new keywordโ€”it tells JavaScript to:

  1. Create a new object.

  2. Set the prototype.

  3. Bind this to the new object.

  4. Return the object.

Tips & Tricks

๐Ÿ‘Œ๐Ÿฟ1 Always Use Capital Letters for Constructor Names

By convention, constructor functions start with capital letters.

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘Œ๐Ÿฟ2 Use Prototypes to Share Methods

Defining methods inside the constructor creates a new copy of the method for each object. Use prototypes instead:

Person.prototype.greet = function() {
  console.log("Hello, my name is " + this.name);
};
Enter fullscreen mode Exit fullscreen mode

Why? Saves memory. All objects share the same method definition.

๐Ÿ‘Œ๐Ÿฟ3 Avoid Arrow Functions for Methods Using this

Arrow functions donโ€™t bind this to the object instance.

Wrong:

Person.prototype.greet = () => {
  console.log("Hi " + this.name); // `this` won't work here
};
Enter fullscreen mode Exit fullscreen mode

Correct:

Person.prototype.greet = function() {
  console.log("Hi " + this.name);
};
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘Œ๐Ÿฟ4 Constructor Validation

You can include checks inside the constructor to validate inputs.

function Product(name, price) {
  if (!name || price < 0) {
    throw new Error("Invalid product data.");
  }
  this.name = name;
  this.price = price;
}
Enter fullscreen mode Exit fullscreen mode

Practical Use Cases

๐Ÿ‘Œ๐Ÿฟ1 Creating Multiple Users in a Web App

function User(username, role) {
  this.username = username;
  this.role = role;
}


let admin = new User("solomon", "admin");
let guest = new User("visitor", "guest");

Useful for managing different user roles.

Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘Œ๐Ÿฟ2 Building a Task Manager App

function Task(title, deadline) {
  this.title = title;
  this.deadline = deadline;
  this.completed = false;
}

Task.prototype.markComplete = function() {
  this.completed = true;
};

let task1 = new Task("Submit assignment", "2025-05-15");
task1.markComplete();
Enter fullscreen mode Exit fullscreen mode

๐Ÿ‘Œ๐Ÿฟ3 Inventory System for a Store

function Item(name, stock) {
  this.name = name;
  this.stock = stock;
}

Item.prototype.sell = function(quantity) {
  if (this.stock >= quantity) {
    this.stock -= quantity;
    console.log(quantity + " sold!");
  } else {
    console.log("Not enough stock.");
  }
};

let rice = new Item("Bag of Rice", 50);
rice.sell(10); // 10 sold!
Enter fullscreen mode Exit fullscreen mode

Advanced Tip: Object.create() vs Constructor Functions

You can also create objects using Object.create() but constructor functions with new provide a cleaner structure when creating many similar objects.

Top comments (0)