How to find most frequent item of an array? [Updated]

Usama Tahir
5 min readMay 19, 2017

--

People complained about performance issues with old method and that’s why I updated this article to most performant method using hashmap.

How to find most frequent item of an array in JavaScript? Something that a lot of developers are struggling to find out. Even though there are lots of solution out there but most of them are too complicated and hard to understand.

People are searching:
How To,,,
“Get the element with the highest occurrence in an array”
“Get the item that appears the most times in an array”
“Write a function to find count of the most frequent item of an array”

Which means there are lot of people out there looking for best and easy solution to find out how to get the most frequent item of an array.

So, today am gonna show just that. “So Let’s Begin”

Step 1

First, we need to create an array.

var cats = ['Tom','Fluffy','Tom','Bella','Chloe','Tom','Chloe'];

Now, we have our array of cats.

Step 2

We need a function that will take our array as an argument and do the calculation, Remember! we can also do all the calculation without function, Its all just matter of preference. In this example am going with iife (immediately invoked function expression).

(function(array){
//code goes in here
})();

Step 3

Now, we are going to create three(3) variables, One for storing our hashmap, other for the comparing old value with next value and last one for storing final most frequent value in array.

(function(array){
var counts = {}; //We are going to count occurrence of item here
var compare = 0; //We are going to compare using stored value
var mostFrequent; //We are going to store most frequent item
})();

Step 4

Now, It’s time to make loop inside our function to perform all the calculations.

//caching length in len variable
for(var i = 0, len = cats.length; i < len; i++){
var word = cats[i];

if(counts[word] === undefined){ //if count[word] doesn't exist
counts[word] = 1; //set count[word] value to 1
}else{ //if exists
counts[word] = counts[word] + 1; //increment existing value
}
if(counts[word] > compare){ //counts[word] > 0(first time)
compare = counts[word]; //set compare to counts[word]
mostFrequent = cats[i]; //set mostFrequent value
}
}

If code above is complicated for some of you then let me explain it.

  1. First, we are starting a loop that runs as long as ‘ i — is less than the length of cats array’.
  2. Then, inside that loop we are saving first item of cats array in variable ‘word’. Now We are checking if counts object has item whatever value is stored in word, If it doesn’t exist we are setting counts[word] value to 1.
    For example:
    If, word = “Tom”, then counts[“Tom”] = 1; will be set if counts[word] doesn’t exist.
  3. Now, in next iteration if counts[“Tom”] exists, We are incrementing it’s value by 1, Which will be like counts[“Tom”] = counts[“Tom”] + 1;
    Output:
    [counts[“Tom”] value is 1 now],,,
    counts[“Tom”] = 1 + 1; Now object will look like this counts{Tom: 2}
  4. Now in next iteration, If counts[“Fluffy”] doesn’t exist then it will output ‘undefined’, Which means if condition is true and It will add it in the count object.
    Output:
    counts[“Fluffy”] = 1;
    Now object will look like ,,, counts = {Tom: 2, Fluffy: 1};
  5. Same process will be repeated for every item, If it doesn’t exist add it and if it exists increase it value by 1.
  6. Now let’s talk about second if statement.
  7. In second if statement, We are checking if counts[word] is greater than compare value which is “0” at the beginning of our loop.
  8. So, because count[“Tom”] will output “2” and “2” is greater than 0, Condition will be true and the code inside if statement will run.
  9. Inside if statement, We are checking if counts[word],,, counts[“Tom”] >0 , then set the value of compare to counts[“Tom”],,, Right now as we know counts[“Tom”] is “2”.
  10. So, “2”will be stored inside compare variable.
  11. And in mostFrequent variable we are the name of item which is greater than compare.
  12. Now in next iteration we checking if count[“Fluffy”] is greater than compare,,, Here compare value is “2".
  13. So, If count[“Fluffy”] is “3” now than ,, compare value will be set to “3" and because “Fluffy” is greater than compare. “Fluffy” will be stored in mostFrequent variable.

This process will repeat until the loop with variable ‘ i ’ fails.

At the end we will get our mostFrequent item value in mostFrequent variable. that will look like this,,,

mostFrequent = 3

Now, all we have to do is give check what is stored in mostFrequent variable.

console.log(cats[mostFrequent]);

Step 5

The Final piece lets wrap our whole loop inside our iife — (immediately invoked function expression).

var cats = ['Tom','Fluffy','Tom','Bella','Chloe','Tom','Chloe'];
var counts = {};
var compare = 0;
var mostFrequent;
(function(array){
for(var i = 0, len = array.length; i < len; i++){
var word = array[i];

if(counts[word] === undefined){
counts[word] = 1;
}else{
counts[word] = counts[word] + 1;
}
if(counts[word] > compare){
compare = counts[word];
mostFrequent = cats[i];
}
}
return mostFrequent;
})(cats);

Note: I’ve changed cats.length to array.length because now that’s our argument of function which is equal to our cats array.

Well that’s it,,, That’s how you find most frequent item in an array.

Using Reduce (Update)

The performance comparison link that I shared before doesn’t work because jsperf site no longer exists. That’s why I’m sharing the (reduce) example code here.

function findMostFrequest(arr) {
let compare = "";
let mostFreq = "";

arr.reduce((acc, val) => {
if(val in acc){ // if key already exists
acc[val]++; // then increment it by 1
}else{
acc[val] = 1; // or else create a key with value 1
}
if(acc[val] > compare){ // if value of that key is greater
// than the compare value.
compare = acc[val]; // than make it a new compare value.
mostFreq = val; // also make that key most frequent.
}
return acc;
}, {})
console.log("Most Frequent Item is:", mostFreq);
}
let data = ["cat", "dog", "parrot", "dog", "cat", "elephant","elephant","elephant","elephant", "lion", "cat", "elephant", "lion", "lion", "lion", "parrot"];findMostFrequest(data);

If above example is still complicated then feel free to comment or contact me via || Twitter: @AmJustSam

Also, If you haven’t read my previous article about how to vertically center in CSS then here is the link — CLICK HERE

If you like the content, then please feel free to recommend this article to others, So that others can benefit from it as well!

--

--

Usama Tahir

Full Stack Developer, UI/UX Designer & Digital Marketer. A writer who love to share solutions to common problems. @amjustsam