Get confusion while using "Array. Map" method in JavaScript

Question

My code is :

let obj1 = [
    { city: 'Tokyo', country: 'Japan' },
    { city: 'Bangkok', country: 'Thailand'}
];
function myFunc(arr, key, value){
    let newArr = arr.map((e)=>{
       let obj = e;
       obj[key] = value;
       return obj;
    })
    return newArr
}

console.log(myFunc(obj1, 'continent', 'Asia'));
console.log(obj1);

I don't want to mutate the "obj1" array. That's why I'm using Array.map method. But it still changing the original Array. Does anyone know why this happening? Where I made the mistake?

Because objects are reference types. Do like `let obj = Object.assign({},e)`. — Redu, Jan 16 '22 at 18:57

score 1 · Answer 1 · answered Jan 16 '22 at 19:03

You could take a new object and spread the old one.

function myFunc(arr, key, value){
    return  arr.map(e => ({ ...e, [key]: value }));
}

let obj1 = [{ city: 'Tokyo', country: 'Japan' }, { city: 'Bangkok', country: 'Thailand'}];

console.log(myFunc(obj1, 'continent', 'Asia'));
console.log(obj1);

.as-console-wrapper { max-height: 100% !important; top: 0; }

score 0 · Accepted Answer · answered Jan 16 '22 at 19:03

You thought that using the equal operator will copy each object in array so you don't mutate the object

let obj = e;

but what you have in code is another reference to the same item(s) in array.

map itself is not a gurantee you have immutable data structure, you have to correctly copy the data, for objects in js you can use either Object.assign or the spread operater

  let obj = { ...e };
  // or
  let obj = Object.assign({}, e);

Get confusion while using "Array. Map" method in JavaScript

2 Answers2