Arrays Vs Arrays of Objects

Will Z
4 min readApr 20, 2021

by: Will Z

So to begin, let’s take a look at the notation. The two main data types that we will be focusing on are Arrays and Objects. Let’s take a look at arrays to begin with.

Arrays can be made up of any of the primitive data types. This basic array we have developed has strings,numbers, and variables. basicArray can now be called to represent this ordered collection of data.

Now we have a similar data set but instead we have it in an object. When inside an object you will have to develop key value pairs. The same set of information is stored in this object but the keys have been added. Objects are the tables of JavaScript (JS) while Arrays are the lists of JS.

For my understanding I developed an example that helped me understand the differences. Let’s pretend we are trying to get a list of names for the people planning to attend my birthday party. So people respond with just their names on a card.

If we ignore the Hello My name Is: the only information on this card is the person’s name. So if we invited 5 people we would get back a list of five names

  • Kathy
  • Barto
  • Marco
  • Polo
  • SoloDolo

Now from what we learned already this looks like a straightforward Array.

WOW So fresh So Clean So Easy Right??. Now lets say we wanted to do something with each name in this list. Maybe we want to make place cards for the party! Now in code form we will consider this place card a simple Console log. Now we can use a high order function to go through this array and complete a function on each name.

And BAM we are all done. Console log handles the actual work of getting the name to the console and we are all set and ready for our party.

BUT WAIT THERES MORE

We just found out that the place i want to have my birthday party requires everyone to send in a copy of their ID to get all of the guest information.

UH OH. This is going to make it more difficult to make our place cards. The name is still there but it is part of an ID object and surrounded with other information. Now we can’t just show our computer the list of names and ask to make name cards. Let’s take a look at what this might look like in JS.

Wow, that’s a lot more information than before. We see the square brackets at the beginning and at the end so we are still dealing with an Array, but made up of individual objects versus just the string names. Looking back I probably should have included a birthday for each object BUT we live and we learn. Now, our goal has not changed. We want place cards for friends but if we use the same .forEach from before peoples place cards will be their whole ID!! Marco might not want SoloDolo to know where he lives.

Now with this dot notation we are able to go to the individual object and move into the name key. This will console.log the value stored to the key of name, AND give us our beautiful cards.

The differences are slight but they can cause errors as you try to work with these two different types of arrays.

--

--