Blog

To sort an array without mutating in JavaScript, you can use any of these methods –

1. Use the spread operator to create a shallow copy of the array before sorting.
2. Use Array.slice() to create a shallow copy of the array before sorting.
3. Use Object.assign() to create a shallow copy of the array before sorting.
4. Use Array.from() to create a shallow copy of the array before sorting.

Let’s discuss each of the above methods in detail below.

Sort An Array Without Mutating In JavaScript

1. Use the spread operator

The spread operator allows you to spread the elements of an array into another array or into individual elements.

We can use the spread operator to create a shallow copy of an array and then sort it without mutating the original array.

See the code below.

const numbers = [-5, 10, 3, 7];

const sortedNumbers = [...numbers].sort((a,b) => a-b);

console.log(sortedNumbers); //[-5, 3, 7, 10]

For letters, use the below code –

const letters = [‘d’, ‘c’, ‘a’, ‘b’];

const sortedLetters = [...letters].sort();

console.log(sortedLetters); //["a", "b", "c", "d"]

2. Use Array.slice()

Array.slice() is a method that returns a shallow copy of a portion of an array.

We can use this method to create a shallow copy of an array and then sort it without mutating the original array. See the code below.

const numbers = [-5, 10, 3, 7];

const sortedNumbers = numbers.slice().sort((a,b) => a-b);

console.log(sortedNumbers); //[-5, 3, 7, 10]

For letters, use the below code –

const letters = [‘d’, ‘c’, ‘a’, ‘b’];

const sortedLetters = letters.slice().sort();

console.log(sortedLetters); //["a", "b", "c", "d"]

3. Use Object.assign()

Object.assign() is a method that copies the values of all enumerable own properties from one or more source objects to a target object.

We can use this method to create a shallow copy of an array and then sort it without mutating the original array. See the code below.

const numbers = [-5, 10, 3, 7];

const sortedNumbers = Object.assign([], numbers).sort((a,b) => a-b);

console.log(sortedNumbers); //[-5, 3, 7, 10]

For letters, use the below code –

const letters = [‘d’, ‘c’, ‘a’, ‘b’];

const sortedLetters = Object.assign([], letters).sort();

console.log(sortedLetters); //["a", "b", "c", "d"]

4. Use Array.from()

Array.from() is a method that creates a new Array instance from an array-like or iterable object.

We can use this method to create a shallow copy of an array and then sort it without mutating the original array. See the code below.

const numbers = [-5, 10, 3, 7];

const sortedNumbers = Array.from(numbers).sort((a,b) => a-b);

console.log(sortedNumbers); //[-5, 3, 7, 10]

For letters, use the below code –

const letters = [‘d’, ‘c’, ‘a’, ‘b’];

const sortedLetters = Array.from(letters).sort();

console.log(sortedLetters); //["a", "b", "c", "d"]

NOTE: The above methods will only work if the array contains primitive data types like numbers and strings.

If the array contains objects, then you will have to use a custom sorting function as shown below.

const friends = 

        [{ name: "John", age: 30 },        

        { name: "Mike", age: 23 },

        { name: "Peter", age: 19 }];

const sortedFriends = friends.sort((a, b) => a.age – b.age);

console.log(sortedFriends);

[{

age: 19,

name: “Peter”

}, {

age: 23,

name: “Mike”

}, {

age: 30,

name: “John”

}]

Conclusion

In this article, we discussed how to sort an array without mutating in JavaScript.

We looked at four different methods that can be used to achieve this – using the spread operator, Array.slice(), Object.assign(), and Array.from().

We also looked at how to use a custom sorting function when the array contains objects.

I hope this article has been helpful to you and that you will be able to use these methods in your own projects.