Mark Thomas Miller

ELI5: JavaScript constructors

When you’re first learning JavaScript, you’ll probably hear the term constructor. It can sound scary at first, but constructors are actually a very elegant and powerful tool that you can use to create multiple similar objects.

I’ll explain why this is helpful with a simple example. Let’s say you’re the head of a real estate development business, and you’re planning to build a 100-home community. You know that each house is going to have a lot in common with the others: each will have bedrooms, bathrooms, square footage, and a lot size.

If you wanted to express this via programming, defining 100 houses with 4 properties each might sound like a lot of typing (over 400 lines!) – but using a constructor can help you decrease your work dramatically.

In the example below, I create a constructor called House. I’ll explain exactly what’s happening afterwards.

// Step 1: Create a constructor.
var House = function(bed, bath, squareFt, lotSize) {
    this.bedrooms   = bed;
    this.bathrooms  = bath;
    this.squareFeet = squareFt;
    this.lotSize    = lotSize; 
};

// Step 2: Create an instance of the constructor.
var modernHouse = new House(3, 4, 3000, 6000);

// Step 3: Reference your variables.
alert(modernHouse.bedrooms); // 3

Tip: by convention, constructors are capitalized.

Let’s break down what’s happening:

  1. In step one, you haven’t built anything – you’ve just defined a few properties that are common across all of your houses. Think of this as creating a blueprint with your code.
  2. In step two, you actually build a house. In JavaScript’s terms, this is called creating an instance. It brings your variables into existence so you can actually work with them.
  3. Step three shows that you can use dot notation (modernHouse.bedrooms) to reference variables once you’ve created an instance.

Constructors are useful because they allow you to reuse your existing code to create additional instances of objects. For instance, we could easily create multiple houses in just a few lines.

var House = function(bed, bath, squareFt, lotSize) {
    this.bedrooms   = bed;
    this.bathrooms  = bath;
    this.squareFeet = squareFt;
    this.lotSize    = lotSize;
};

var modernHouse  = new House(3, 4, 3000, 6000);
var statelyHouse = new House(4, 3, 4000, 5000);
var rusticHouse  = new House(2, 2, 1500, 4000);
var largeHouse   = new House(6, 6, 6000, 7000);
var cottageHouse = new House(3, 4, 1000, 2000);

This is where the constructor’s power starts to shine: the last five lines of that code create twenty properties worth of houses. You can even contain functions inside constructors:

// Determine the price of a house based on its square footage.
var House = function(squareFt) {
    this.squareFt  = squareFt;
    this.price     = function() {
        return (200 * this.squareFt);
    }
};

var modernHouse = new House(3000);

console.log(modernHouse.price); // 600000

The power to leverage your existing code to do less work is the main benefit to using a constructor. To understand them better, try thinking through them with another example: for instance, if you’re making a video game, you might need to create multiple swords with randomly generated enchantments, attack power, and durability ratings. Or if you’re creating product listings, each item might need to have a name, calculated shipping cost, manufacturer, and weight.

If you find yourself repeating your code with multiple similar objects, chances are that you can use a constructor to tidy it up – and to actually do less legwork to achieve the same amount.