Counting Elements Using Maps in JavaScript

In this lesson, we will explore the concept and practical use of Maps in JavaScript. Maps are a powerful and efficient data structure for storing key-value pairs. We'll use a Map to count the frequency of elements in a collection, understand its mechanics, and analyze its time and space efficiency. Through step-by-step demonstrations and detailed code examples, we'll uncover the practical applications of Maps in various contexts.

Imagine a paint store where we need to count the cans of paint in different colors. Manually counting each one becomes inefficient as the collection grows. A more efficient method employs a Map. Consider this list of colors:

const colors = ["red", "blue", "red", "green", "blue", "blue"];

Manually, red appears twice, blue three times, and green once. Using a Map can streamline this process.

Maps allow us to store and retrieve data using keys. In our example, the unique colors in our list are the keys, and their counts are the values. Let's use JavaScript's Map to count elements in our colors list.

First, we'll initialize our Map to store the counts:

const colors = ["red", "blue", "red", "green", "blue", "blue"];
const colorMap = new Map();

Next, we need to calculate the value to set for each key. If the key is encountered for the first time, we set its value to 1; otherwise, we increment its value by one:

if (colorMap.get(color)) {
    colorMap.set(color, colorMap.get(color) + 1);
} else {
    colorMap.set(color, 1);
}

However, this is inefficient, because we have to retrieve the value in the map twice. A more efficient approach combines the if-statement using the short-circuit evaluation, reducing the number of times colorMap.get(color) is called from twice to once:

colorMap.set(color, (colorMap.get(color) || 0) + 1);

Here, we check if the given color is already a key in the Map. If it is, we set its value to colorMap.get(color) + 1, effectively incrementing it by 1. If not, the get() function returns undefined, and we set its value to 0 + 1, initializing it to 1.