Hey folks!

Welcome back! This time around, we’ll be talking about array of objects. Before we start, feel free to check yesterday’s topic if you haven’t!

Javascript in 15 Days : Objects

Introduction

Remember that yesterday we talked about objects? We mentioned that it can symbolize a singular "object" that can hold a set of key and values, whereas when we talked about arrays, we were referring it to more of a set of values, now what if we want to hold more than one things, but for every "thing" we hold, we also want to be hold more than 1 values? This is where array of objects comes in. You can say it takes the best of both worlds, and joins it into one satisfying method of storing data. Not only that, this type of data is seen everywhere! From data in spreadsheets, to database, and so many more! So, today we'll be focusing on how to make, alter and destroy these stuff!

Examples

Before we start getting technical, let's look at how we used to do it!

Bad Example 1

Here you can see that for every person I made, I had to make a variable. This seems fine for now, but what if I needed 100 people? This could cost me a lot of time and makes my code a total mess. Now let's see if we made arrays instead.

Bad Example 2

As you can see, although it looks slightly better, maintaining large amounts of data can be exhausting, and there are no index flexibility, everything has to be precise, just a mistake in indexing will destroy the data. Now, what if we combined these two, how will it look?

Good Example

As you can see, it's highly flexible, easy to maintain and very organized, and it basically does what you expect, you can do all array methods to the students variable, and in each of the element, you can manipulate the object how ever you'd like! So, first of all, let's try manipulating the array, or the outer shell.

Adding A New Record

Deleting Last Record

Replacing An Entire Student Record

Now, let's venture to the inner shell, the object itself!

Looping And Printing Each Student's Name

Changing The Name Of The First Student

Adding A New Key-Value Pair (Age) To First Student

Deleting An Existing Key-Value Pair(Gender) On First Student

Summary

As you can see, it's quite straightforward! It brings all the methods from array and object and combines them in an elegant way! Be sure to experiment yourself with this format and hit me up on LinkedIn or Twitter if you're ever stuck! Have a great day and see you tomorrow!

Javascript in 15 Days : Wrapping Up