Simple JS OOP - Clicking the box to fetch and display object content
OO-Design


  key question Identify how and where I can typically use OOP more in my job (as I can usually just use arrays and don't need objects


In your transformation towards OOP, you're still in the habit of resorting to arrays.
You let each new instance of this class be registered in some global array.


class Animal {
  constructor (name, description) {
    this.name = name;
    this.description = description;
    animalsObj.push(this);
  }
}



Don't do this as it pollutes your object-oriented design.

class Animal {
  constructor (name, description) {
    this.name = name;
    this.description = description;
  }
}


If you wish to store these instances in the array, let the consumer code handle it. This way, you can decide by use case how instances of objects should be handled.

const animals = [];
const animal = new Animal("Roger", "my pet");
animals.push(animal);


This would also keep you from instantiating an object without storing the instance in a variable, because the magic no longer happens behind the screens.


new Animal(name, description);  // no longer registers to a global array