6

When answering this question, I tried to put my JS-only code into a snippet. Here's the snippet:

const lines = ['The foo is black', 'The bar barks'];

let wordCount = new Map();
for (let i = 0; i < lines.length; i++) {
    const words = lines[i].split(' ');
    for (const word of words) {
        let count = wordCount.get(word.toLowerCase()) || [];
        count.push(i + 1);
        wordCount.set(word.toLowerCase(), count);
    }
}

wordCount = new Map([...wordCount.entries()].sort());
console.log(wordCount);

The snippet prints {}, but this is not the correct output. The correct output should be:

Map(6) {
  'bar' => [ 2 ],
  'barks' => [ 2 ],
  'black' => [ 1 ],
  'foo' => [ 1 ],
  'is' => [ 1 ],
  'the' => [ 1, 2 ]
}

I've tested the exact same code in Chrome and Node.js and they print the correct output there. Furthermore, another user confirmed this in the comments of my answer.

I was really confused about this because I thought snippets just passed the code along to the browser, but if they did that then this snippet should work fine. Is this a bug? If not, then what are the limits of snippets?

1

1 Answer 1

9

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.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .