confusing behaviour of Map = new Map()

Question

I was trying to insert some value into a map in my angular project. Map is initialized with below code:

filters: Map<string, string[]> = new Map();

But When I insert some value into this above map is behaving unusual.First Image with Map(1)

sometimes it is giving me the same Map with different value. Look

Second Image with Map(2)

First image is showing Map(1) and the second image is showing Map(2).

I need second type of map after inserting a value. Could anyone can help me out what is the difference between those twos? I am totally stuck for this. Badly need some help. Many Many thanks in advance.

Is anything not working as you expect or is the debugger just showing the map differently in each case? — Eamonn McEvoy, Jan 25 '22 at 18:52
First Image is not working properly while I try to set new map values inside observable subscription. — Md. Ashiqul, Jan 25 '22 at 18:57
Does this answer your question? [Is Chrome’s JavaScript console lazy about evaluating objects?](https://stackoverflow.com/questions/4057440/is-chrome-s-javascript-console-lazy-about-evaluating-objects) — Heretic Monkey, Jan 25 '22 at 19:00

score 0 · Answer 1 · answered Jan 25 '22 at 18:53

your code works fine. it is the devtools feature. At the moment you log your map, you are logging the link to a map, where you can expand it and you will see the actual value (that is why you see the same expanded view in both of the screenshots).

Devtools try to help you a bit and make a string which could help you find your map in the console. But at the moment of logging 2nd item is not yet in the map. Because of the item is not in the map that helper string is not the latest one.

score 0 · Answer 2 · answered Jan 25 '22 at 18:55

Dev tools is showing Map(1) in the console output due to there being only one value present at the time of logging, then it shows Map(2) at the second time of logging.

Map is a reference to an object in dev tools, so when you inspect the Map value by expanding it in dev tools, you will see it's current value.

Here is an example of this in action

const map = new Map();

map.set("a", ["a"]);

console.log(map); // Shows Map(1) as map has one entry

map.set("b", ["a", "b"]);

console.log(map); // Shows Map(2) as map has two entries

confusing behaviour of Map = new Map()

2 Answers2