JavaScript Practice 16/21

Fix the bug: sort() quietly sorts numbers as text

You maintain the monitors page for a small parts shop. It has a "Price: low to high" button and, above the list, a badge reading "Most expensive: $X". Both read from the same sorted array.

A customer wrote in this morning. According to the page, the cheapest monitor in the shop is the $105 one, and the most expensive is the $91 one.

Nothing threw. No red text, no failed request, no undefined on the page. The function ran, handed back an array of the right length holding the right four numbers, and the page rendered it. The order is just wrong, and wrong order still looks like an answer.

Two details before you touch the code. This filter shipped months ago and nobody complained until last week, when the shop listed its first monitor over $100. And the page's own default order - the one the "Featured" tab uses - is scrambled now too, though nothing here asked for that.

Your task: fix byPrice(prices) so it returns the prices sorted low to high, and so the array it was handed comes back untouched. byPrice([88, 105, 91, 76]) is [76, 88, 91, 105], and monitors still reads [88, 105, 91, 76] afterwards.

You'll practice:

Reading a plausible-looking result as a claim, then checking it against a value sitting in front of you
Spotting the two silent things sort() does when you call it with no arguments

// "Price: low to high" for the monitors page. Nothing throws - read the output.
function byPrice(prices) {
  return prices.sort();
}

const monitors = [88, 105, 91, 76];
const listed = byPrice(monitors);

console.log("Low to high:", listed);
console.log("Most expensive:", listed[listed.length - 1]);
console.log("Featured tab still in the page's own order?", monitors);