Stack Snippets implement its own display of logged values. For the most part, this works as expected. But not always. In particular, objects are always logged as their own enumerable key-value pairs turned into strings at the time of logging, while functions are converted using .toString()
.
There isn't any custom logic to handle Maps or Sets, hence they are treated as objects and the display of {}
represents an object without own enumerable properties.
There is a very simple workaround by logging all the entries:
const map = new Map()
.set("a", "apple")
.set("b", "banana")
.set("c", "cherry")
.set("d", "durian");
for(const [key, value] of map)
console.log(key, "->" ,value);
const set = new Set()
.add("apple")
.add("banana")
.add("cherry")
.add("durian");
for(const item of set)
console.log(item);
Alternatively, these can be converted to arrays, or objects, or custom strings. But it is rarely needed.
When the browser logging is actually important, your best bet would be to disable the logging in the stack snippet. I also find it a good practice to explicitly direct users to the browser console:
const map = new Map()
.set("a", "apple")
.set("b", "banana")
.set("c", "cherry")
.set("d", "durian");
console.log(map);
<h1>Check the browser console</h1>
The correct output should be:
Map(6) {
'bar' => [ 2 ],
'barks' => [ 2 ],
'black' => [ 1 ],
'foo' => [ 1 ],
'is' => [ 1 ],
'the' => [ 1, 2 ]
}
This is not actually true. There isn't any standard for exactly what and how gets printed in the console. There are conventions that are common between different console implementations, but there isn't any One True Way to display items.
To illustrate this: your example seems to be coming from Node.js. The Chrome console shows:
Map(6) {'bar' => Array(1), 'barks' => Array(1), 'black' => Array(1), 'foo' => Array(1), 'is' => Array(1), …}
and it requires expanding this node for the display to become
[[Entries]]
0: {"bar" => Array(1)}
1: {"barks" => Array(1)}
2: {"black" => Array(1)}
3: {"foo" => Array(1)}
4: {"is" => Array(1)}
5: {"the" => Array(2)}
size: 6
[[Prototype]]: Map
It shows the internal slots for [[Entries]]
and [[Prototype]]
. Also, each entry can be expanded further to show the key
and value
of each entry.
In Firefox, the initial log is:
Map(6) { bar → (1) […], barks → (1) […], black → (1) […], foo → (1) […], is → (1) […], the → (2) […] }
Which itself requires expanding to show the items:
size: 6
<entries>
<prototype>: Map.prototype { … }
Note the internal slot representation is different from Chrome's.
The <entries>
item can further be expanded to show:
0: bar → Array [ 2 ]
1: barks → Array [ 2 ]
2: black → Array [ 1 ]
3: foo → Array [ 1 ]
4: is → Array [ 1 ]
5: the → Array [ 1, 2 ]
Note the arrow is different from Chrome and Node.js'.
Each entry can again expand, but the properties seen are <key>
and <value>
as opposed to Chrome which does not use <>
around them.
This is just three environments. Three consoles that do not even show the same thing. Chrome and Node.js show mostly, but not exactly the same things.
Overall, you should not rely on a specific representation of logged data. Especially in browsers - logging an object in the console tends to add a live reference to the object, so browsers are free to evaluate it. In part, this allows them to attach more data, like internal data (the prototype being most common) which you would not see in other consoles. On the other hand, browsers also tend to evaluate the reference at the time you expand it. Leading to misleading and abnormal looking information in the log:
const arr = [];
console.log(arr);
arr.push("apple");
arr.push("banana");
<h1>Compare with the browser console and expand the logged array</h1>
However, even across different logs for JavaScript, even simple data may be displayed differently.