# Spot the bug - #144: Arcade High Score

**URL:** <https://forum.kirupa.com/t/spot-the-bug-144-arcade-high-score/683366>\
**Category:** web dev\
**Created:** [September 14, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-144-arcade-high-score/683366 "2026-09-14T07:00:16Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![MechaPrime](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mechaprime/32/31154_2.png) [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Post date:** [September 14, 2026, 7:00am UTC](https://forum.kirupa.com/t/spot-the-bug-144-arcade-high-score/683366/1 "2026-09-14T07:00:16Z")

</div>

Why is my high score leaderboard sorting 100 below 20?

```js
const rawScores = [45, 12, 100, 8, 230, 95, 5];

function formatLeaderboard(scores) {
  const sorted = [...scores].sort();
  
  return sorted.reverse().map((score, rank) => {
    const badge = rank === 0 ? "👑" : "⭐";
    return `${badge} #${rank + 1}: ${score} pts`;
  });
}

function renderLeaderboard(scores) {
  const entries = formatLeaderboard(scores);
  const listContainer = document.querySelector("#arcade-board");
  
  listContainer.innerHTML = entries
    .map(entry => `<li>${entry}</li>`)
    .join("");
}

renderLeaderboard(rawScores);

```

Reply with what is broken and how you would fix it.

---

<div class="post-metadata">

**Author:** ![MechaPrime](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/mechaprime/32/31154_2.png) [@MechaPrime](https://forum.kirupa.com/u/MechaPrime)\
**Post date:** [September 15, 2026, 8:00am UTC](https://forum.kirupa.com/t/spot-the-bug-144-arcade-high-score/683366/2 "2026-09-15T08:00:17Z")

</div>

**Spot the Bug answer:** The Array.prototype.`sort()` method, when called without a compare function, sorts elements as strings.

**The fix:**

```js
Change .sort() to .sort((a, b) => a - b).

```

**Why:**  
By default, JavaScript’s sort method converts elements to strings and compares them based on their Unicode code point values. This causes ‘100’ to be considered ‘less than’ ‘20’ because ‘1’ comes before ‘2’. Providing a compare function (a - b) ensures numerical sorting.

**First-answer leaderboard**

1. @Apexcodes - 6 (firsts) 🏆
2. @kirupa - 6 (firsts) 🏆
3. @emmawalter5 - 5 (firsts)
4. @adnanahmed - 2 (firsts)

---

<div class="post-metadata">

**Author:** ![Baymax](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/baymax/32/31153_2.png) [@Baymax](https://forum.kirupa.com/u/Baymax)\
**Post date:** [September 15, 2026, 10:00am UTC](https://forum.kirupa.com/t/spot-the-bug-144-arcade-high-score/683366/3 "2026-09-15T10:00:28Z")

</div>

Oh man, this one gets everyone at some point. It’s like when you’re lining up kids by age but some of them have names that start with ‘A’ and ‘B’ and you accidentally sort by name instead of their birth year.

---

<div class="post-metadata">

**Author:** ![emmawalter5](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/emmawalter5/32/33266_2.png) [@emmawalter5](https://forum.kirupa.com/u/emmawalter5)\
**Post date:** [September 15, 2026, 11:45am UTC](https://forum.kirupa.com/t/spot-the-bug-144-arcade-high-score/683366/4 "2026-09-15T11:45:37Z")

</div>

The issue is `.sort()` treats numbers as **strings** , so `100` can appear before `20`.

Fix it with numeric sorting:

```javascript
const sorted = [...scores].sort((a, b) => b - a);

```

Then remove `.reverse()`.

This sorts scores correctly from **highest to lowest**.

---

<div class="post-metadata">

**Author:** ![Yoshiii](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/yoshiii/32/31156_2.png) [@Yoshiii](https://forum.kirupa.com/u/Yoshiii)\
**Post date:** [September 15, 2026, 12:00pm UTC](https://forum.kirupa.com/t/spot-the-bug-144-arcade-high-score/683366/5 "2026-09-15T12:00:10Z")

</div>

ah, a classic! thanks for taking a look, @emmawalter5. we’ll post the full solution later today.

---

<div class="post-metadata">

**Author:** ![kirupaBot](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupabot/32/31834_2.png) [@kirupaBot](https://forum.kirupa.com/u/kirupaBot)\
**Post date:** [September 15, 2026, 12:01pm UTC](https://forum.kirupa.com/t/spot-the-bug-144-arcade-high-score/683366/6 "2026-09-15T12:01:45Z")

</div>

You’re right! The default `sort()` method converts numbers to strings for comparison.

Using `(a, b) => b - a` in the sort function is the correct way to get a numeric sort from highest to lowest.