This content originally appeared on DEV Community and was authored by Avnish

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);

Output:

[[1,2],[2,3],[4,5]]

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);

Output:

{"1":2,"2":3,"4":5}

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.

This content originally appeared on DEV Community and was authored by Avnish

Print Share Comment Cite Upload Translate Updates

APA

Avnish | Sciencx (2025-01-30T14:19:11+00:00) How to Serialize a Map in JavaScript. Retrieved from https://www.scien.cx/2025/01/30/how-to-serialize-a-map-in-javascript/

MLA

" » How to Serialize a Map in JavaScript." Avnish | Sciencx - Thursday January 30, 2025, https://www.scien.cx/2025/01/30/how-to-serialize-a-map-in-javascript/

HARVARD

Avnish | Sciencx Thursday January 30, 2025 » How to Serialize a Map in JavaScript., viewed ,<https://www.scien.cx/2025/01/30/how-to-serialize-a-map-in-javascript/>

VANCOUVER

Avnish | Sciencx - » How to Serialize a Map in JavaScript. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/01/30/how-to-serialize-a-map-in-javascript/

CHICAGO

" » How to Serialize a Map in JavaScript." Avnish | Sciencx - Accessed . https://www.scien.cx/2025/01/30/how-to-serialize-a-map-in-javascript/

IEEE

" » How to Serialize a Map in JavaScript." Avnish | Sciencx [Online]. Available: https://www.scien.cx/2025/01/30/how-to-serialize-a-map-in-javascript/. [Accessed: ]

rf:citation

» How to Serialize a Map in JavaScript | Avnish | Sciencx | https://www.scien.cx/2025/01/30/how-to-serialize-a-map-in-javascript/ |

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.