How can I Display a JavaScript ES6 Map Object to Console?

Question

I'm using repl.it/languages/javascript.

Do I have to convert it to an object before I print it out?

I've tried

    const mapObject = new Map();
    
    mapObject.set(1, 'hello');
    
    console.log(JSON.stringify(mapObject));
    console.log(mapObject);

The results are always empty object.

When I use

console.log([...mapObject]);

It prints out an array format.

Answer 1

there is a more simpler solution you can try.

 const mapObject = new Map();   
 mapObject.set(1, 'hello');

 console.log([...mapObject.entries()]);
 // [[1, "hello"]]

 console.log([...mapObject.keys()]);
 // [1]

 console.log([...mapObject.values()]);
 // ["hello"]

Answer 2

For simple maps that are of depth 1, just use Object.fromEntries([...map]) to convert your object entries array back to a console loggable object:

const simpleObj = {
  a: [1, 2, 3],
  b: {c: {d: 42}}
};
const map = new Map(Object.entries(simpleObj));
console.log(Object.fromEntries([...map]));

This fails for complex nested maps, however. For that, we can recursively convert any Maps to objects and then log it as normal. Here's a proof-of-concept on a complex structure combining plain objects, Maps, arrays and primitives. Don't expect it to cover every edge case out of the box, but feel free to point out improvements.

const convertMapToObjDeeply = o => {
  const recurseOnEntries = a => Object.fromEntries(
    a.map(([k, v]) => [k, convertMapToObjDeeply(v)])
  );
  
  if (o instanceof Map) {
    return recurseOnEntries([...o]);
  }
  else if (Array.isArray(o)) {
    return o.map(convertMapToObjDeeply);
  }
  else if (typeof o === "object" && o !== null) {
    return recurseOnEntries(Object.entries(o));
  }
  
  return o;
};

const mkMap = o => new Map(Object.entries(o));

const map = mkMap({
  a: 42, 
  b: [1, 2, 3, mkMap({d: mkMap({ff: 55})})],
  c: mkMap({
    e: [4, 5, 6, {f: 5, x: y => y}, mkMap({g: z => 1})]
  }),
  h: {i: mkMap({j: 46, jj: new Map([[[1, 6], 2]])})},
  k: mkMap({l: mkMap({m: [2, 5, x => x, 99]})})
});

console.log(convertMapToObjDeeply(map));