DEV Community

Avnish
Avnish

Posted on

How to Serialize a Map in JavaScript

How to Serialize a Map in JavaScript

Serialization is the process of converting an object or data structure into a format suitable for transfer or storage. In JavaScript, JSON (JavaScript Object Notation) is the most commonly used format for serialization. However, JavaScript's built-in JSON.stringify() method does not serialize Map objects directly; it returns an empty object ({}). To properly serialize a Map, we need to first convert it into a different structure that JSON.stringify() can handle.

Methods to Serialize a Map in JavaScript

1. Using Array.from() and JSON.stringify()

One way to serialize a Map is by converting it into an array of key-value pairs before applying JSON.stringify().

Steps:

  1. Create a Map and add data to it.
  2. Convert the Map into an array using Array.from().
  3. Serialize the resulting array using JSON.stringify().

Example:

const map1 = new Map([
    [1, 2],
    [2, 3],
    [4, 5]
]);

const arr = Array.from(map1);
const serialized = JSON.stringify(arr);

console.log(serialized);
Enter fullscreen mode Exit fullscreen mode

Output:

[[1,2],[2,3],[4,5]]
Enter fullscreen mode Exit fullscreen mode

This approach preserves the key-value structure but introduces additional brackets ([]), as the data is stored in an array format.


2. Using Object.fromEntries() and JSON.stringify()

To avoid the extra brackets caused by the array format, we can convert the Map into a plain object before serialization.

Steps:

  1. Create a Map and add data to it.
  2. Convert the Map into an object using Object.fromEntries().
  3. Serialize the resulting object using JSON.stringify().

Example:

const map1 = new Map([
    [1, 2],
    [2, 3],
    [4, 5]
]);

const obj = Object.fromEntries(map1);
const serialized = JSON.stringify(obj);

console.log(serialized);
Enter fullscreen mode Exit fullscreen mode

Output:

{"1":2,"2":3,"4":5}
Enter fullscreen mode Exit fullscreen mode

This method provides a cleaner JSON representation without extra brackets. However, it converts numeric keys to strings because JSON object keys must be strings.


Conclusion

Since Map objects do not have built-in support for serialization, we must convert them into an array or object before applying JSON.stringify(). The choice of approach depends on the required output format:

  • Use the array approach (Array.from()) if maintaining key-value pairs as an array structure is acceptable.
  • Use the object approach (Object.fromEntries()) if you need a standard JSON object format with key-value pairs.

By using these methods, we can efficiently serialize and transfer Map data in JavaScript applications.

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more