基于出现次数的数组排序

Question

Can someone explain what is happening in this code?

Question

Sort array in descending order based on the number of occurrences of an element

sample input:

let chocoArr= ["red", "blue", "green", "red"];

sample output:

["red", "red", "blue", "green"]

Code

 let chocoArr = ["red", "blue", "green", "red"]; const sortChocolateBasedOnCount = (chocolates) => { let cho = chocolates.reduce(function(temp1, temp2) { if (temp2 in temp1) { temp1[temp2]++; } else { temp1[temp2] = 1; } return temp1; }, {}); let Array = chocolates.sort((temp1, temp2) => { if (cho[temp2] > cho[temp1]) { return 1; } if (cho[temp2] < cho[temp1]) { return -1; } if (temp1 > temp2) { return 1; } if (temp1 < temp2) { return -1; } }); chocolates = Array; } console.log(sortChocolateBasedOnCount(chocoArr));

Answer 1

There are some issues with this code.

• First thing is the function sortChocolateBasedOnCount doesnot return a value, That I have fixed in below code
• Inside the sortChocolateBasedOnCount function a variable is named as Array , that is not allowed. Array is a reserved keyword which cannot be used as variable name.

Initially your function sortChocolateBasedOnCount recieves an array as the argument. This array is same as chocoArr . This array is reduced into an Object usung Array.reduce .

The reduce function loops through the values in the input color array. These value are saved as the keys of accumularor and the values will be the count of same. The loop will be executed 4 times, since the input array has 4 items. Please find the below list for the values of Initial value of the accumulator and the current value, when the loop starts execution, also the Final Value of Accumulator stored when the loop execution is over.

If the key is found for first time, the value will be saved as 1 and the value will be incremented for further occurances

• Itration 1: Accumulator Initial: {} , CurrentValue: red , Accumulator Final { red: 1 }
• Itration 2: Accumulator Initial: { red: 1 } , CurrentValue: blue , Accumulator Final { red: 1, blue: 1 }
• Itration 3: Accumulator Initial: { red: 1, blue: 1 } , CurrentValue: green , Accumulator Final { red: 1, blue: 1, green: 1 }
• Itration 4: Accumulator Initial: { red: 1, blue: 1, green: 1 } , CurrentValue: red , Accumulator Final { red: 2, blue: 1, green: 1 }

The output of the reduce function will be the name of color as key and the count of each color in the array as value.

{ red: 2, blue: 1, green: 1 }

Find the first log in the fiddle for the above.

Your input array which is the color list array is next sorted based on the count in the above object based on below logic

• Inital sorting is done based on value for each key returned from reduce function. That is handled by first two if
• If both have same count then alphabetical sorting is done with last two if.
• If none of the conditions are met the sort function should return 0

Updated Code

 let chocoArr = ["red", "blue", "green", "red"]; const sortChocolateBasedOnCount = (chocolates) => { let cho = chocolates.reduce(function (temp1, temp2) { // temp1 holds the accumulator // temp2 holds the current value of array loop if (temp2 in temp1) { temp1[temp2]++; } else { temp1[temp2] = 1; } return temp1; }, {}); console.log(cho); let sortedAray = chocolates.sort((temp1, temp2) => { if (cho[temp2] > cho[temp1]) { return 1; } if (cho[temp2] < cho[temp1]) { return -1; } if (temp1 > temp2) { return 1; } if (temp1 < temp2) { return -1; } return 0; }); return sortedAray; } console.log(sortChocolateBasedOnCount(chocoArr));

A clear version of code updating some variable namings will look like below.

 let chocoArr = ["red", "blue", "green", "red"]; const sortChocolateBasedOnCount = (chocolates) => { let reducedChocolate = chocolates.reduce(function (acc, curr) { if (curr in acc) { acc[curr]++; } else { acc[curr] = 1; } return acc; }, {}); console.log(reducedChocolate); let sortedAray = chocolates.sort((a, b) => { if (reducedChocolate[b] > reducedChocolate[a]) { return 1; } if (reducedChocolate[b] < reducedChocolate[a]) { return -1; } if (a > b) { return 1; } if (a < b) { return -1; } return 0; }); return sortedAray; } console.log(sortChocolateBasedOnCount(chocoArr));

Answer 2

The issues with the code:

1. let Array = while not wrong, if you wanted to do new Array or some other Array method (not instance, but Array.from etc) later in that function, it would not work, since you've clobbered Array with the result of the sort
2. chocolates = Array; is pointless, has no effect on anything at all
3. the function doesn't return any value similar operation on a list of fruits for instance
4. the sort never returns 0 (when both elements are equal) instead it returns undefined - works, but poor practice
5. the choice of argument names, especially for the reduce, is poor, to say the least

So, fixing these first 3 issues, and the other 2 "style problems"

 let chocoArr = ["red", "blue", "green", "red"]; const sortChocolateBasedOnCount = (chocolates) => { let counts = chocolates.reduce(function(accumulator, choco) { if (choco in accumulator) { accumulator[choco]++; } else { accumulator[choco] = 1; } return accumulator; }, {}); let result = chocolates.sort((a, b) => { if (counts[b] > counts[a]) { return 1; } if (counts[b] < counts[a]) { return -1; } if (a > b) { return 1; } if (b < a) { return -1; } return 0; }); // important note - the incoming array WILL be sorted too //chocolates = result; //doesn't achieve anything return result; } console.log(sortChocolateBasedOnCount(chocoArr)); console.log(chocoArr);

---

But, you can do better, because, the function name is a little to restrictive, what if you wanted to do a similar sort on fruits, create an identical function called sortFruitsBasedOnCount ? that'd be redundant

Also, if you don't want to mutate the original array, you can do something about that too

The mix of function (temp1, temp2) in the reduce and (temp1, temp2) => in sort... why? use one style if you can (and you can)

So, let's make some more changes

 let chocoArr = ["red", "blue", "green", "red"]; const sortOnWordCount = (words) => { const counts = words.reduce((acc, word) => { acc[word] = (acc[word] || 0) + 1; return acc; }, {}); return [...words].sort((a, b) => { const diff = counts[b] - counts[a]; if (diff) { return diff; } return a.localeCompare(b); }); } console.log(sortOnWordCount(chocoArr).join()); console.log(chocoArr.join()); // note this is unchanged // same function, different array let fruitArr = ["banana", "apple", "banana", "orange"]; console.log(sortOnWordCount(fruitArr).join());

imagine if that last line was

 sortChocolateBasedOnCount(fruitArr);

It would look odd

acc[word] = (acc[word] || 0) + 1; - perfectly valid alternative to the if/else in the original code

replace [...words].sort with just words.sort and the incoming array will be mutated as it is in the first code

in sort, you can return a negative, positive or zero... not just -1 1 and 0

so, const diff = counts[b] - counts[a]; calculates the difference (so we only need to do the counts[a] stuff once, not twice

If that's not zero, just return it

Otherwise, use the string localeCompare method which returns -1, 0 or 1 depending on the lexical order of the two strings... one line instead of effectively 5

---

If small code size wins points - but still with meaningful funciton names

 let chocoArr = ["red", "blue", "green", "red"]; const sortOnWordCount = (words) => { const counts = words.reduce((acc, word) => (acc[word] = (acc[word] || 0) + 1, acc), {}); return [...words].sort((a, b) => (counts[b] - counts[a]) || a.localeCompare(b)); }; console.log(sortOnWordCount(chocoArr));