Javascript Map is a rarely used data structure, hence it is not as widely understood as it would first appear, also is not as little as it first appears. We will start off with some fundamentals in this post and gradually head towards explaining the Map’s function as well as certain situations in which it may be helpful.

The Big ⭕ Notation

Understanding Big O Notation is crucial for analyzing the efficiency and scalability of algorithms and data structures. It allows developers to assess how algorithms will perform as the size of the input data increases. The notation provides a standardized way to express the worst-case scenario of an algorithm’s runtime in relation to the size of the input. As developers, it’s essential to choose algorithms and data structures with favorable time complexities to ensure efficient performance, especially when dealing with large datasets.

When considering all this data, it becomes apparent that it’s best for the methods we use not to be dependent on the size of ’n’ data. While these operations may be fast enough to go unnoticed individually, combining multiple operations simultaneously or nested loops can significantly degrade the user experience.

Array.prototype.find() 🔍

The find() method in JavaScript performs a linear search on an array. It returns the first element that satisfies the given condition, and it reads through all the data until it finds that element. Therefore, considering the worst-case scenario, where the item we are searching for is the last element of the array, we say it has a time complexity of O(n). This situation is exemplified in Aditya Bhargava’s book Grokking Algorithms as follows:

Hash Map 🗺️

A hash map is essentially a storage that can map keys to their corresponding values. When you provide it with a key, it returns the value associated with that key, and you can perform insertion and deletion operations using the same key value in these hash tables. So, it’s a very fast storage system and requires O(1) time complexity for all these operations.

Nevertheless, there are certain considerations to keep in mind. For instance, if keys are distributed using an inefficient hash function, collisions may occur, complicating search operations. Additionally, maintaining a hash table with a fill rate exceeding approximately 70% can result in performance degradation.

Map > Array ? 🤔

In recent projects, the find() method is commonly used within user interactive components. For instance, when we need to retrieve data based on parameters from dynamic routes, manipulate specific data, or fetch information selected from dropdowns or input fields, methods like find (and occasionally filter) come into play. These operations follow a linear approach and have a time complexity of O(n). Now, let’s explore how a Map can simplify accomplishing these tasks.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

const data = [
  ...
  {
    "age": 50,
    "email": "atuny@@sohu.com",
    "firstName": "Terry",
    "lastName": "Medhurst",
    "gender": "male",
    "id": 1,
    "username": "atunyo",
  },
  {
    "age": 28,
    "email": "hbingleyl@plala.or.jp",
    "firstName": "Sheldon",
    "lastName": "Quigley",
    "gender": "male",
    "id": 2,
    "username": "hbingley1",
  }
  ...
]

What is a Map? 🔦

The Map in JavaScript provides a data structure for mapping keys to values. Unlike arrays, which are indexed by a range of numbers, maps can use any value as a key. This flexibility makes maps useful in various scenarios, especially when dealing with complex data structures or when quick access to data is required.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

let hashData = null;
const getUsers = async () => {
  try {
    const response = await fetch("https://dummyjson.com/users");
    const data = await response.json();
    hashData = new Map(data.users.map((user) => [user.username, user]));
  } catch (error) {
    console.error("Oops:", error);
  }
};

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

Map(30) { atuny0 → {…}, hbingley1 → {…}, rshawe2 → {…}, yraigatt3 → {…}, kmeus4 → {…}, jtreleven5 → {…}, dpettegre6 → {…}, ggude7 → {…}, nloiterton8 → {…}, umcgourty9 → {…}, … }
size: 30
<entries>
0: atuny0 → Object { id: 1, firstName: "Terry", lastName: "Medhurst", … }
1: hbingley1 → Object { id: 2, firstName: "Sheldon", lastName: "Quigley", … }
2: rshawe2 → Object { id: 3, firstName: "Terrill", lastName: "Hills", … }
3: yraigatt3 → Object { id: 4, firstName: "Miles", lastName: "Cummerata", … }
4: kmeus4 → Object { id: 5, firstName: "Mavis", lastName: "Schultz", … }
5: jtreleven5 → Object { id: 6, firstName: "Alison", lastName: "Reichert", … }
6: dpettegre6 → Object { id: 7, firstName: "Oleta", lastName: "Abbott", … }
<prototype>: Map.prototype { … }

This way, instead of using find, we can access the value associated with a key in our Map data structure using get with a time complexity of O(1), independent of the size of the data. Moreover, using the has method, we can check for the existence of that data with a time complexity of O(1) instead of using includes with a time complexity of O(n). Keys are case-sensitive, which provides us with convenience.

Methods of the Map data-structure 📌

1
2
3
4
5
6
7
8
9

hashData.clear() // delete all items
hashData.forEach((e) => e.email) // loop for all items
hashData.get("ggude7") // search a key, returns the value
hashData.has("ggude7") // search a key if its exist as a Boolean
hashData.set("testUser", "user123") // add a new item with unique key
hashData.delete("ggude7") // delete an item with a key
hashData.keys() // iterate keys
hashData.values() // iterate values
hashData.size // returns how many elements it has

Final Thoughts 💭

In conclusion, both JavaScript Maps and Arrays have their own strengths and use cases.

It’s important to note that creating a Map in JavaScript can be resource-intensive, so it’s only worthwhile if you anticipate using find() frequently.

Lastly, when working with JavaScript for front-end development, it’s worth considering whether excessive focus on performance is a wise decision or not. In my POV, script execution speed rarely becomes the bottleneck for web page or app load times. Rather than vigorously replacing every find() with a Map, consider optimizing your functions & APIs or refining your UI to enhance the overall user experience. Prioritizing milliseconds of speed improvement in JavaScript code may not always yield noticeable benefits.

References

• Grokking Algorithms
• Linear Search in JS
• ES6 Map
• Array.prototype.find
• Array.prototype.filter
• Array.prototype.includes