snippetjavascriptTip
What does a JavaScript constructor return?
Viewed 0 times
javascriptwhatdoesconstructorreturn
Problem
The
Typically, when your constructor is invoked with
Let's look at some examples to better understand what's going on:
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
returnvalue, valid being onlyobjectvalues. - The
thisobject if there is noreturnstatement executed with a valid value.
Let's look at some examples to better understand what's going on:
Solution
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 }- Any valid
returnvalue, valid being onlyobjectvalues. - The
thisobject if there is noreturnstatement executed with a valid value.
Let's look at some examples to better understand what's going on:
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.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.Code Snippets
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 }class VerboseClass {
constructor() {
this.val = 0;
return this;
}
}
new VerboseClass(); // { val: 0 }
class PrimClass {
constructor() {
this.val = 0;
return 20;
}
}
new PrimitiveClass(); // { val: 0 }Context
From 30-seconds-of-code: return-constructor
Revisions (0)
No revisions yet.