Javascript - Modifying two arrays in while loop, both arrays retaining second value

Question

I have an array data, that contains a nodeData object, which contains an id

I make 2 copies of the array:

    const dropAboveData = data.slice();
    const dropBelowData = data.slice();

and then I try to modify both copies of my 2 copied arrays differently

    for(let i = 0; i<data.length; i++){
        dropAboveData[i].nodeData.id = -1;
        dropBelowData[i].nodeData.id = -2;
    }

So for example if each record in data had data[i].nodeData.id = 0, at the end i would expect dropAboveData to contain all -1 for id, and dropBelowData to contain all -2 for id.

But instead it seems like data, dropAboveData, and dropBelowData all become arrays filled with -2.

Why is this happening? I though slice() makes a copy of the array so that i'm not accessing the same object?

slice makes array copy but not copy of objects in the array

charlietfl
– charlietfl

2018-07-21 17:29:09 +00:00
Commented Jul 21, 2018 at 17:29 — charlietfl
– charlietfl, Commented Jul 21, 2018 at 17:29
Whats inside data ?

Jonas Wilms
– Jonas Wilms

2018-07-21 17:32:04 +00:00
Commented Jul 21, 2018 at 17:32 — Jonas Wilms
– Jonas Wilms, Commented Jul 21, 2018 at 17:32

Emeeus · Accepted Answer · 2018-07-21 18:14:51Z

1

Slice makes a shallow copy

The slice() method returns a shallow copy of a portion of an array into a new array object selected from begin to end (end not included). The original array will not be modified.

You could copy an array of objects like this:

var data = [{
  'a': '0'
}, {
  'b': '1'
}, {
  'c': '2'
}]
dropAboveData = []
dropBelowData = []

data.map(o => {
  dropAboveData.push(JSON.parse(JSON.stringify(o)));
  dropBelowData.push(JSON.parse(JSON.stringify(o)));
});

dropAboveData[0] = 1; //<-- modify only dropAboveData
dropAboveData[1].b = 99;//<-- modify only dropAboveData

console.log(dropAboveData)
console.log(dropBelowData)

edited Jul 21, 2018 at 18:14

answered Jul 21, 2018 at 17:49

Emeeus

5,2922 gold badges30 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Steven Hsu · Accepted Answer · 2018-07-21 17:46:09Z

0

as charieftl pointed out i was not copying the objects in my array (nodeData objects).

    const dropAboveData = data.map(item => item.nodeData.id = -1);
    const dropBelowData = data.map(item => item.nodeData.id = -2);

did what I wanted.

answered Jul 21, 2018 at 17:46

Steven Hsu

1831 gold badge5 silver badges16 bronze badges

Collectives™ on Stack Overflow

Javascript - Modifying two arrays in while loop, both arrays retaining second value

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related