why filtering then mapping changes the original array in javascript

Question

const words = [{ref : "a", list: "a & b & c & d", total: 0},
              {ref : "a", list: "a & b & c & d", total: 0},
              {ref : "b", list: "aa & bb & cc & dd", total: 0},
              {ref : "c", list: "aaa & bbb & ccc & ddd", total: 0}];

 var data = words.filter(item => {
            if (item.ref == "a")
              return item;
        });

let result = data.map(o => {
            o.list = o.list.split('&').map(key => ({
                selected: false,
            }))
            return o;
        });
console.log(words);
console.log(result);

I have words array
after filtering for ref : a i'm getting new array data
but when i modifiy the data's object it is reflecting on main array words's. which should not happen.

words
> Array [
Object { ref: "a", list: Array [Object { selected: false }, Object { selected: false }] },
Object { ref: "a", list: Array [Object { selected: false }, Object { selected: false }] },
Object { ref: "b", list: "aa & bb" },
Object { ref: "c", list: "aaa & bbb" }
]

result
> Array [
Object { ref: "a", list: Array [Object { selected: false }, Object { selected: false }] },
Object { ref: "a", list: Array [Object { selected: false }, Object { selected: false }] }
]

In words you can see ref b and ref c is not modified
but ref a is changed. which should not happen in my case

* How to avoid alteration of original array words ? *

`map` returns a new array. But, here `o.list = o.list.split()` you are modifying the objects inside the array. You can change it to something like `data.map(o => ({ ...o, list:o.list.split('&') }) )`. Also, you can simplify filter to: `words.filter(item => item.ref == "a")` — adiga, May 18 '20 at 09:43

Robo Robok · Accepted Answer · 2020-05-18T10:14:05.980

1

Your .map() call changes the list property of the original object. map() returns a new array, but if you change the objects inside it directly, they are affected. Objects are always passed by a reference.

To prevent your map() changing the original array, you need to return a copy of each element:

let result = data.map(o => ({
    ...o,
    points: 10,
    list: o.list.split('&').map(key => ({
        selected: false,
    }))
}));

Of note, you also use filter() wrong. In filter(), you should return true or false to, respectively, keep or reject an element. It's enough to return the result of your condition:

var data = words.filter(item => {
    return item.ref == "a";
});

edited May 18 '20 at 10:14

answered May 18 '20 at 09:39

Robo Robok

21,132
17
68
126

you didn't answered my question `How to avoid alteration of original array words ? ` – Vikas Acharya May 18 '20 at 09:41
this `return item.ref == "a";` doesn't answer my question – Vikas Acharya May 18 '20 at 09:42
1

I did answer your question, read my entire answer carefully. – Robo Robok May 18 '20 at 09:45
ok, you edited your answer many times. which i did't seen. thank you – Vikas Acharya May 18 '20 at 09:48
1

I edited once to add the snippet how to fix your `map()`. The answer why it's behaving like that was there from the start. But thanks. – Robo Robok May 18 '20 at 09:49
hey, i have one more field `total` along with `list`, how to update that number. its not object like list. – Vikas Acharya May 18 '20 at 09:53
I don't know where you have it. Can you update your question? – Robo Robok May 18 '20 at 09:54
Kindly look.... i updated – Vikas Acharya May 18 '20 at 09:56
And what do you want to do with that `total`? With my answer, it's stays there being `0`. – Robo Robok May 18 '20 at 09:58
@ Robo Robok i'm working on a live module. where i need to show total dynamically. can you please show me how to do that – Vikas Acharya May 18 '20 at 10:00
The total of what? You didn't say. – Robo Robok May 18 '20 at 10:01
its the total number of points user have. So, i'm capturing that in my project. – Vikas Acharya May 18 '20 at 10:03
just update it to 10. thank you – Vikas Acharya May 18 '20 at 10:03
Updated, take a look. – Robo Robok May 18 '20 at 10:14

why filtering then mapping changes the original array in javascript

1 Answers1