How to overload constructors in JavaScript ECMA6?

Question

purpose

Implement a mechanism to overload the constructor in JavaScript ECMA6

Why is this not a duplicate?

Topic Why does JavaScript ES6 not support classes with multiple constructors? , although this option does not coincide with this. Another topic focuses on constructor overloading using versions of older ECMAScript, while this section focuses on ECMA6. If you are looking for an updated answer, this is the place.

Background

I have a JavaScript class with a given constructor, and I want the user to be able to have different constructors when instantiating the object. An example of what I am doing might be as follows:

const DEFAULT_WHEEL_NUMBER = 4; const DEFAULT_COLOR = "black"; const DEFAULT_NAME = "myCar"; class Car{ constructor(numberWheels, aName, aColor){ this.wheelsNum = numberWheels; this.name = aName; this.color = aColor; } constructor(aName){ this(DEFUALT_WHEEL_NUMBER, aName, DEFAULT_COLOR); } constructor(){ this(DEFUALT_WHEEL_NUMBER, DEFAULT_NAME, DEFAULT_COLOR); } } 

In this code, the user has three constructors that he can use, each of which takes a different number of parameters. Usage example:

 var car1 = new Car(3, "tricicle-car", "white"); var car2 = new Car("Opel"); //creates black car with 4 wheels called Opel var car3 = new Car(); //creates a black car, with 4 wheels called myCar 

Problem

This is a simple example if you use Java or C # because these languages ​​have constructor overloads.

However, from the documentation for classes from MDN, we can conclude that JavaScript does not work.

Question

• Is there a way to implement a similar mechanism for JavaScript classes using ECMA6? If not, what is the best / closest alternative?

Answer 1

JavaScript has no built-in solution for this. An alternative solution may use the arguments object (in some cases) or pass in its own configuration parameters similar to this:

 const defaults = { numberWheels: 4, color: "black", name: "myCar" } class Car { constructor(options) { this.wheelsNum = options.numberWheels || defaults.numberWheels; this.name = options.name || defaults.name; this.color = options.color || defaults.color; } } 

This is basically an old school solution, I use the same logic in ES3.

Answer 2

You are right (as far as I know) that this is not a JavaScript class support function. My recommendation here, since you are already using ES6 features, should use the default options :

 class Car { constructor(numberWheels = 4, aName = "myCar", aColor = "black"){ this.wheelsNum = numberWheels; this.name = aName; this.color = aColor; } } 

This is obviously due to the warning that you cannot have “overloads” with different orders of parameters, as in your example (although, in my opinion, this is a good thing - a compatible API is much more pleasant to work with).

Meskobalazs answer is also a good option, especially if you have many options that you want your object to accept. Doing this with such function parameters can be a bit messy!