6

In JavaScript ES6 classes, what is the better approach to call a super on the constructor passing all the arguments to the parent class?

I came up with this model using the spread operator, are there any downsides to this approach?

class Parent {
  constructor(a, b, c){
    console.log("a:", a);
    console.log("b:", b);
    console.log("c:", c);
  }
}

class Child extends Parent {
  constructor(){
    super(...arguments);
    this.doMyStuff();
  }
}

let child = new Child("Param A", "Param B", "Param C")
4
  • 5
    "what is the better approach" assuming there is a better approach. Looks ok to me.
    – Cerbrus
    Aug 20, 2015 at 7:04
  • regarding the child constructor: do you really want constructor() or shouldn't it better be constructor(a, b, c) like in Parent?
    – wero
    Aug 20, 2015 at 7:11
  • 1
    @wero: Doesn't really matter, but yes, it would be useful if the arity of the constructor were 3 rather than 0. Aug 20, 2015 at 7:14
  • 1
    @wero: That's exactly the point: for brevity sake I don't want to declare all the acceptable parameters in the child class, and just push all the received parameter to the parent.
    – cassiozen
    Aug 20, 2015 at 7:25

3 Answers 3

5

Let's do that old Pros and Cons thing:

Pros

  1. If you change the number of arguments that Parent accepts, you don't have to change Child. You still have to change code using Parent or Child if the arguments change affects it, but Child is automatically updated.

  2. (Very weak.) Brevity.

Cons

  1. Loss of clarity. What are the arguments to Child? Mitigation: Documentation.

  2. Tools can't prompt you with the names of the Child arguments if they don't know what they are; if the idiom became widespread, tools might analyze the code and figure it out, but I don't think it's likely. You could mitigate that by declaring the arguments even if you don't use them, but then you lose Pro #1 above.

  3. The arity of Child (Child.length) is 0 when in effect it's 3. Again could be mitigated by declaring the args, but again you lose Pro #1.

Neutral

  1. To avoid potential performance issues with arguments, you need to be using strict mode (you're not in that code unless it's in a module). (Because strict mode does away with the link between arguments and the declared arguments.) But you should be using strict mode anyway. :-)

Side note: Bergi made the brilliant observation that you can avoid arguments by using "rest args" instead:

constructor(...args) {
    super(...args);
}
4
  • Subjective: I'd probably opt for being explicit, but that's an opinion, thus not part of the answer. Aug 20, 2015 at 7:27
  • I don't think there's a performance issue with arguments if they are reasonably used, i.e. there are no formal parameter and there is no assignment to either. Btw, you could always go for rest parameters instead: constructor(...arg) { super(...args); … }
    – Bergi
    Aug 20, 2015 at 10:53
  • @Bergi: There used to be a substantial performance cost (like, an order of magnitude for a simple function) if it used arguments vs. not even if just doing arguments.length. Last I looked at this was about six years ago, things may well have moved on; at the time it seemed like the engineers said "well, they're using arguments, might as well set it up completely". But of course, for most functions, even an order of magnitude is in "meh" land. Aug 20, 2015 at 12:11
  • @Bergi: Rest args for the win! Definitely much better option than using arguments. Nice one, wish I'd thought of it. Aug 20, 2015 at 12:11
2

You could combine destructuring with default params. I'm currently doing it like that:

class Parent {
  constructor(args = {}){
  //destructure what you need here
    let {
        a = "default a", 
        b = "default b", 
        c = "default c"
    } = args
    this.a = a
    this.b = b
    this.c = c
  }
}

class Child extends Parent {
  constructor(args = {}){
    //pass args object
    super(args)
    //destructure what you need here
    let {
      d = "default d",
      e = "default e"
    } = args
    this.d = d
    this.e = e
  }
}

    let parent = new Parent({
        a: "Param A", 
        b: "Param B", 
        c: "Param C"
    })

    let child = new Child({
        a: "Param A", 
        e: "Param E",
        c: "Param C"
    })

    console.log(parent)

    console.log(child)

This way changes your object declaration a bit, since you allways passing variables as a single args object.

You may consider checking for type object though since it wont throw an error if you'll pass something else - instead it would just use default values. But i feel that should count as exprected behaivior.

In the same manner args = {} handles the no arguments case, but it's not striclty neccessary either, but a good habbit, if you'll for example accidently pull something from args later in non destructuring manner.

Here's a bin: JSBin

1
  • beautiful, I love it Oct 26, 2022 at 21:07
-2

What do you win with the generic approach?

class Child extends Parent {
   constructor(a,b,c){
      super(a,b,c);
      this.doMyStuff();
   }
}

is no longer as your version but explicit in what it is expecting and passing on, and therefore easier to understand for the casual reader of your source code.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.