array.sort() is sorting everything the same way

Question

I'm trying to practice by doing the following exercise:

Write a function that takes a numeric array and returns an object containing two arrays. The first one should have the elements sorted in ascending order, and the second one should have them in descending order.

This is the code without the validation portion (which I know for a fact is not causing any troubles):

function ascDesc(arr) {
   let ascending = arr.sort((a,b) => a - b);
   let descending = arr.sort((a,b) => b - a);
    
   console.log({ ascending, descending });
 }

ascDesc([7,5,2,7,8,6,10,-10]);

This is returning both arrays sorted the same way. I know .sort() doesn't return a new array, and I'm assuming this has something to do with that, but still I don't understand why it is happening, since I'm storing things in two separate variables.

Could someone help me understand? I've already solved it by adding .map(e => e) before the .sort() method. Tried googling and searching here but couldn't seem to find an answer, and MDN is not helping.

As you can see from the output of your `console.log`, `ascending` and `descending` *point* to the same thing. You need to make a copy of the array for your `descending` result (which `.map(e => e)` does). — Nick, Sep 22 '20 at 04:34
What Nick said. Alternatively, log `ascending` before you sort descending, and you’ll see what you expect. — Nate, Sep 22 '20 at 04:35

score 3 · Accepted Answer · answered Sep 22 '20 at 04:35

3

As you can see I have updated your question with SOSnippet and console log shows that descending is actually just reference to ascending - that means they are the same item in memory - changing one will also change another. Means you have to first make shallow copy of your array by doing .slice()

function ascDesc(arr) {
   let ascending = arr.slice().sort((a,b) => a - b);
   let descending = arr.slice().sort((a,b) => b - a);
    
   console.log({ ascending, descending });
 }

ascDesc([7,5,2,7,8,6,10,-10]);

answered Sep 22 '20 at 04:35

Justinas

41,402
5
66
96

1

To piggyback on this, learning about object mutability / references in Javascript is very useful. Here's a good read: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects – Elbert Bae Sep 22 '20 at 04:38
2

@ElbertBae To piggyback on your piggyback, here's a good read about shallow vs deep copy: https://medium.com/@manjuladube/understanding-deep-and-shallow-copy-in-javascript-13438bad941c – Justinas Sep 22 '20 at 04:41

score 1 · Answer 2 · answered Sep 22 '20 at 04:39

In Javascript, array variable is passed by reference, which means your ascending, descending, and arr are all pointed to the same memory reference and value.

A simple solution is to clone your array into a new reference using spreading operator would solve your problem:

function ascDesc(arr) {
   let ascending = [...arr].sort((a,b) => a - b);
   let descending = [...arr].sort((a,b) => b - a);
    
   console.log({ ascending, descending, arr });
 }

ascDesc([7,5,2,7,8,6,10,-10]);

array.sort() is sorting everything the same way

2 Answers2