How to Serialize a Map in JavaScript

Posted on by


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.



Source link