Is Array.sort() ineffective when dealing with extensive arrays?

Question

Is Array.sort() ineffective when dealing with extensive arrays?

Why is Array.sort() failing on large arrays? Did I overlook something? I have double-checked to ensure that I'm not accidentally sorting strings. I'm struggling to comprehend why this is failing

Here is the code snippet I pasted from Chrome Debugger's Watch:

https://i.sstatic.net/VZmdS.png

Feel free to play around with this code:

arr = [1.238648000000012,1.5776880000000233,1.6462280000000078,10.007896000000017,10.014455999999996,10.016970000000015,10.018888000000004,10.028069000000016,10.047926000000018,10.056818000000021,10.057980999999984,10.075353000000007,10.086242000000027,10.088684999999998 ...

output = document.getElementById("output");
output.innerHTML += Math.max(...arr) + '<br />';
output.innerHTML += arr.sort()[arr.length-1] + '<br />';
output.innerHTML += arr.sort()[arr.length-2] + '<br />';
output.innerHTML += arr.sort()[0] + '<br />';

output.innerHTML += '---------------------------------------' + '<br />'

a = [1,2,3,0];
output.innerHTML += Math.max(...a) + '<br />';
output.innerHTML += a.sort()[a.length-1] + '<br />';
output.innerHTML += a.sort()[a.length-2] + '<br />';
output.innerHTML += a.sort()[0] + '<br />';

<html>
  <body>
    <div id='output'></div>
  </body>
</html>

Is it not expected for the last element in the sorted array to be the maximum value?

javascript arrays sorting

Answer 1

Answer №1

If you need to arrange numbers in ascending order, make sure to include a callback function. Omitting a callback will result in the numbers being sorted as strings, as mentioned on MDN

By default, the sort method converts elements to strings and then compares their UTF-16 code unit values.

var array = [1, 10, 100, 20];

array.sort((a, b) => a - b);
console.log(...array);

array.sort();
console.log(...array);

Important: The sort() function alters the original array. Be cautious when using it to avoid unexpected behavior, as it may cause issues in certain scenarios.

Answer 2

If you need to arrange numbers in ascending order, make sure to include a callback function. Omitting a callback will result in the numbers being sorted as strings, as mentioned on MDN

By default, the sort method converts elements to strings and then compares their UTF-16 code unit values.

var array = [1, 10, 100, 20];

array.sort((a, b) => a - b);
console.log(...array);

array.sort();
console.log(...array);

Important: The sort() function alters the original array. Be cautious when using it to avoid unexpected behavior, as it may cause issues in certain scenarios.

Answer 3

Answer №2

Using Math.max in this manner may lead to unreliable results as stated in the MDN documentation:

It is important to note that both spread (...) and apply methods may fail or produce incorrect results when the array contains a large number of elements. This is because they attempt to pass each array element as a function parameter. For more information, refer to the documentation on using apply and built-in functions. The reduce method does not suffer from this issue.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max

Answer 4

Using Math.max in this manner may lead to unreliable results as stated in the MDN documentation:

It is important to note that both spread (...) and apply methods may fail or produce incorrect results when the array contains a large number of elements. This is because they attempt to pass each array element as a function parameter. For more information, refer to the documentation on using apply and built-in functions. The reduce method does not suffer from this issue.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/max

Is Array.sort() ineffective when dealing with extensive arrays?

Answer №1

Answer №2

Similar questions

The catch block seems to be failing to capture the errors thrown by the fetch API

Menu options are unresponsive to clicks in the dropdown

Is there a way to refresh angular bindings using data retrieved from a getUserMedia stream?

Error message "Exceeded the maximum call stack size" encountered during Vue-router authentication

Ways to extract metadata from a given URL

Issue arising from background change upon component focus

Load a CSV document and add its contents to an existing array

Combining multer, CSRF protection, and express-validator in a Node.js environment

Interacting with dynamically loaded HTML content within a div is restricted

Naming axes in Chart.js is a simple process that can easily be implemented

Modifying the color of a specific div using jQuery

Customizing the appearance and dimensions of JWPlayer Audio Player with percentage-based styling

Comparison: executing an immediately invoked function expression (IIFE) and a separate

Tips for adding extra spacing between icon and text field using Vuetify

Can Node.js fetch a PHP file using AJAX?

ng-class not functioning properly when invoked

How can I use a button created with jQuery's .html() method to conceal a <div>?

Dropzone.js only allows one audio file and one image thumbnail file to be uploaded simultaneously

Ways to expand a Bootstrap input field by clicking on it:

A simple guide to fetching JSON data and storing it in a variable, then parsing it and displaying it