Constructors in classes in Javascript - Deep Dive

Overview - Constructors in classes

What is it?

A constructor is a special function inside a JavaScript class that runs automatically when you create a new object from that class. It sets up the new object by giving it initial values or preparing it to work properly. Think of it as the setup step that happens behind the scenes when you make something new from a blueprint.

Why it matters

Without constructors, every time you create a new object, you'd have to manually set up its properties and values, which is repetitive and error-prone. Constructors make object creation easy, consistent, and less buggy by automating the setup. This saves time and helps programs run smoothly, especially when many objects are created.

Where it fits

Before learning constructors, you should understand what classes and objects are in JavaScript. After mastering constructors, you can learn about inheritance, method overriding, and advanced class features like static methods and private fields.

Mental Model

Core Idea

A constructor is the automatic setup function that prepares each new object created from a class with its own starting values.

Think of it like...

Imagine buying a new phone: the constructor is like the initial setup wizard that runs when you turn it on for the first time, helping you set your preferences and get it ready to use.

Class MyClass
┌───────────────┐
│ constructor() │  ← runs automatically when new object is made
└──────┬────────┘
       │
       ▼
  Sets initial properties
       │
       ▼
  New object ready to use

Build-Up - 7 Steps

1

Foundation

What is a constructor in classes

Concept: Introduces the idea of a constructor as a special method inside a class.

In JavaScript, a class can have a method named 'constructor'. This method runs automatically when you create a new object using 'new'. It usually sets up properties for the new object. Example: class Person { constructor(name) { this.name = name; } } const p = new Person('Alice'); console.log(p.name); // Alice

Result

When you create a new Person with 'new Person("Alice")', the constructor runs and sets the 'name' property to 'Alice'.

Understanding that the constructor runs automatically helps you see how objects get their starting values without extra code.

2

Foundation

Using 'this' inside constructors

Concept: Shows how 'this' refers to the new object being created inside the constructor.

Inside the constructor, 'this' means the new object that is being made. You can add properties to 'this' to give the object its own data. Example: class Car { constructor(color) { this.color = color; } } const myCar = new Car('red'); console.log(myCar.color); // red

Result

'this.color' sets the color property on the new Car object, so 'myCar.color' is 'red'.

Knowing that 'this' points to the new object lets you customize each object with its own unique data.

3

Intermediate

Constructor parameters for customization

🤔Before reading on: do you think constructors can take multiple parameters or just one? Commit to your answer.

Concept: Explains how constructors can accept multiple inputs to set up different properties.

Constructors can take many parameters to set up various properties of the new object. Example: class Book { constructor(title, author, year) { this.title = title; this.author = author; this.year = year; } } const myBook = new Book('1984', 'George Orwell', 1949); console.log(myBook.title); // 1984 console.log(myBook.author); // George Orwell console.log(myBook.year); // 1949

Result

The new Book object has all three properties set from the constructor parameters.

Understanding that constructors can take multiple inputs lets you create rich, customized objects easily.

4

Intermediate

Default values in constructors

🤔Before reading on: do you think constructors can provide default values if no argument is given? Commit to your answer.

Concept: Shows how to give default values to constructor parameters to handle missing inputs.

You can assign default values to parameters so the object still gets meaningful data if some inputs are missing. Example: class User { constructor(name = 'Guest', age = 18) { this.name = name; this.age = age; } } const user1 = new User(); const user2 = new User('Bob', 25); console.log(user1.name, user1.age); // Guest 18 console.log(user2.name, user2.age); // Bob 25

Result

Objects created without arguments get default values; those with arguments get those values.

Knowing how to use defaults makes your constructors flexible and prevents errors from missing data.

5

Intermediate

Constructor behavior without explicit constructor

Concept: Explains what happens if a class has no constructor method defined.

If you don't write a constructor in a class, JavaScript provides a default one that does nothing but create the object. Example: class Animal {} const a = new Animal(); console.log(a); // Animal {} (empty object) This means you can create objects even without a constructor, but they won't have custom properties.

Result

Objects are created but have no special properties unless you add them later.

Understanding the default constructor helps you know when you need to write your own to set up objects properly.

6

Advanced

Constructor return behavior and pitfalls

🤔Before reading on: do you think a constructor can return a different object than 'this'? Commit to your answer.

Concept: Explores what happens if a constructor explicitly returns an object or a primitive value.

Normally, constructors don't return anything; they just set up 'this'. But if you return an object explicitly, that object replaces the new instance. Example: class Example { constructor() { this.value = 1; return { value: 2 }; } } const e = new Example(); console.log(e.value); // 2 If you return a primitive like a number or string, it is ignored and 'this' is returned instead. Example: class Example2 { constructor() { this.value = 1; return 5; } } const e2 = new Example2(); console.log(e2.value); // 1

Result

Returning an object replaces the new instance; returning primitives does not.

Knowing this prevents bugs where your constructor returns unexpected objects, breaking assumptions about your class.

7

Expert

Constructor in inheritance and super() calls

🤔Before reading on: do you think a subclass constructor can run without calling super()? Commit to your answer.

Concept: Details how constructors work with class inheritance and the role of super() to call the parent constructor.

