Fix Problem with .sort() method in JavaScript, two arrays sort instead of only one

One property of the Array.prototype.sort() function is that it is an in-place sorting algorithm, which means it does not create a new copy of the array to be sorted, it sorts the array without using any extra space, making it more efficient and performant. But this characteristic sometimes leads to an awkward situation.

Let's understand this with an example. Assume, we have a names array with some string literals. We want to keep the order of this array intact and want another array containing the same elements as the names array but sorted alphabetically.

We can do something like this ?

const names = ['Rakesh', 'Mukesh', 'Ram', 'Anshul', 'Dheeraj'];
let sortedNames = names;
sortedNames = sortedNames.sort();
console.log("Original names:", names);
console.log("Sorted names:", sortedNames);

Original names: [ 'Anshul', 'Dheeraj', 'Mukesh', 'Rakesh', 'Ram' ]
Sorted names: [ 'Anshul', 'Dheeraj', 'Mukesh', 'Rakesh', 'Ram' ]

But as we know in JavaScript, arrays are also objects and objects are copied by reference and not by value, so sorting one array results in sorting of both arrays, which we obviously don't want.

The Problem Explained

When you assign an array to another variable using let sortedNames = names, both variables point to the same array object in memory. Any modification to one affects the other.

Method 1: Using slice() to Create a Copy

The slice() method returns a shallow copy of the array. When called without arguments, it copies the entire array from start to end.

const names = ['Rakesh', 'Mukesh', 'Ram', 'Anshul', 'Dheeraj'];
let sortedNames = names.slice();
sortedNames = sortedNames.sort();
console.log("Original names:", names);
console.log("Sorted names:", sortedNames);

Original names: [ 'Rakesh', 'Mukesh', 'Ram', 'Anshul', 'Dheeraj' ]
Sorted names: [ 'Anshul', 'Dheeraj', 'Mukesh', 'Rakesh', 'Ram' ]

Method 2: Using Spread Operator (Modern Approach)

The spread operator ... is the most modern and clean way to create a shallow copy of an array:

const names = ['Rakesh', 'Mukesh', 'Ram', 'Anshul', 'Dheeraj'];
let sortedNames = [...names].sort();
console.log("Original names:", names);
console.log("Sorted names:", sortedNames);

Original names: [ 'Rakesh', 'Mukesh', 'Ram', 'Anshul', 'Dheeraj' ]
Sorted names: [ 'Anshul', 'Dheeraj', 'Mukesh', 'Rakesh', 'Ram' ]

Method 3: Using JSON Methods (Deep Copy)

For deep copying (useful with nested objects), you can use JSON methods:

const names = ['Rakesh', 'Mukesh', 'Ram', 'Anshul', 'Dheeraj'];
let sortedNames = JSON.parse(JSON.stringify(names));
sortedNames = sortedNames.sort();
console.log("Original names:", names);
console.log("Sorted names:", sortedNames);

Original names: [ 'Rakesh', 'Mukesh', 'Ram', 'Anshul', 'Dheeraj' ]
Sorted names: [ 'Anshul', 'Dheeraj', 'Mukesh', 'Rakesh', 'Ram' ]

Comparison of Methods

Conclusion

The spread operator [...array] is the recommended modern approach for creating array copies before sorting. It's clean, readable, and performs well for most use cases.