What does a JavaScript constructor return?

JavaScript, Function, Class, Object · Jun 12, 2021

The constructor method is a special method of a class for creating and initializing an object of that class. However, there is a little bit of magic involved around it, especially when it comes to its return value. This magic is nothing really complicated, but it seems to often confuse developers.

Typically, when your constructor is invoked with new, an object is created, its constructor is assigned to the invoked constructor and the object is then assigned to this before executing any operations specified in your constructor method. Once the code is executed, the constructor will return:

  • Any valid return value, valid being only object values.
  • The this object if there is no return statement executed with a valid value.

Let's look at some examples to better understand what's going on:

class SimpleClass {
  constructor() {
    this.val = 0;
  }
}
new SimpleClass(); // { val: 0 }

class MyClass {
  constructor() {
    this.val = 0;
    return { a: 1, b: 2 };
  }
}
new MyClass(); // { a: 1, b : 2 }

The first example above shows the default behavior of a constructor, returning its this object if nothing else is specified. And the second one shows how a constructor can return an object different from this, using return. Note here that the use-case for such a constructor is usually a class which is implemented as a singleton or manages the number of its instances or similar.

class VerboseClass {
  constructor() {
    this.val = 0;
    return this;
  }
}
new VerboseClass(); // { val: 0 }

class PrimClass {
  constructor() {
    this.val = 0;
    return 20;
  }
}
new PrimitiveClass();  // { val: 0 }

The two examples above are not optimal, each for a different reason. The first one is too verbose, as the this object is returned implicitly by the constructor anyways, so there is no reason to explicitly write return this. On the other hand, the second example doesn't return the return statement's value, as it isn't an object, therefore resulting in the constructor returning the this object instead. This might lead to a lot of confusion, so you should definitely avoid it.

Written by Angelos Chalaris

I'm Angelos Chalaris, a JavaScript software engineer, based in Athens, Greece. The best snippets from my coding adventures are published here to help others learn to code.

If you want to keep in touch, follow me on GitHub or Twitter.

More like this

  • Attempt invoking a function

    Attempts to invoke a function with the provided arguments, returning either the result or the caught error object.

    JavaScript, Function · Oct 18, 2020

  • Convert function from variadic

    Takes a variadic function and returns a function that accepts an array of arguments.

    JavaScript, Function · Jun 13, 2021

  • Bind object method

    Creates a function that invokes the method at a given key of an object, optionally prepending any additional supplied parameters to the arguments.

    JavaScript, Function · Oct 18, 2020