How to Convert a Map to an Array in TypeScript

To convert a Map to an array in TypeScript, spread it: [...map] gives you an array of [key, value] pairs. For just the keys or the values, spread map.keys() or map.values(), or use Array.from():

const entries = [...inventory];            // [string, number][]
const values = Array.from(inventory.values());   // number[]

The examples use a small coffee shop inventory, and they were compiled and run with TypeScript 7.0.2 on Node.js v22.22.2.

We’ll get entries, keys and values, turn a Map into an array of objects, sort a Map through an array, fix the empty JSON problem, look at a common type error, and try the new iterator helpers.

Convert a Map to an array of entries, keys or values

A Map is iterable, so anything that accepts an iterable can turn it into an array. TypeScript keeps the types: entries are [string, number] tuples here:

const inventory = new Map<string, number>([
  ["coffee", 42],
  ["bagel", 18],
  ["muffin", 25],
]);

const entries = [...inventory];                 // [string, number][]
const keys = [...inventory.keys()];             // string[]
const values = Array.from(inventory.values());  // number[]

console.log(entries);
console.log(keys);
console.log(values);

Output:

[ [ 'coffee', 42 ], [ 'bagel', 18 ], [ 'muffin', 25 ] ]
[ 'coffee', 'bagel', 'muffin' ]
[ 42, 18, 25 ]

Spread and Array.from() give identical results, so pick the one you find clearer. Order always follows insertion order. If you’re starting from an array instead, here’s how to create a Map from an array in TypeScript.

Convert a Map to an array of objects

Most UI code and APIs want objects, not tuples. Array.from() takes a mapping function as its second argument, so you can build each object in one step:

const prices = new Map<string, number>([
  ["Coffee beans", 14.99],
  ["Mug", 9.5],
  ["Filters", 4.25],
]);

const products = Array.from(prices, ([name, price]) => ({ name, price }));
console.log(products);

const labels = [...prices].map(([name, price]) => `${name}: $${price.toFixed(2)}`);
console.log(labels);

Output:

[
  { name: 'Coffee beans', price: 14.99 },
  { name: 'Mug', price: 9.5 },
  { name: 'Filters', price: 4.25 }
]
[ 'Coffee beans: $14.99', 'Mug: $9.50', 'Filters: $4.25' ]

Destructuring ([name, price]) in the parameter list keeps the callback short. Once it’s an array of objects, everything in working with arrays of objects in TypeScript applies.

Sort or filter a Map by converting it to an array

Maps have no sort() or filter(). Convert to entries, use the array method, and build a new Map from the result if you still need one:

// inventory: the Map<string, number> from the first example

const byStock = new Map([...inventory].sort((a, b) => b[1] - a[1]));
console.log("by stock:", byStock);

const byName = new Map([...inventory].sort(([a], [b]) => a.localeCompare(b)));
console.log("by name: ", byName);

const lowStock = [...inventory].filter(([, qty]) => qty < 30).map(([item]) => item);
console.log("low stock:", lowStock);

Output:

by stock: Map(3) { 'coffee' => 42, 'muffin' => 25, 'bagel' => 18 }
by name:  Map(3) { 'bagel' => 18, 'coffee' => 42, 'muffin' => 25 }
low stock: [ 'bagel', 'muffin' ]

The new Map keeps the sorted order because Maps remember insertion order. For comparator details, such as localeCompare, see sorting arrays in TypeScript.

Why does JSON.stringify(map) return {}?

JSON.stringify() only reads an object’s own enumerable properties, and a Map stores its data elsewhere. Convert it to entries or to a plain object first:

// inventory: the Map<string, number> from the first example

console.log("JSON.stringify(map):", JSON.stringify(inventory));
console.log("as entries:", JSON.stringify([...inventory]));
console.log("as object: ", JSON.stringify(Object.fromEntries(inventory)));

const restored = new Map<string, number>(JSON.parse(JSON.stringify([...inventory])));
console.log("restored:", restored.get("muffin"));

Output:

JSON.stringify(map): {}
as entries: [["coffee",42],["bagel",18],["muffin",25]]
as object:  {"coffee":42,"bagel":18,"muffin":25}
restored: 25

Object.fromEntries() works only when keys are strings or numbers. For typed objects like that, a TypeScript Record is the natural type.

Fix: Type ‘[string, number][]’ is not assignable to type ‘string[]’

A frequent mistake is expecting [...map] to give the keys. It gives entries, and strict TypeScript says so:

const inventory = new Map<string, number>([
  ["coffee", 42],
  ["bagel", 18],
  ["muffin", 25],
]);

const names: string[] = [...inventory];

Output:

map_types.ts(7,7): error TS2322: Type '[string, number][]' is not assignable to type 'string[]'.
  Type '[string, number]' is not assignable to type 'string'.

Spread inventory.keys() instead, or map the entries to the part you want. Checking what you’ve got at runtime is covered in checking the type of a variable in TypeScript.

Map to array with iterator helpers (ES2025)

Newer runtimes add map(), filter() and toArray() directly on iterators, so you can skip the spread. TypeScript needs es2025 in lib, and Node.js 22 already supports them:

// inventory: the Map<string, number> from the first example

const items = inventory.keys().toArray();                       // ES2025 iterator helper
const doubled = inventory.values().map((n) => n * 2).toArray();
console.log(items, doubled);

Output:

[ 'coffee', 'bagel', 'muffin' ] [ 84, 36, 50 ]

I’d still use spread in libraries that must run on older browsers, but for current Node.js these read nicely.

Map to array methods at a glance

Goal	Code
Entries [key, value][]	[...map] or Array.from(map)
Keys only	[...map.keys()]
Values only	Array.from(map.values())
Array of objects	Array.from(map, ([k, v]) => ({ k, v }))
JSON	JSON.stringify([...map])

Keep going with these TypeScript guides:

• Iterate over a Record in TypeScript
• Filter arrays in TypeScript
• Convert an array to a string in TypeScript
• Sum an array in TypeScript

Frequently asked questions