2
\$\begingroup\$

I'm relatively new to OOP with JS and want to find out:

  1. If my code can be improved somehow, and
  2. 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 < 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", () => {
    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 }
<div id='container'>
  <div class='animals'>
    <div class='animal'>
      <h2 class='name'>Lion</h2>
      <p class='description'>A big cat.</p>
    </div>
    <div class='animal'>
      <h2 class='name'>Stoat</h2>
      <p class='description'>A weasel thing.</p>
    </div>
    <div class='animal'>
      <h2 class='name'>Chicken</h2>
      <p class='description'>Good to eat.</p>
    </div>
  </div>
  <div class='output-area'>
    <h2 id='title'>Animal</h2>
    <p id='desc'>Description</p>
  </div>
</div>

Codepen: https://codepen.io/ns91/pen/qBWLYLp

\$\endgroup\$
4
\$\begingroup\$

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
\$\endgroup\$
  • 1
    \$\begingroup\$ Very helpful, thank you. Will I always need to typically use arrays with objects? Because it’s somewhere to store the data. What are the typical things a front end developer can do using OOP, and without arrays? \$\endgroup\$ – user8758206 Sep 23 at 18:09

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.