How to Get All Unique Items and Count Them in JavaScript

Learn how to efficiently gather `unique categories` and the count of items in JavaScript arrays with our simple, step-by-step explanation.
---
This video is based on the question stackoverflow.com/q/71805703/ asked by the user 'A.Anvarbekov' ( stackoverflow.com/u/16945230/ ) and on the answer stackoverflow.com/a/71805762/ provided by the user 'norbekoff' ( stackoverflow.com/u/14704150/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Get all unique items and show number of same ones in JS

Also, Content (except music) licensed under CC BY-SA meta.stackexchange.com/help/licensing
The original Question post is licensed under the 'CC BY-SA 4.0' ( creativecommons.org/licenses/by-sa/4.0/ ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( creativecommons.org/licenses/by-sa/4.0/ ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Get All Unique Items and Count Them in JavaScript

If you're working with data in JavaScript, you might encounter scenarios where you need to extract unique categories and count how many items belong to each. For example, you might have a list of fruits and drinks, and you want to summarize how many different fruits and drinks there are. In this guide, we'll explore a concise way to achieve that using a practical code example. Let’s dive in!

The Problem

Imagine you have the following data structure in JavaScript:

[[See Video to Reveal this Text or Code Snippet]]

From this data, we want to obtain a clearer view of how many different items belong to each category. Our goal is to transform this data into a new structure like this:

[[See Video to Reveal this Text or Code Snippet]]

The Solution

Now, let’s break down how we can achieve the desired output with JavaScript. We'll use a function that processes the array and calculates the count of items in each unique category. Here’s how you can do it step-by-step.

Step 1: Initialize a Map

Using a Map will allow us to dynamically store the counts for each category as we iterate through the data. The Map is especially useful for this scenario because it provides a simple way to associate keys (categories) with values (counts).

Step 2: Iterate Over the Array

We’ll loop through each item in the original array and update our Map with the count for each category.

Step 3: Convert the Map to an Array

Finally, we will convert the Map back into an array format that matches our desired output.

Implementation

Here is the complete implementation of the solution:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Code

Map Initialization: We start by initializing a new Map.

Mapping through Data: The map method is called on the input array, and for each item, we either increment the count in the Map or initialize it to 1.

Transforming the Map: Finally, we transform the Map back into an array of objects, where each object contains the count and category.

Final Output

When you run the above code, the console will display:

[[See Video to Reveal this Text or Code Snippet]]

This output makes it easy to see how many items belong to each category at a glance.

Conclusion

In this guide, we tackled the problem of counting unique categories from a dataset in JavaScript. By leveraging the power of Map, we made the process efficient and straightforward. Now you can apply this approach in your projects to organize your data more effectively. Happy coding!