0
var cars = [{"a":1,"b":2},{"b":3,"c":5}];
var temp=[];
[...cars].map((item)=>{
temp.push(item)
})

temp[0]["a"]=3
console.log(cars[0]["a"]) // op->3`enter code here`

Why the cars array value is changing ,while changing temp array? What is better solution so that cars array doesn't change?

Shankar Nanda
  • 129
  • 4
  • 11
  • 2
    JSON is a *textual notation* for data exchange. [(More here.)](http://stackoverflow.com/a/2904181/157247) If you're dealing with JavaScript source code, and not dealing with a *string*, you're not dealing with JSON. – T.J. Crowder May 12 '20 at 12:56
  • ehm `temp = cars;`? – bill.gates May 12 '20 at 12:57

2 Answers2

3

There are a couple of problems there, but the fundamental thing is that while you're creating a new array, you're not creating new objects. So both arrays contain the same objects, so when you change the state of one of those objects, you see that change regardless of which array you look in.

To make a shallow copy of an object, you can use spread notation:

var temp = cars.map(obj =>({...obj}));

That creates a new array and new objects in the array.

Separately: Don't use map if you're not going to use the array it returns. Someone, somewhere, is incorrectly teaching people to use map just to loop through things. It's not the right tool for that (use any of these options instead).

In your case, though, since you did want a new array, map is a good choice, just use it as above to directly create your array, rather than using just for the loop.

T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
2

You're doing a shallow copy of the object inside the map(), also you need to use the map() function in a right way. Map function returns a new array, so assign it to temp. Make a deep clone this way:

var cars = [{
  "a": 1,
  "b": 2
}, {
  "b": 3,
  "c": 5
}];
var temp = [...cars].map((item) => ({ ...item }));

temp[0]["a"] = 3;
console.log("temp: ", temp[0]["a"]);
console.log("cars: ", cars[0]["a"]);
Praveen Kumar Purushothaman
  • 164,888
  • 24
  • 203
  • 252
  • @T.J.Crowder Yep, true... Ah, I forgot to mention that in the answer. As it was in the original question, I just left it as is. – Praveen Kumar Purushothaman May 12 '20 at 15:38
  • Doh! It is in the original question, isn't it? I kind of ignored that code as soon as I saw `map` without using the return value -- might as well wave a flag in front of a bull! ;-) – T.J. Crowder May 12 '20 at 16:17