changing just one instance of a javascript map

Question

just wondering what the best way to do this is. I set up a javascript map. then I assign instances of the map to an object. however when I change one of the instances of the object it changes other instances of the map. so if your run the code below you will notice temparature is changed to 10 for all instances of cold where it should do if just for the last one.

I put the a runnable snippet below. and I also have a fiddle here https://jsfiddle.net/bupLsf9n/ (I think it is easier to read the console.log on the fiddle)

var myMap = new Map([
  ["hot", { temperature: 100 }],
  ["warm", { temperature: 50 }],
  ["cold", { temperature: 0 }],
]);

var data = [
  { id: 1, map: myMap.get("hot") },
  { id: 2, map: myMap.get("warm") },
  { id: 3, map: myMap.get("cold") },
  { id: 4, map: myMap.get("hot") },
];
$(document).ready(function() {
  data.filter(x => x.id == 4)[0].map.temperature = 10;
  console.log(data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

But there is only **one** instance of the object with any given key. The `.get()` function does not return a copy. — Pointy, Jul 28 '18 at 12:33
In other words `data[1].map === data[4].map` (well not exactly but you know what I mean probably) — Pointy, Jul 28 '18 at 12:35
yeah I figured that, so how do I make a copy of the map instance? — Bryan Dellinger, Jul 28 '18 at 12:45
Looks like a duplicate of [this one](https://stackoverflow.com/q/728360/4279361) — Joerg S, Jul 28 '18 at 14:16

Jayffe · Accepted Answer · 2018-07-28T13:12:36.243

If you want data[x].map to be a different intance of Map, you can do this like that eventually, but i'm not sure that's what you want :

var myMap = () => new Map([
  ['hot', {
    'temperature': 100
  }],
  ['warm', {
    'temperature': 50
  }],
  ['cold', {
    'temperature': 0
  }],
]);

var data = [{
    id: 1,
    map: myMap().get('hot')
  },
  {
    id: 2,
    map: myMap().get('warm')
  },
  {
    id: 3,
    map: myMap().get('cold')
  },
  {
    id: 4,
    map: myMap().get('hot')
  },
]
$(document).ready(function() {
  data.filter(x => x.id == 4)[0].map.temperature = 10;
  console.log(data[0]);
  console.log(data[3]);
  //data[0].map != data[3].map
});

--

var myMap = () => new Map()

This line returns a function that create a new instance of Map, that's why you have to call it like that in your data array map : myMap() to get a new instance per entry

Edit :

If you want copies of specific values instead of new instances of Map, you can keep your var myMap = new Map([...]) declaration and do this for each entry :

  var data = [{
    id: 1,
    map: Object.assign({}, myMap.get('hot'))
  }, //etc...
  ]

but like @Pointy said in the comments, this will only make a shallow copy of the object, hope it helps

How does this address the problem? The OP wants the `map` properties to be *copies* of the values (objects) stored in the `Map` instance. — Pointy, Jul 28 '18 at 13:01
do you mean a copy like that `map: Object.assign({}, myMap.get('hot'))`? — Jayffe, Jul 28 '18 at 13:08
Yes, that would make a (shallow) copy, which might be all the OP needs for this case. In general making an object copy is not a simple process, but that's not your fault :) — Pointy, Jul 28 '18 at 13:09
the copy appears to work. I'll have to try it on monday on my actual mapping which is a bit more complex data structure — Bryan Dellinger, Jul 28 '18 at 13:12

changing just one instance of a javascript map

1 Answers1