An array is the most used data structure while writing any program. In JavaScript we mostly store data in JSON Objects, So in this article, we will be covering how Array of Objects works in JavaScript with an example.

What is An Array?

If you have to store and display the 5 names of programming languages, you have to store them in 5 variables and print them one by one as follows:

let programmingLang1 = "Javascript"; 
let programmingLang2 = "Python"; 
let programmingLang3 = "PHP"; 
let programmingLang4 = "Java"; 
let programmingLang5 = "Go"; 

//printing name of programming languages 
console.log(programmingLang1); 
console.log(programmingLang2); 
console.log(programmingLang3); 
console.log(programmingLang4); 
console.log(programmingLang5);

But what when you have to store 100 names, will you do it 100 times?. No.

Then we use an array to store the bulk of the data.

What is Javascript Array

An array is an Object(In javascript) that stores multiple values in a single variable. If you want to store multiple elements or values then you can store them in a single variable.

How to declare Array in JavaScript

There are two ways to declare. By using literals and using the new keyword. 

//using literals 
let programmingLangArr = ["Javascript","Python","PHP","Java","Go"]; 
console.log(programmingLangArr); 

//using new keyword 
let programmingLangArr2 = new Array("Javascript","Python","PHP","Java","Go"); 
console.log(programmingLangArr2); 

//use of new keyword is not recommended 
let arrayExample = new Array(10); 

//above example does not create an array with value 10, it creates an empty array of length 10

Declaring an Array using the new keyword is not recommended because for some array functions it gives an unexpected output. An example is given in the above example.

Javascript Array of Objects

If you have to store multiple objects in a single variable. then you can create an array of objects using arrays. let's take an example of an array of objects.

//javascript array of objects 
let arrayOfObjects = [ 
                      { "lang" : "PHP", "purpose" : "Backend" }, 
                      { "lang" : "Java", "purpose" : "Backend/Desktop" }, 
                      { "lang" : "Python", "purpose" : "Backend/Desktop" }, 
                    ]; 
console.log(arrayOfObjects); 

In the above example, there are multiple objects with their value. And stored these multiple values in the arrayOfObjects array.

The array of objects is a very useful feature in front-end development. Because most front-end developers use JSON objects in projects.

Javascript Array Methods

We can traverse and mutate Javascript arrays using its properties and methods. Here are a top Javascript Array methods with an example. 

Javascript Array Push()

array push() method is used for appending one or more elements in an array.

let programmingLangArr = ["Javascript","Python","PHP","Java","Go"]; 
console.log(programmingLangArr); 

output - ["Javascript", "Python", "PHP", "Java", "Go"]

//adding an element using push method programmingLangArr.push("c++"); 
console.log(programmingLangArr); 

output - ["Javascript", "Python", "PHP", "Java", "Go", "c++"]

If the push method length does not find a number then it adds an element at array[0](O index)

array sort()

the sort() function is used to sort elements of the array in ascending order.

programmingLangArr2.sort();
output- ["Go", "Java", "Javascript", "PHP", "Python"]

In the above example, we have an array programmingLangArr2, using sort function programming languages are sorted in ascending order.

array reverse()

The reverse() function is used for sorting an array using descending order.

programmingLangArr2.reverse() 
output- ["Python", "PHP", "Javascript", "Java", "Go"]

In the above example, we have an array programmingLangArr2, using reverse() function programming languages are sorted in descending order.