Help Wanted for OOJS3 skill test

MDN
, ,
#1

I’ve got my functions working for extending the Square clss from the Shape class. However, I don’t understand how super() works in this assingment.
for example:

class Shape {
  constructor(name, sides, sideLength) {
    this.name = name;
    this.sides = sides;
    this.sideLength = sideLength;
  }

  calcPerimeter() {
   console.log(this.sides * this.sideLength);
  }

}

class Square extends Shape {
  constructor(sideLength) {
    super();
    this.name = 'square';
    this.sides = 4;
    this.sideLength = sideLength;
  }

  calcArea() {
    console.log(this.sideLength * this.sideLength);
  }
}

let square = new Square(5);
square.calcPerimeter();
square.calcArea();

That’s the final code I got to complete the assignment, but if I comment out this.sideLength = sideLength I get NaN printed to the console. Also, why do I need to assign the sideLength again in the constructor? Shouldn’t it suffice to use super(sideLength) only?

I need help understanding the rules for using super(), I thought that super binded this for the passed in arguments in the constructor’s parameters. Why do I need to this.sideLength = sideLength again and pass no arguments to super()??

#2

So, (and i think you have this part down, but I’m going to include it just inc ase) you need this.sideLength = sideLength because in the constructor’s context (that is, while the constructor is running), sideLength refers to the input parameter to the constructor, a local variable named sideLength, which is only valid while the constructor is running. On the other hand, this.sideLength refers to a member variable within the Square class called sideLength.

Thus this.sideLength = sideLength means "set the value of the Square object’s sideLength member variable to be the same as the local variable sideLength, which was passed into the constructor as an input parameter.

The reason you can’t just do super(sideLength) is because the parameters are assigned to inputs left to right, so if you did super(sideLength) inside the Square constructor, the Shape constructor would treat the sideLength input as the value to use for name, since that’s the first parameter in the constructor.

The easiest way to deal with that is to just assign it manually.

#3

hey, actually, super('square', 4, sideLength) works as well, without having to bind the properties like I do in the previous code block