JavaScript

Difference Between Array and Array of Objects in JavaScript

In JavaScript, Arrays and Objects are two entirely different elements. However, the intriguing factor about both is that they can include the other counterpart in their elements. This means that an array can consist of various objects, and objects can contain various arrays. This article will answer this long-awaited question about the difference between arrays and arrays of objects by first tapping into the general description of arrays, objects, and arrays of objects, highlighting the difference between all three of these.

Arrays | A brief revisit

Arrays are nothing but named memory locations just like standard variables, except having the ability to store more than one value under the same identifier. Unlike other programming languages, JavaScript has an exciting factor associated with array data structure: the ability to store various types of values inside an array. An array is represented as elements enclosed within square brackets “[ ],” and the elements of an array are accessed using their index values which start from 0 for the first element and go up in number for every next element in the array.

Example of an Array

Simple create a variable and set it equal to multiple values separated by a comma and enclosed with a pair of square brackets like

var person1 = ["John", "Doe", 22, 15000];

You can see, the array person1 is storing information about a person about his first name, last name, age, and salary.

Another thing is also pretty visible: there is no easy way to determine which value is. Therefore, objects come into play.

Objects | A brief revisit

Objects are non-sequential memory locations initialized under one identifier that can store all types of values. Objects have properties defined by key-value pairs instead of elements. A comma separates each key-value pair, and all the key-value pairs or the complete object is wrapped with a pair of curly brackets “{ }”. The value of the objects is accessed by using the key of the object property.

Example of an Object

To create an object about the same person as above, use the following lines of code:

var obj = {

firstName: "John",

lastName: "Doe",

age: 22,

salary: 15000,

};

It is pretty clear from the code snippet above, that objects are much more readable to the user. And fetching a specific value can be done using the “key”.

An array of Objects | What is it?

An array of objects merely refers to various objects stored in the memory in sequential order. Imagine the scenario where one must store information about 100 people, and the information includes firstName, lastName, age, and salary.

To store information of different types, objects are surely better. However, iterating through 100 objects is a big hurdle. To tackle this, we have something as Arrays of objects; each element of an array is a reference to an object. This, in our example, eases the struggle of iterating over the information of 100 people.

Example of Array of objects

Create two objects with information about two different persons, and then in the elements of an array, simply pass in the identifiers of the objects as:

var obj1 = {

firstName: "John",

lastName: "Doe",

age: 22,

salary: 15000,

};

var obj2 = {

firstName: "Hanibal",

lastName: "Smith",

age: 23,

salary: 17500,

};

var arrOfObj = [obj1, obj2];

To fetch values from an array of objects, you need to address the objects using the indexes and then the values of each object using the key of the key-value pairs.

Arrays vs. Arrays of Objects | When to use which?

From the above examples, arrays are the best to use when working with the same types of variables or values. But if you are working with information about multiple elements of the real world with varying properties, the Arrays of objects are best to use.

Wrap Up

Arrays are nothing like an ordered list of values enclosed in square brackets. Whereas, just like the name suggests, arrays of objects and arrays whose every element is an individual reference to an object. Arrays are best for storing values of the same data type because of the ability to iterate through them easily. But when storing information about multiple real-world objects, Arrays of objects are the preferred choice.

About the author

Abdul Mannan

I am curious about technology and writing and exploring it is my passion. I am interested in learning new skills and improving my knowledge and I hold a bachelor's degree in computer science.