Simple JS OOP - Clicking the box to fetch and display object content I'm relatively new to OOP with JS and want to find out:


If my code can be improved somehow, and
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)


I have built a basic demo that just stores some animal data as objects and displays them when clicking on the boxes.

Can anyone briefly review the code and spot any improvements? And more importantly, what are typical tasks that objects are better for rather than just using arrays? I'm a front-end developer and typically use arrays for tasks like storing html data and changing content with click events, hovers and other event listeners, and have never had to use objects although want to.

Thanks for any advice here. My code and CodePen URL are below:



let animals = document.querySelectorAll('.animal'),
    animalsObj = [],
    mainTitle = document.querySelector('#title'),
    mainDescription = document.querySelector('#desc');

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

for (let i = 0; i &lt; animals.length; i++) {
  let name = animals[i].querySelector('.name').textContent,
      description = animals[i].querySelector('.description').textContent;
  
  // instantiate object
  new Animal(name, description);
  
  animals[i].addEventListener("click", () =&gt; {
    console.log('clicked on ' + animalsObj[i].name);
    mainTitle.textContent = animalsObj[i].name;
    mainDescription.textContent = animalsObj[i].description;
 });
}
.animals {
  display: flex;
}
.animal {
  border: 1px dashed grey;
  padding: 1em;
}
.animal:nth-of-type(odd) { background: #f0f0f0 }
.animal:nth-of-type(even) { background: #ccc }
&lt;div id='container'&gt;
  &lt;div class='animals'&gt;
    &lt;div class='animal'&gt;
      &lt;h2 class='name'&gt;Lion&lt;/h2&gt;
      &lt;p class='description'&gt;A big cat.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class='animal'&gt;
      &lt;h2 class='name'&gt;Stoat&lt;/h2&gt;
      &lt;p class='description'&gt;A weasel thing.&lt;/p&gt;
    &lt;/div&gt;
    &lt;div class='animal'&gt;
      &lt;h2 class='name'&gt;Chicken&lt;/h2&gt;
      &lt;p class='description'&gt;Good to eat.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class='output-area'&gt;
    &lt;h2 id='title'&gt;Animal&lt;/h2&gt;
    &lt;p id='desc'&gt;Description&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;




Codepen: https://codepen.io/ns91/pen/qBWLYLp
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