.map() function updates previous Variable

Question

I wanted to get value of Object with checked:true as comma separated string.

  var arr = [{
    week_days: [
        {name: 'Mo', value: 'Monday', checked: true},
        {name: 'Tu', value: 'Tuesday', checked: true},
        {name: 'We', value: 'Wednesday', checked: true},
        {name: 'Th', value: 'Thursday', checked: true},
        {name: 'Fr', value: 'Friday', checked: true},
        {name: 'Sa', value: 'Saturday', checked: false},
        {name: 'Su', value: 'Sunday', checked: false}
     ],
    weekend_days: [
        {name: 'Mo', value: 'Monday', checked: false},
        {name: 'Tu', value: 'Tuesday', checked: false},
        {name: 'We', value: 'Wednesday', checked: false},
        {name: 'Th', value: 'Thursday', checked: false},
        {name: 'Fr', value: 'Friday', checked: false},
        {name: 'Sa', value: 'Saturday', checked: true},
        {name: 'Su', value: 'Sunday', checked: true}
     ]
    }];

    const newArr = arr;

    newArr.map((val)=>{
    let w = [];
    let we = [];
        val.week_days.map((val2)=>{
            if(val2.checked == true){
                w.push(val2.value);
            }
        })
        val.weekend_days.map((val3)=>{
            if(val3.checked == true){
                we.push(val3.value);
            }
        })
    val.week_days = w.join();
    val.weekend_days = we.join();
    })

    console.log(arr, newArr);

Expected Output: // Working Fine

newArr = [
   {
     week_days: "Monday,Tuesday,Wednesday,Thursday,Friday",
     weekend_days: "Saturday,Sunday"
   }
]

But the Issue is map() also updates arr.

arr should be same as before.

Unexpected Output:

arr = [
       {
         week_days: "Monday,Tuesday,Wednesday,Thursday,Friday",
         weekend_days: "Saturday,Sunday"
       }
    ]

`newArr = arr` **does not** create a copy. Also you shouldn't use map if you're going to ignore the new array it creates and use it only for side effects; use forEach. — jonrsharpe, Jun 10 '20 at 07:46
Because that's not how JavaScript's model works. It just creates a new reference to the same underlying object. — jonrsharpe, Jun 10 '20 at 08:24
Thanks and After trying with `forEach` the problem remains same. even forEach updates the `arr` — Najam Us Saqib, Jun 10 '20 at 08:32
Yes, note I said *"Also"* - switching from map to forEach doesn't change the separate fact that `arr` and `newArr` are *the same object*. — jonrsharpe, Jun 10 '20 at 08:33
The extraction model isn't very optimal. It could be achieved using other means. That said, see [here](https://stackoverflow.com/q/13104494/6513921) to understand why the original array is also getting modified. A quick way to create a deep copy would be `newArr = JSON.parse(JSON.stringify(arr))`. — ruth, Jun 10 '20 at 08:39
@MichaelD `newArr = JSON.parse(JSON.stringify(arr))` Worked. but i am very confused. — Najam Us Saqib, Jun 10 '20 at 09:43
@NajamUsSaqib: I am not sure if you're new to programming in general. If you aren't clear about passing by value vs passing by reference many good articles are only a google search away. Search for "pass by value vs pass by reference". — ruth, Jun 10 '20 at 10:15

score 1 · Answer 1 · answered Jun 10 '20 at 07:55

@jonrsharpe already told you the reason why it's not working. Nevertheless I would like to suggest a more readable solution without side effect stuff.

const arr = [{
  week_days: [
    {name: 'Mo', value: 'Monday', checked: true},
    {name: 'Tu', value: 'Tuesday', checked: true},
    {name: 'We', value: 'Wednesday', checked: true},
    {name: 'Th', value: 'Thursday', checked: true},
    {name: 'Fr', value: 'Friday', checked: true},
    {name: 'Sa', value: 'Saturday', checked: false},
    {name: 'Su', value: 'Sunday', checked: false}
  ],
  weekend_days: [
    {name: 'Mo', value: 'Monday', checked: false},
    {name: 'Tu', value: 'Tuesday', checked: false},
    {name: 'We', value: 'Wednesday', checked: false},
    {name: 'Th', value: 'Thursday', checked: false},
    {name: 'Fr', value: 'Friday', checked: false},
    {name: 'Sa', value: 'Saturday', checked: true},
    {name: 'Su', value: 'Sunday', checked: true}
  ]
}];
    

const result = arr.map(val => {
  return {
    week_days: val.week_days.filter(x => x.checked).map(x => x.value).join(","),
    weekend_days: val.weekend_days.filter(x => x.checked).map(x => x.value).join(",")
  }
});

console.log(result);

.map() function updates previous Variable

1 Answers1