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

There is a 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"]

Simplest and most human readable option: console.table

const mapObject = new Map();
mapObject.set(1, 'hello');
mapObject.set(2, 'world');
mapObject.set('foo', 'bar');

console.table(mapObject);

NodeJS output looks like this:

┌───────────────────┬───────┬─────────┐
│ (iteration index) │  Key  │ Values  │
├───────────────────┼───────┼─────────┤
│         0         │   1   │ 'hello' │
│         1         │   2   │ 'world' │
│         2         │ 'foo' │  'bar'  │
└───────────────────┴───────┴─────────┘

Chrome dev tools console output looks like this:

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 => "A"})]
  }),
  h: {i: mkMap({j: 46, jj: new Map([[[1, 6], 2]])})},
  k: mkMap({l: mkMap({m: [true, null, undefined]})})
});

console.log(convertMapToObjDeeply(map));

I realize this is most likely intended for the browser console but this also occurs in Node. So, you may use this in Node to view Maps (or an Object that may contain Maps):

import * as util from "util";

const map: Map<string, string> = new Map();
map.set("test", "test");

const inspected: string = util.inspect(map);

console.log(inspected);

Try this:

let mapObject = new Map();
mapObject.set("one", "file1");
mapObject.set("two", "file2");
mapObject.set("three", "file3");
console.log([...mapObject.entries()]);

the output will be:

[ [ 'one', 'file1' ], [ 'two', 'file2' ], [ 'three', 'file3' ] ]

The problem with this solution, is that the output changes if we add a previous string:

console.log("This is a map: " + [...mapObject.entries()]);

the output will be:

This is a map: one,file1,two,file2,three,file3

the solution can be found here

you can use console.log(mapObject.values())

In my case (regular browser console in Chrome V 115, Immutable Map) I could use

console.dir(myMapObject.toJS());

It contained a great deal of information more than I needed, but better too much than too little.

You can use this script to convert the map to a array and print it. Make sure that the entries in the map can be stringified.

function printMap(map) {
  const entries = map.entries();

    const arr = new Array();

    let entry = entries.next();

    while (!entry.done) {
      arr.push({ [entry.value[0]]: entry.value[1] });

      entry = entries.next();
    }

    return arr;
    
}