When a class extends another, its constructor must call super() before using 'this'. This runs the parent class constructor to set up inherited properties. Example: class Parent { constructor(name) { this.name = name; } } class Child extends Parent { constructor(name, age) { super(name); // call parent constructor this.age = age; } } const c = new Child('Anna', 10); console.log(c.name); // Anna console.log(c.age); // 10 If you omit super(), JavaScript throws an error because 'this' is not initialized.

Result

Subclass constructors must call super() to properly create the object and avoid errors.

Understanding super() is key to mastering inheritance and avoiding common runtime errors in subclass constructors.

Under the Hood

When you use 'new ClassName()', JavaScript creates a fresh empty object. It then sets the object's internal link to the class's prototype. Next, it runs the constructor method with 'this' bound to the new object. The constructor sets up properties on 'this'. Finally, the new object is returned unless the constructor explicitly returns another object.

Why designed this way?

This design follows classical object-oriented patterns, making object creation predictable and consistent. The automatic constructor call ensures every object starts properly initialized. Allowing constructors to return objects offers flexibility but is rarely used, preserving the common pattern of 'new' creating an instance of the class.

new ClassName() call
    │
    ▼
┌─────────────────────┐
│ Create empty object  │
│ Set prototype link   │
└─────────┬───────────┘
          │
          ▼
┌─────────────────────┐
│ Run constructor(this)│
│ Set properties on   │
│ 'this'              │
└─────────┬───────────┘
          │
          ▼
┌─────────────────────┐
│ Return 'this' or    │
│ returned object     │
└─────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does omitting super() in a subclass constructor still allow 'this' to be used safely? Commit yes or no.

Common Belief: You can use 'this' in a subclass constructor without calling super() first.

Reality: JavaScript throws a ReferenceError if you try to use 'this' before calling super() in a subclass constructor.

Why it matters: Ignoring this causes runtime errors that stop your program, confusing beginners who expect 'this' to be ready immediately.

Quick: Does a constructor always return the new object created by 'new'? Commit yes or no.

Common Belief: Constructors always return the new instance created by 'new'.

Reality: If a constructor explicitly returns an object, that object replaces the new instance. Returning primitives is ignored.

Why it matters: This can cause unexpected behavior if you accidentally return an object, breaking assumptions about your class instances.

Quick: If a class has no constructor, does JavaScript prevent creating objects from it? Commit yes or no.

Common Belief: A class without a constructor cannot create objects.

Reality: JavaScript provides a default empty constructor if none is defined, allowing object creation.

Why it matters: This helps beginners understand that constructors are optional but needed for custom setup.

Quick: Can constructor parameters be omitted without errors if no defaults are set? Commit yes or no.

Common Belief: You can omit constructor parameters even if no default values are provided, and the object will still have meaningful properties.

Reality: Omitting parameters without defaults results in properties being set to undefined, which can cause bugs.

Why it matters: Knowing this prevents silent bugs where objects have missing or undefined data.

Expert Zone

1

Constructors can be async functions in some JavaScript proposals, but currently, they cannot be async, which limits asynchronous setup inside constructors.

2

Using private fields with constructors requires understanding that private fields must be declared before use, and constructors are the place to initialize them safely.

3

The behavior of constructors with proxies or Reflect.construct can alter how 'new' and constructors behave, which is important in advanced metaprogramming.

When NOT to use

Avoid putting heavy or asynchronous initialization inside constructors because constructors must return quickly and cannot be async. Instead, use separate async initialization methods. Also, for simple data containers, consider factory functions if you don't need class features.

Production Patterns

In real-world code, constructors often validate input parameters, set default values, and initialize private fields. They are also used with dependency injection to provide objects with needed services. Inheritance chains carefully call super() to ensure all layers initialize correctly.

Connections

Factory functions

alternative pattern

Understanding constructors helps compare them with factory functions, which create objects without classes, showing different ways to build objects.

Object prototypes

builds-on

Constructors set up objects linked to prototypes, so knowing prototypes clarifies how methods and inheritance work with constructed objects.

Initialization in hardware devices

similar pattern

Just like constructors initialize software objects, hardware devices run startup routines to prepare themselves, showing a universal pattern of setup before use.

Common Pitfalls

#1 Forgetting to call super() in subclass constructor

Wrong approach:

class Child extends Parent {
constructor() {
this.value = 5; // Error: 'this' used before super()
}
}

Correct approach:

class Child extends Parent {
constructor() {
super();
this.value = 5;
}
}

Root cause:

Misunderstanding that subclass constructors must call super() before accessing 'this' because the parent constructor sets up the object.

#2 Returning a primitive value from constructor expecting it to replace the object

Wrong approach:

class Example {
constructor() {
return 42; // ignored
}
}
const e = new Example();
console.log(e); // Example instance, not 42

Correct approach:

class Example {
constructor() {
// no return or return an object
}
}

Root cause:

Confusing that only returning an object replaces the new instance; primitives are ignored.

#3 Not providing default values and omitting constructor arguments

Wrong approach:

class User {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
const u = new User();
console.log(u.name); // undefined

Correct approach:

class User {
constructor(name = 'Guest', age = 18) {
this.name = name;
this.age = age;
}
}

Root cause:

Not anticipating missing arguments leads to undefined properties and bugs.

Key Takeaways

Constructors are special methods in classes that automatically run to set up new objects with initial values.

Inside constructors, 'this' refers to the new object being created, allowing you to add properties to it.

Constructors can take parameters, including defaults, to customize each object easily and safely.

In subclasses, calling super() in the constructor is mandatory before using 'this' to ensure proper initialization.

Returning an object from a constructor replaces the new instance, but returning primitives does not, which can cause subtle bugs.