Js Inheritance chain?

[frigid iris]

Hello.
I am trying to figure out how JS's inheritance chain works.
Lets say I have a "parent" class, and a "bigBro" class, and a "LilBro" class.
By using the extend keyword I create a inheritance chain, (I dont know the correct word for it.)

class Parent{
  parentArr = [];
  constructor(arr){
     //This assigns and creates properties
     parentArr = this.initializeArr()
  }
  thisIsParentsMethod(){
  }
// ... Rest of Code here
}
class BigBro extends Parent{
 constructor(arr){
    super(arr)
  }
  thisIsBigBrosMethod(){
  }
// ... Code here
}
class LilBro extends BigBro{
  constructor(arr){
  super(arr)
}
  doSomething(){
    super.thisIsParentsMethod() // If I use super it says a property is not defined 
    this.thisIsParentsMethod() // This returns undefined method thisIsParentsMethod
  }
}

From the LilBro class I expect to be able to use all methods of BigBro and Parent, how ever it does not seem to work correctly, if I use super before a call, it errors out with property is not defined.
If I use this it returns undefined method.

My question is, is it possible to inherit like this?
What would the alternative be?

[soft hemlock]

why... would you "format" your code like this?

Member functions (methods) in ES6 classes do not need the "function" keyword. Remove it.

[frigid iris]

Sry, should be better formatted now?

[soft hemlock]

yes, great!

I can now also see a syntax error where you missed the closing brace after thisIsParentMethod

[frigid iris]

Should be fixed

[soft hemlock]

is your problem also fixed?

[gray void]

class Parent {
  constructor(arr) {
    //This assigns and creates properties
    this.parentArr = arr;
  }
  thisIsParentsMethod () {
    return this.parentArr.at(-1);
  }
 // ... Rest of Code here
}

class BigBro extends Parent {
  constructor(arr){
    super(arr);
  }
  thisIsBigBrosMethod () {
  }
  // ... Code here
}

class LilBro extends BigBro {
  constructor (arr) {
    super(arr);
  }
  doSomething () {
    return this.thisIsParentsMethod();
  }
}

return new LilBro(["x"]).doSomething();

Both this and super work and return "x" 🤷

[frigid iris]

Might be because I use gulp with babel to transfer it into es2015 then, I'll look into that 🙂

[gray void]

I haven't seen gulp used for ages 😅

[frigid iris]

Is there anything else you would recommend? I'm open for suggestions 🥹

[gray void]

Depends, nothing if it's for node only

[frigid iris]

It kinda is? The only reason is it used is because we're using browserify to bundle, but might change that to webpack if it plays nicely with es6 features

[gray void]

browserify and webpack are for browser code

Are you coding for node only or also for the browser?

[frigid iris]

The browser.
The system we're coding for have something called entities, a single entity have one js file.
and before we used browserify and gulp the files could span 4000 lines, so in order to split the code up we began using Node, and packages like browserify and gulp.
Does that make sense?

[gray void]

Yes, that was what was being used about 5 years ago

webpack plays fine with features even up to ES2023, the current spec

Do you need to support back to ES5? There's virtually no browser left that doesn't support ES6 (ES2015)

[frigid iris]

No, I don't really, I actually think it was because I wanted to use import instead of require, that might be unnecessary lol

[gray void]

Yeah, we're in 2023

you don't need anything anymore

If you want to use features that are not part of the spec/not implemented in browsers, esbuild is enough

[frigid iris]

The only feature I need is to be able to bundle into a single standalone .js file, so we can split the code base up

[gray void]

Yep, then esbuild is enough

You use the standard ES modules https://javascript.info/modules in your dev env

and you build into a single file for prod