Sort() is mutating my original array. Is there a different workaround?

Question

I've searched other threads and I couldn't find a working solution to my problem. I tried slice() for the array but no luck. I've got a array, first I create a copy of the original array and after a few second I overwrite one value [0][1]=555. And this affects my copy/original array, the value 1000 gets overwritten with 555. Any ideas on how to overcome this? I need to compare the two tables after the value gets changed. Here is my javascript code:

let intialstationtablevalues = [
["station name 1",75,100,100,100,100,100,100,0,100,100,100,100,1],
["station name 2",200,220,100,100,100,100,100,2,100,100,100,100,2],
["station name 3",300,110,100,100,100,100,100,0,100,100,100,760,3],
["station name 4",400,100,109,100,100,100,100,3,100,100,100,100,4],
["station name 5",500,100,100,100,100,100,100,0,100,100,100,100,5],
["station name 6",600,130,134,100,100,100,100,2,100,100,100,340,6],
["station name 7",700,100,100,100,100,100,100,0,100,100,100,100,7],
["station name 8",800,200,340,100,100,100,100,5,100,100,100,10,8],
["station name 9",900,100,100,100,100,100,100,0,100,100,100,6,9],
["station name 10",1000,100,900,100,100,100,100,2,100,100,100,100,10],
];
let old = []
let copy = []


setInterval(read,2000)
setTimeout(changevalue,10000)

function changevalue(){
  console.log("value changed")
  intialstationtablevalues[0][1]=555;
}


function read(){
        if(copy==""){
            copy = intialstationtablevalues.slice()
      }
        sortnow = intialstationtablevalues.sort(function(a,b){
            return b[1]-a[1];
        })

        console.log("sortnow",sortnow)

        if(old==""){
            copy.forEach(function(item,index){
                old.push(item)
            })
            old.sort(function(a,b){
                return b[1]-a[1];
            })
        }

        console.log("old",old)
}

You make a copy with `.slice()` but then you proceed to sort the original array anyway. The `.sort()` method sorts the array for which it's invoked. — Pointy, Nov 08 '19 at 16:10
`.slice` is the correct solution but you've fallen into shallow vs deep copy confusion — Aluan Haddad, Nov 08 '19 at 16:12
https://stackoverflow.com/questions/122102/what-is-the-most-efficient-way-to-deep-clone-an-object-in-javascript — epascarello, Nov 08 '19 at 16:13
`if(copy=="")` - That's not how you should test for an empty array. It works but only because JavaScript has truthy/falsy values. — Andreas, Nov 08 '19 at 16:14
Aluan Haddad so is there a way of doing this right to get what I want ? — ukulele, Nov 08 '19 at 16:17

Viktor Garba · Accepted Answer · 2019-11-08T16:31:29.887

2

sortedArray = [...arrayYouWantToSort].sort() Spreading the array you want to copy into a new array and then sort that array. Fun way to do it!

sortedArray = [...arrayYouWantToSort];
sortedArray[0][1] = whatever // whatever you wanna change
sortedArray.sort()

The main point is that spreading the arrayYouWantToSort into a new array literal creates a new array in memory. So arrayYouWantToSort and sortedArray are now total different physical parts of memory, but they have the same 'values'. So you can change values in one without affecting the other.

So you first create the copied array, and then mutate the new array.

edited Nov 08 '19 at 16:31

answered Nov 08 '19 at 16:14

Viktor Garba

303
2
5

Ah didn't read the whole thing sorry. Still just use the spread operator. Ill update my response – Viktor Garba Nov 08 '19 at 16:30
Well I think I've done it correctly if(copy.length===0){ copy = [...intialstationtablevalues] } – ukulele Nov 08 '19 at 16:44
should do it. And then use the copy – Viktor Garba Nov 08 '19 at 16:44
it still throws the 555 value in the copy array or maybe I'm doing somethind wrong...;) – ukulele Nov 08 '19 at 16:46
Hmm. The only way that could happen is either intialStationableValues has 555 set before you spread, or you set it after. What is the point of this function exactly? – Viktor Garba Nov 08 '19 at 16:51
well this is just a small fragment of a bigger project that I'm working on. I'm working with dynamically changing value and I need to compare coming in new values with the old ones, and based on that make suitable actions. ...I gave the change 555 value a timeout of 10seconds just to make sure – ukulele Nov 08 '19 at 16:59
is it possible for you to copy the code and console.log it in your browser to check if it's only me getting this effect ? ;) – ukulele Nov 08 '19 at 17:00
OK. I found a solution. copy = JSON.parse(JSON.stringify(intialstationtablevalues)) – ukulele Nov 08 '19 at 17:24
Thanks for trying to help me. I appreciate it :) – ukulele Nov 08 '19 at 17:27

score -1 · Answer 2 · answered Nov 08 '19 at 16:21

-1

I think .slice() is working fine here, try to replace the if statment with

if(copy.length ===0)

to check the empty array

answered Nov 08 '19 at 16:21

M.Amer

658
6
13

I'm still getting the same 555 result in the copy array – ukulele Nov 08 '19 at 16:26

Sort() is mutating my original array. Is there a different workaround?

2 Answers2