toSorted vs sort JavaScript: Which One Copies Your Array?

toSorted vs sort JavaScript in one line: sort() reorders the array you call it on and returns that same array, while toSorted() leaves the original alone and returns a sorted copy. Both follow the same compare function rules. toSorted() arrived with ECMAScript 2023 and works in Chrome 110+, Firefox 115+, Safari 16+ and Node.js 20+.

What is the difference between toSorted() and sort()?

MDN describes toSorted() as the copying version of sort():

• sort() sorts in place and returns a reference to the original array, now sorted. No copy is made.
• toSorted() returns a new array with the elements sorted and does not touch the original.

const a = [3, 1, 2];
const b = a.toSorted(); // b is [1, 2, 3], a is still [3, 1, 2]
a.sort();               // a is now [1, 2, 3]

toSorted() came from the TC39 Change Array by Copy proposal, which also added toReversed(), toSpliced() and with(). TC39's finished-proposals list shows it shipped in 2023.

Is toSorted() slower than sort()?

Not in our test. We sorted 1,000,000 random numbers with (a, b) => a - b in Node.js v20.19.2, best of 7 runs:

• [...arr].sort(): 425.1 ms
• arr.slice().sort(): 407.6 ms
• arr.toSorted(): 409.1 ms
• sort() on a fresh copy, timing only the sort: 415.3 ms

All four are within about 4 percent of each other, which is run-to-run noise on our machine. If you were already copying before sorting, toSorted() does the same job in one call.

Does toSorted() sort numbers correctly?

Only if you give it a compare function, exactly like sort(). Without one, both convert items to strings and compare them in UTF-16 order. In our run, [1, 10, 21, 2].toSorted() returned [1, 10, 2, 21]. Use toSorted((a, b) => a - b) for numbers.

How do the two handle sparse arrays?

They differ. MDN says sort() keeps empty slots and moves them to the end, while toSorted() treats empty slots as undefined. We checked in Node: sorting [3, , 1] with sort() left a real hole at the end, but toSorted() returned [1, 3, undefined] with no hole.

Why is toSorted() handy in React and with frozen arrays?

React's docs say to treat arrays in state as read-only and list sort() among the methods to avoid, because it mutates the array; their example copies first with [...list]. toSorted() gives you the copy and the sort in one step. It also works on frozen arrays: in our check, toSorted() on Object.freeze([3, 1, 2]) returned [1, 2, 3], while sort() on the same array threw a TypeError.

Which browsers and Node versions support toSorted()?

MDN's compatibility data lists Chrome and Edge 110, Firefox 115, Safari 16, Node.js 20.0.0, Deno 1.31 and Bun 1.0. MDN marks it Baseline widely available since July 2023. Internet Explorer has no support.

FAQ

Is toSorted() stable? MDN notes that sort() has been required to be stable since ECMAScript 2019, and toSorted() is its copying version, following the same sorting rules.

Is toSorted() a deep copy? No. It returns a new array, but objects inside it are the same objects as in the original.

Do typed arrays have toSorted()? Yes. The proposal also added toSorted() to typed arrays, and MDN documents TypedArray.prototype.toSorted().

Related

• klona vs structuredClone
• Immer vs Mutative
• es-toolkit vs Lodash

Sources

• 01developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/toSorted
• 02developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
• 03github.com/tc39/proposal-change-array-by-copy
• 04github.com/tc39/proposals/blob/main/finished-proposals.md
• 05react.dev/learn/updating-arrays-in-state