Obviously, you have read books and newspapers, so you can also understand the difference between arrays and objects in JavaScript.

If you’re new to JavaScript, it might be possible to get confused on the best way to organize and store data.

On one hand, you are probably know arrays from learning “for” loops. But, when you start sticking more data into arrays, as possible, you will create an unscalable mess that will be impossible to understand when you review your code.

Opting among an object and an array becomes left hand’s task when you can quickly understand the use of each structure. Objects can be thought as the way newspapers store information. And Arrays closely fit the way that books store information.

Let’s jump into it!

Arrays: Order of Data is Most Important

The sections of a book are given below, in array form.

You can recognize, those are the first three chapters of the first Harry Potter book. Here is that array in picture form.

A programmer uses arrays when order of the data is the most important factor for organizing the information. I can guess, nobody looks at the chapter titles of a Harry Potter book and goes. The order of the chapters tells you which one to read next.

When you fetch information from the array, you use the index of each element. Arrays are 0-indexed, which means they start counting from 0 rather than 1.

This means if you wanted to access information at index 0 of the books array, you would use:

And you would get:

If you wanted to figure out the name of the third section of the book, you would use:

You choose which sections to read next based on order in the book, that isn’t based on the name of the chapter.

Objects: Data Label is Most Important

In object form, a newspaper might look like:

The same data in visual form will look like:

Objects are best when you want to organize based on data labels. You do not likely to read a newspaper from front to back, page by page. You just flip it to a certain section based on the section’s name. No matter where that section is located in the newspaper, you can flip to it immediately and have the required context. This is not like a book, in which the order of the chapters/sections are meaningful.

Objects organization of this information looks like this via key/value pairs:

You would use the key like so, when you wanted to access the Business section of the newspaper:

or:

The value returned will be ‘GE Stock Dips Again’. So, when it is easiest to access data based on a label (the key), you want to store it in an object. 

Combining Objects and Arrays

Till now, we have just stored strings in our arrays and objects. You can also store other basic data types like numbers and Booleans, as well as:

1.    Arrays within objects

2.    Objects within arrays.

3.    Arrays within arrays

4.    Objects within objects

This is where it starts to get complex. But, you will almost always need a combination of the two to store your data in a scalable way. You want to understand the code a week later when you need to revisit it.

Let’s look at the book example again. What if we wanted to also store the number of pages in each chapter? It might be best to now fill our array with objects. Like this:

We have maintained the order of our chapters, and now we have the ability to name specific properties of each chapter. So, if we wanted to know the page count of the second section, we would use:

 This would give a value of 18.

Now let’s say you wanted to see a ranking of the top writers for each section of your local newspaper, based on seniority. You could express that in an array within the newspaper object, like this: 

An array is a good choice to store the writers as their order matters. You know the later writers are ranked lower than the earlier writers in each array. At index 0, the writer is the top-ranked writer.

You could possibly optimize this object by just creating more objects within the newspaper object. Such as, a sports object with a title and list of writers. But I will let you try that out!

Also Read:3 open source boilerplate web design templates