Code Buckets

Buckets of code


Reliable console.log output for JavaScript ES6 Map and Set

looking for content after console.log of ES6 set
Console.log an ES6 Set. Where have the contents gone?


Here’s something that has tripped me up a few times now – when you console.log out the contents of a Set or Map in ES6 the it looks empty which isn’t true.


const set = new Set(['sun', 'sea', 'surf']);
console.log(`Set output ${JSON.stringify(set)}`);


Set output {}

The console tells me it is empty and it’s not. This is the same with Maps. This contrasts with Arrays and objects which show the content if logged out using this code. 

If you are using console.log to quickly debug then this is a pain. I often wrap the output in template literals to add context and it’s that string conversion that hides the content. It turns out that objects, arrays, maps, sets and objects all behave slightly differently when logging to the console. So in detail …

Console.log for ….

All examples have been run through Node.js. The same holds true if running through a browser i.e. with React or Angular.



const array = ['sun', 'sea', 'surf'];

console.log(`array ${array}`);
console.log(`array ${JSON.stringify(array)}`);


[ 'sun', 'sea', 'surf' ]
array sun,sea,surf
array ["sun","sea","surf"]

The array plays most nicely with console.log. It displays it’s contents in all circumstances



const object = { sun: 1, sea: 2, surf: 3 };

console.log(`array ${object}`);
console.log(`array ${JSON.stringify(object)}`);


{ sun: 1, sea: 2, surf: 3 }
object [object Object]
object {“sun":1,"sea":2,"surf":3}

Objects will only display correctly in a template literal if the JSON is stringified first. This is why I habitually use JSON.stringify when logging to the console. 

ES6 Set


const set = new Set(['sun', 'sea', 'surf']);

console.log(`set ${set}`);
console.log(`set ${JSON.stringify(set)}`);


Set(3) { 'sun', 'sea', 'surf' }
set [object Set]
set {}

As with arrays and objects, logging the object directly works nicely but wrapping in a template literal hides the content i.e. when it is coerced to a string. The trick of JSON.stringifying the set doesn’t help now.

ES6 Map


const map = new Map([[1, 'sun'], [2, 'sea'], [3, 'surf']]);

console.log(`map ${map}`);
console.log(`map ${JSON.stringify(map)}`);


Map(3) { 1 => 'sun', 2 => 'sea', 3 => 'surf' }
map [object Map]
map {}

As with the Set, Map only logs directly, not when combined in a template literal


  • Logging directly always works
  • Arrays can be logged in a template literal
  • Objects can be logged in a template literal if the JSON is stringified first
  • Sets and Maps don’t log with template literals – they appear empty


The solution is to convert Sets and Maps to arrays before logging out. The following code checks the type and applies the correct logging rule

const objectPrintFormatter = (toPrint) => {

    if(toPrint instanceof Set || toPrint instanceof Map) {
        return JSON.stringify(Array.from(toPrint));
    else if(toPrint instanceof Object) {
        return JSON.stringify(toPrint);
    return toPrint;

const array = ['sun', 'sea', 'surf'];
const set = new Set(['sun', 'sea', 'surf']);
const map = new Map([[1, 'sun'], [2, 'sea'], [3, 'surf']]);
const object = { sun: 1, sea: 2, surf: 3 };

console.log(`array ${objectPrintFormatter(array)}`);
console.log(`set ${objectPrintFormatter(set)}`);
console.log(`map ${objectPrintFormatter(map)}`);
console.log(`object ${objectPrintFormatter(object)}`);


array ["sun","sea","surf"]
set ["sun","sea","surf"]
map [[1,"sun"],[2,"sea"],[3,"surf"]]
object {"sun":1,"sea":2,"surf":3}

Now each type logs its contents to the console rather than appearing empty. The key thing to remember is that if ES6 Sets and Maps appear empty, they may not be. It could just be the way they are being logged out to the console.


As ever, the code is on my GitHub site here

Useful Links
Map and Set official documentation fromt the ES6 standard.
JSON.stringify documentation
I’ve an additional post about extending the ES6 Map Typescript definition to include a toJSON which also solves this issue of ES6 types not displaying their content in the console. Embarrasingly, I forgot that I’d written this post a few years ago on the same topic. I think this latest post adds some additional context by comparing the functionality across several different objects, so I’ll leave both in.


Your email address will not be published. Required fields are marked *