Array of Objects in JavaScript

An array of objects means storing an object in an array. Creating an object in the array is called an array of objects in Javascript.

We can store multiple arrays of objects in a single variable as we declare a simple array with various elements in a single variable. 

The syntax for creating an array of objects is below.

Syntax

 var languages = new Array( "PHP", "JAVA", "PYTHON" );

Difference between Array and Array of Objects

In a simple array, we can store numbers where an Array of objects is used to store data in the form of strings.

The data we stored in an array is called elements if we talk about an array of objects so the data we stored in objects are called properties.

Both array and an array of objects can be iterated through for…in, for…of, and for each loop.

For better understanding have a look at the following array of object examples.

Example 1

<html>
 
<head>
 
<title> </title>
 
</head>
 
<body>
 
<script>
 
var student =[
 
{ Name : 'Ali', age : 20},
 
{ Name : 'umair', age : 23},
 
{ Name : 'amir', age : 19},
 
{ Name : 'rehan', age : 25},
 
{ Name : 'sunny', age : 18}
 
];
 
console.log(student)

</script>
</body>
</html>

Code Explanation

In the above Javascript code, we declared and printed a simple array of objects.

First of all, wrote the basic HTML structure then in the script we declared a variable “student” and assigned an array of objects.

In the array of objects, we stored 5 objects with properties.

In the end, we just console the variable student. Check out the results below.

Output

(5) [{…}, {…}, {…}, {…}, {…}]
  0: {Name: 'Ali', age: 20}
  1: {Name: 'umair', age: 23}
  2: {Name: 'amir', age: 19}
  3: {Name: 'rehan', age: 25}
  4: {Name: 'sunny', age: 18}
  length: 5
  [[Prototype]]: Array(0)

Example 2

var students = {
    steve: {
      name: 'steve',
      age: 21,
      gender: 'male'
    },
    warner: {
      name: 'warner',
      age: 23,
      gender: 'female'
    }
  };

  // we can use the DOT notation for accessing object property
  console.log('using DOT:' + students.ali.age);

  // or we can use the bracket [] notation as well.
  console.log('using []:' + students.hoor['gender']);

  // here we are using the delete keyword
  delete students.ali;

  // her we are iterating for..in loop
  for (var key in students) {  
    console.log(students[key]);
  }

Code Explanation

In the above code we declared a variable “students” and stored 2 arrays of objects with some properties, the first one is “steve” and the other one is “warner”.

Then we used the dot(.) and the bracket[] notations for accessing and printing the properties of the objects.

You can also use the delete keyword so if you want to delete an object you can use it as we used for deleting the object “warner”.

We used the for-in loop with a key (it will print each value or property of the object) and then console the values of the object.

Check out the results below.

Output

using DOT:21

using []:female

{name: 'hoor', age: 23, gender: 'female'}
age: 23

gender: "female"

name: "hoor"

[[Prototype]]: Object

As you can see from the output above it deleted the object ”steve” and printed the object “warner” with each property of the array of objects.

Conclusion

In this tutorial, we talked about the Array of Objects in Javascript. We discussed the difference between an ordinary array and an array of objects.

For better understanding we practiced a few examples as well, in the first example, we saw how to declare an array of objects and how can we print an array of the object on a browser.

Then in the other example, we saw how can we use the delete keyword for deleting an object and how can we print each property of an object by using for loop.

That’s all for today hope you like the tutorial if you have any queries regarding this article so feel free to contact us below. Thanks for reading.

Leave a Comment