Efficient Data Retrieval in JavaScript Arrays with Map

A Hashmap in Javascript is a type of data structure where data is stored as key-value pairs. It provides a very efficient lookup operation based on keys for the values. Here we will see how we can use Hashmap to retrieve data if it is in the form of array of objects.

For starters, lets assume we have a data as follows:

const users = [
  {
    name: "John Doe",
    age: 30,
    phone: "123-456-7890",
    email: "johndoe@example.com",
    username: "johndoe123",
  },
  {
    name: "Jane Smith",
    age: 25,
    phone: "987-654-3210",
    email: "janesmith@example.com",
    username: "janesmith987",
  },
  {
    name: "Michael Brown",
    age: 42,
    phone: "555-555-5555",
    email: "michaelbrown@example.com",
    username: "mikebrown555",
  },
  {
    name: "Alice Garcia",
    age: 28,
    phone: "866-345-2109",
    email: "alicegarcia@example.com",
    username: "alice_garcia",
  },
  {
    name: "David Johnson",
    age: 35,
    phone: "741-987-6543",
    email: "davidjohnson@example.com",
    username: "davidj741",
  },
];

Now let's convert this to a map function.

const mapData = new Map(users.map((user) => [user?.username, user]))

console.log(mapData)

// Output //   -------------------------

[
    [
        "johndoe123",
        {
            "name": "John Doe",
            "age": 30,
            "phone": "123-456-7890",
            "email": "johndoe@example.com",
            "username": "johndoe123"
        }
    ],
    [
        "janesmith987",
        {
            "name": "Jane Smith",
            "age": 25,
            "phone": "987-654-3210",
            "email": "janesmith@example.com",
            "username": "janesmith987"
        }
    ],
    [
        "mikebrown555",
        {
            "name": "Michael Brown",
            "age": 42,
            "phone": "555-555-5555",
            "email": "michaelbrown@example.com",
            "username": "mikebrown555"
        }
    ],
    [
        "alice_garcia",
        {
            "name": "Alice Garcia",
            "age": 28,
            "phone": "866-345-2109",
            "email": "alicegarcia@example.com",
            "username": "alice_garcia"
        }
    ],
    [
        "davidj741",
        {
            "name": "David Johnson",
            "age": 35,
            "phone": "741-987-6543",
            "email": "davidjohnson@example.com",
            "username": "davidj741"
        }
    ]
]

In the first line, we are returning an array of arrays containing our data. Each data is identified by `username`. Now let's see how we can do various operations on this.

Get value by using the get method.

 const michaelData = mapData.get("mikebrown555")
 console.log("michaelData: ", michaelData)

 // Output //   -------------------------

 michaelData:  {
     "name": "Michael Brown",
     "age": 42,
     "phone": "555-555-5555",
     "email": "michaelbrown@example.com",
     "username": "mikebrown555"
 }

Check for existence by using has method.

 console.log(mapData.has("mikebrown555"))
 // true
 console.log(mapData.has("mike"))
 // false

Delete an entry using delete method

 mapData.delete("mikebrown555")

 console.log(mapData)
     // Output //   -------------------------
     [
         [
             "johndoe123",
             {
                 "name": "John Doe",
                 "age": 30,
                 "phone": "123-456-7890",
                 "email": "johndoe@example.com",
                 "username": "johndoe123"
             }
         ],
         [
             "janesmith987",
             {
                 "name": "Jane Smith",
                 "age": 25,
                 "phone": "987-654-3210",
                 "email": "janesmith@example.com",
                 "username": "janesmith987"
             }
         ],
         [
             "alice_garcia",
             {
                 "name": "Alice Garcia",
                 "age": 28,
                 "phone": "866-345-2109",
                 "email": "alicegarcia@example.com",
                 "username": "alice_garcia"
             }
         ],
         [
             "davidj741",
             {
                 "name": "David Johnson",
                 "age": 35,
                 "phone": "741-987-6543",
                 "email": "davidjohnson@example.com",
                 "username": "davidj741"
             }
         ]
     ]

Get size of map using `size`
```
 console.log(mapData.size)
 // 4
```

You can learn more about the Map class here and also do check out this article too.