Hello Everyone,

Today I wanted to talk about the two the data structures that we used mostly in our application to add data, get data and delete data.However, I am assuming most of us are familiar with the use case of arrays and most of you don't see much difference between them. But, what happens behind the scene is totally different.

By the end of this post you will enough knowledge to make a good decision about which data structure to choose.

Data

First, I wanted to show you data we are gonna use in both cases.

This is the random data that I get from wikipedia about the world's top movies.

What we want to implement is store this data retrieve net gross income of movies. For example, if I wanted to get the gross income of Frozen, I will get 1,290,000,000.

Arrays

Okay, lets get started with arrays that most people are familiar with. If we store the above data to array, it will be something like this :

let arrayMoviesData = [];

arrayMoviesData.push(["Avengers: Endgame", "2,797,800,564"]);
arrayMoviesData.push(["Avatar", "2,790,439,000"]);
arrayMoviesData.push(["Titanic", "2,194,439,542"]);
arrayMoviesData.push(["Star Wars: The Force Awakens", "2,068,223,624"]);
arrayMoviesData.push(["Avengers: Infinity War", "2,048,359,754"]);
arrayMoviesData.push(["Jurassic World", "1,671,713,208"]);
arrayMoviesData.push(["The Lion King", "1,656,943,394"]);
arrayMoviesData.push(["The Avengers", "1,518,812,988"]);
arrayMoviesData.push(["Furious 7", "1,516,045,911"]);
arrayMoviesData.push(["Frozen II", "1,450,026,933"]);
arrayMoviesData.push(["Avengers: Age of Ultron", "1,402,805,868"]);
arrayMoviesData.push(["Black Panther", "1,347,280,838"]);
arrayMoviesData.push(["Harry Potter and the Deathly Hallows – Part 2", "1,342,025,430"]);
arrayMoviesData.push(["Star Wars: The Last Jedi", "1,332,539,889"]);
arrayMoviesData.push(["Jurassic World: Fallen Kingdom", "1,309,484,461"]);
arrayMoviesData.push(["Frozen", "1,290,000,000"]);
arrayMoviesData.push(["Beauty and the Beast", "1,263,521,126"]);
arrayMoviesData.push(["Incredibles 2", "1,242,805,359"]);

Initially, I have created an empty set of array called arrayMoviesData and then I added items to it. Notice that the items that I added to arrayMoviesData are also arrays themselves. If you console.log(arrayMoviesData) it will be something like this.

What I wanted to do is access the gross income of a particular movie and the code for that will look something like this.

let movie = "Incredibles 2";

for (let index = 0; index < arrayMoviesData.length; index++) {
    if(arrayMoviesData[index][0] === movie){
        console.log(`The gross income of ${arrayMoviesData[index][0]} is ${arrayMoviesData[index][1]}.`)
    }

}

I have created a loop to go through each item and check if the value of arrayMoviesData array if it matches the value to the movie variable.However, this works very fine and efficient if there are only 18 or 100 items in the arrays.

But, the problem occurs when there are ten thousands and millions of items in the arrays. If the item we want to retrieve is in the beginning of the array, then you will find the result quickly but if the item is in the end of the array then its gonna take some time.

So, from the conclusion, we can say that the average amount of time to find an item in the array is directly proportional to the number of items in the array.

Hashtables (Objects)

Hastables almost works simliar to objects as they work in javscript. The code for adding the movies data in hashtables would look something like this:

let objectMoviesData = new Object();

objectMoviesData["Avengers: Endgame"] = "2,797,800,564";
objectMoviesData["Avatar"] = "2,790,439,000";
objectMoviesData["Titanic"] = "2,194,439,542";
objectMoviesData["Star Wars: The Force Awakens"] = "2,068,223,624";
objectMoviesData["Avengers: Infinity War"] = "2,048,359,754";
objectMoviesData["Jurassic World"] = "1,671,713,208";
objectMoviesData["The Lion King"] = "1,656,943,394";
objectMoviesData["The Avengers"] = "1,518,812,988";
objectMoviesData["Furious 7"] = "1,516,045,911";
objectMoviesData["Frozen II"] = "1,450,026,933";
objectMoviesData["Avengers: Age of Ultron"] = "1,402,805,868";
objectMoviesData["Black Panther"] = "1,347,280,838";
objectMoviesData["Harry Potter and the Deathly Hallows – Part 2"] = "1,342,025,430";
objectMoviesData["Star Wars: The Last Jedi"] = "1,332,539,889";
objectMoviesData["Jurassic World: Fallen Kingdom"] = "1,309,484,461";
objectMoviesData["Frozen"] = "1,290,000,000";
objectMoviesData["Beauty and the Beast"] = "1,263,521,126";
objectMoviesData["Incredibles 2"] = "1,242,805,359";

The hashing works with key/property and value pairs. In this case, I have taken movie name as a key and the gross income as value.
Hashing works by jumping the exact of value of the key that is provided by the user and gives the results instantaneously.

You might be wondering how does it work so fast then arrays ?

The answer to this when you add data to particular hashtable in javscript, the javascript engine keeps tracks of the data of the key, that it has stored in the hashtables. So, when pass something like this.

objectMoviesData["Incredibles 2"]

It instantaneously returns this 1,242,805,359.
But when you pass something like this.

objectMoviesData["fsafaf"];

It instantaneously knows that it doesn't store any key of this fsafaf, so it returns undefined.

If you think of arrays, they also works the same way but the difference is that in array the key/property is indexes and we can't change the value of indexes in array.

Also, if you want to loop through the object and display the data, you can use for of loop something like this:

for (const [key, value] of Object.entries(objectMoviesData)) {
    console.log(`The gross income of ${key} is ${value}`)
}

Conclusion

If you think of the performance, hashing definitely wins. Arrays are good for storing small amount of data but if your data becomes bigger, you should migrate to hashtables.

If you think I might have mentioned something wrong, please feel free to comment. We all are learning here.

This post is inspired from kirupa.

Thanks for your time to read this.
Happy Coding:)