4 Examples of JavaScript sort without mutating array

JavaScript , 2 Comments

In this article, we will learn JavaScript sort without mutating array with some of the examples.

There are so many different ways to sort an array without mutating in JavaScript and I will try to cover all of them.

As I know, If you want to sort an array without mutating you will need to copy it first and then use the sort() method.

But if you are using your custom algorithms to sort then what can I say?

Well, sometimes we don’t want to modify our original array and that’s the problem with the sort() method when it sort it also modifies the original array.

Let’s see some examples of how we can sort an array without mutating it below:

#1 Simple way

Let’s imagine we have an array var arr = [2,3,7,5,3,7,1,3,4]; see the example below:

var arr = [2,3,7,5,3,7,1,3,4];
var sortedArr = arr.slice().sort();
console.log(sortedArr) // [1, 2, 3, 3, 3, 4, 5, 7, 7]
console.log(arr) // [2, 3, 7, 5, 3, 7, 1, 3, 4]

In the above example, First I copied the array by slice() then sort it using sort method, Yes it’s that simple.

#2 Using Concat

You can also use the concat() method to copy the array and then sort it. like an example below:

var arr = [2,3,7,5,3,7,1,3,4];
var sortedArr = arr.concat().sort();
console.log(sortedArr) // [1, 2, 3, 3, 3, 4, 5, 7, 7]
console.log(arr) // [2, 3, 7, 5, 3, 7, 1, 3, 4]

So, basically concat() method is used to concat two arrays that return a new concatenated array, So if you don’t pass the second array It will return you a new copy of the same array.

In the above example, first I copied the array with concat method and then sort it.

#3 Using Spread syntax

If you don’t have any problem using ES6 so, you can use Spread syntax. I like this one because it is sort, readable and super cool.

If you want to read more about Spread syntax click here

var arr = [2,3,7,5,3,7,1,3,4];
var sortedArr = [...arr].sort();
console.log(sortedArr) // [1, 2, 3, 3, 3, 4, 5, 7, 7]
console.log(arr) // [2, 3, 7, 5, 3, 7, 1, 3, 4]

In the above example, I used Spread syntax to copy the array and then sort it using the sort method.

Note:- Remember that all above examples do the non-deep copy of an array if you have a nested/deep level arrays be careful.

How to deep clone an array?

To deep copy an array you can use JSON. How? See the example below:

var arr = [2,3,7,5,3,7,1,3,4];
var deepCopy = JSON.parse(JSON.stringify(arr));

#4 Using JSON

Implementing sort with JSON below:

var arr = [2,3,7,5,3,7,1,3,4];
var sortedArr = JSON.parse(JSON.stringify(arr)).sort();
console.log(sortedArr) // [1, 2, 3, 3, 3, 4, 5, 7, 7]
console.log(arr) // [2, 3, 7, 5, 3, 7, 1, 3, 4]

In the above example, I did the same I copied the array first but this time using JSON deep copy and then used sort method to sort.

Note: Be careful with non json values. for example it will convert undefined to null. See the example below:

var arr = [1, undefined, 2]
JSON.parse(JSON.stringify(arr)); // => [1, null, 2]

Sources:- mdn concat, Spread syntax

Thank you for reading, If I missed something please let me know in a comment. For more about CSS or JavaScript

Spread the love
  • 3
    Shares

2
Leave a Reply

avatar
1 Comment threads
1 Thread replies
1 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
Rajnish RajputVaibhav Arora Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Vaibhav Arora
Guest
Vaibhav Arora

Good one 👍