OOJS 3 - Skill test assessment question

MDN Learn
#1

https://jsfiddle.net/bap2u530/1/

Hello Guys,

Link to my jsfiddle is above. You can view Js code below attached.
I got the whole thing working however, I’m not sure I understand how this all works…
When I passed sideLenght as a paremeter of super and commented out this.sideLength in Square class, console.log(square) gives { name: ‘square’, sides: 4, sideLength: undefined }.
I thought that with usage of super I tell that I get access to parent’s properties and methods. It looked naturally, that if I pass the sideLength parameter (like super(sideLength) and comment out this.sideLength = sideLength) it will be taken to the Square class that extends. But it keeps giving me undefined and the result as NaN

Every other solution like:

super(sideLength)
this.sideLength = sideLength;

works, however it feels like I’m doubling the work. Could someone explain which is the best practice here? Or I got something wrong?

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

class Square extends Shape {
constructor(sideLength){
super(); //super(sideLength) console.log(square) gives { name: ‘square’, sides: 4, sideLength: undefined }

this.name = ‘square’;
this.sides = 4;
this.sideLength = sideLength;
}

calcArea(){
return this.sideLength * this.sideLength
}
}
let square = new Square(5)

console.log(square.calcArea(), square.calcPerimeter())

#2

Hi there @macadox!

What you have got here is definitely on the right track. If you look at our finished example: https://github.com/mdn/learning-area/blob/master/javascript/oojs/tasks/oojs/marking.md#task-3

You’ll see that our square constructor looks like this:

constructor(sideLength) { 
  super('square', 4, sideLength); 
}

The idea — as I understand it — is that super() is calling the inherited class’s constructor, and making its properties available in the current class. We are making the first two available with set property values — “square” and 4, and we are making the third one available as a variable, which must then be set as an argument to the current constructor when called.

It’s a bit of a tricky one, this, HTH!

There’s more information available at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/super