Tari Ibaba

To convert a Map to JSON in JavaScript, call the Object.fromEntries(map), then pass the result to the JSON.stringify() method.

For example:

JavaScriptCopied!

const map = new Map([
  ['user1', 'John'],
  ['user2', 'Kate'],
  ['user3', 'Peter'],
]);

const json = JSON.stringify(Object.fromEntries(map));

// {"user1":"John","user2":"Kate","user3":"Peter"}
console.log(json);

We first transform the Map with Object.fromEntries(), because we can’t serialize a Map to a JSON string directly. The Object.fromEntries() method transforms any list of key-value pairs into an object:

JavaScriptCopied!

const map = new Map([
  ['user1', 'John'],
  ['user2', 'Kate'],
  ['user3', 'Peter'],
]);

const obj = Object.fromEntries(map);

// { user1: 'John', user2: 'Kate', user3: 'Peter' }
console.log(obj);

Convert JSON back to Map

To convert the JSON string back to a Map:

1. Parse the JSON string to an object with JSON.parse().
2. Call Object.entries() with this object as an argument.
3. Create a new Map object, passing the result of Object.entries() to the constructor.

For example:

JavaScriptCopied!

const map = new Map([
  ['user1', 'John'],
  ['user2', 'Kate'],
  ['user3', 'Peter'],
]);

const jsonFromMap = JSON.stringify(Object.fromEntries(map));

const obj = JSON.parse(jsonFromMap);
const mapFromObj = new Map(Object.entries(obj));

// Map(3) { 'user1' => 'John', 'user2' => 'Kate', 'user3' => 'Peter' }
console.log(mapFromObj);

We first convert the string to an object and then to an array, because we can’t parse a JSON string to a Map directly. The Object.entries() method takes an object and returns a list of key-value pairs that correspond to the key and value of each property of the object:

JavaScriptCopied!

const obj = {
  user1: 'John',
  user2: 'Kate',
  user3: 'Peter',
};

const arr = Object.entries(obj);

// [ [ 'user1', 'John' ], [ 'user2', 'Kate' ], [ 'user3', 'Peter' ] ]
console.log(arr);

The Map() constructor can take an iterable of key-value pairs to create the Map elements, so we pass the result of the Object.entries() directly to it.

To convert an array to a string with spaces in JavaScript, call the join() method on the array, passing a string containing the space as an argument. For example:

const arr = ['coffee', 'milk', 'tea'];

const withSpaces = arr.join(' ');
console.log(withSpaces); // coffee milk tea

The Array join() method returns a string containing each array element concatenated with the specified separator. If no separator is passed as an argument, it will join the array elements with commas:

const arr = ['coffee', 'milk', 'tea'];

const str = arr.join();
console.log(str); // coffee,milk,tea

We can specify other separators apart from a space, like hyphens and slashes:

const arr = ['coffee', 'milk', 'tea'];

const withHypens = arr.join('-');
console.log(withHypens); // coffee-milk-tea

const withSlashes = arr.join('/');
console.log(withSlashes); // coffee/milk/tea

A separator can also contain more than one character. This allows us to separate the array elements with words or multiple spaces. For example:

const arr = ['coffee', 'milk', 'tea'];

const withAnd = arr.join(' and ');
console.log(withAnd); // coffee and milk and tea

const withOr = arr.join(' or ');
console.log(withOr); // coffee or milk or tea

const with2Spaces = arr.join('  ');
console.log(with2Spaces); // coffee  milk  tea

Note: If an element in the array is undefined, null, or an empty array ([]), it will be converted to an empty string ('') before concatenation with the separator. For example:

const arr = ['coffee', null, 'milk', []];

const withComma = arr.join(',');
console.log(withComma); // coffee,,milk,

const withSpaces = arr.join(' ');
console.log(withSpaces); // coffee  milk

To convert an array to a string without commas in JavaScript, call the join() method on the array, passing an empty string ('') as an argument:

const arr = ['coffee', 'milk', 'tea'];

const withoutCommas = arr.join('');
console.log(withoutCommas); // coffeemilktea

The Array join() method returns a string containing each array element concatenated with the specified separator. If no separator is passed as an argument, it will join the array elements with commas:

const arr = ['coffee', 'milk', 'tea'];

const str = arr.join();
console.log(str); // coffee,milk,tea

We can specify other separators apart from an empty string, like hyphens and slashes:

const arr = ['coffee', 'milk', 'tea'];

const withHypens = arr.join('-');
console.log(withHypens); // coffee-milk-tea

const withSlashes = arr.join('/');
console.log(withSlashes); // coffee/milk/tea

const withSpaces = arr.join(' ');
console.log(withSpaces); // coffee milk tea

A separator can also contain multiple characters:

const arr = ['coffee', 'milk', 'tea'];

const withAnd = arr.join(' and ');
console.log(withAnd); // coffee and milk and tea

const withOr = arr.join(' or ');
console.log(withOr); // coffee or milk or tea

If an element in the array is undefined, null, or an empty array ([]), it will be converted to an empty string ('') before concatenation with the separator. For example:

const arr = ['coffee', null, 'milk', []];

const withComma = arr.join(',');
console.log(withComma); // coffee,,milk,

const withHyphen = arr.join('-');
console.log(withHyphen); // coffee--milk-

To convert a set to a string in JavaScript, call the Array.from() method with the Set as an argument, then call the join() method on the resulting array. For example:

const set = new Set(['x', 'y', 'z']);

const str1 = Array.from(set).join(' ');
console.log(str1); // x y z

const str2 = Array.from(set).join(',');
console.log(str2); // x,y,z

The Array.from() method converts an array-like object like a Set into an array:

const set = new Set(['x', 'y', 'z']);

console.log(Array.from(set)); // [ 'x', 'y', 'z' ]

After the conversion, we can call the join() method on the array. join() returns a string containing the elements of an array concatenated with the specified separator:

console.log(['x', 'y', 'z'].join('-')); // x-y-z

console.log(['x', 'y', 'z'].join('/')); // x/y/z

Note: We can also use the spread syntax (...) to convert a Set to an array:

const set = new Set(['x', 'y', 'z']);

const str1 = [...set].join(' ');
console.log(str1); // x y z

const str2 = [...set].join(',');
console.log(str2); // x,y,z

The spread syntax unpacks the values of the Set into a new array that we call join() on to get the string.

To rename an object key in JavaScript, assign the value of the old key property to a new property with the new key, then delete the old key property.

const obj = { oldKey: 'value' };

obj['newKey'] = obj['oldKey'];
delete obj['oldKey'];

console.log(obj); // { newKey: 'value' }

In this example, we create the new property by direct assignment to the object indexed with the new key. We delete the old key property with the delete operator.

Note: We can also use the Object.assign() method to create a new property in the object:

const obj = { oldKey: 'value' };

Object.assign(obj, { newKey: obj.oldKey })['oldKey'];
delete obj['oldKey'];

console.log(obj); // { newKey: 'value' }

This allows us to rename the object key in a single statement:

const obj = { oldKey: 'value' };

delete Object.assign(obj, { newKey: obj.oldKey })['oldKey'];

console.log(obj); // { newKey: 'value' }

The first argument passed to Object.assign() is the target object that the properties of the sources are applied to. The rest arguments are one or more source objects that contain the properties to apply to the target.

Note: To ensure that the new key property behaves identically to the old key property, use Object.defineProperty() and Object.getOwnPropertyDescriptor() to create the new property with the same descriptor as the old key property before deleting it. For example:

const obj = { oldKey: 'value' };

Object.defineProperty(
  obj,
  'newKey',
  Object.getOwnPropertyDescriptor(obj, 'oldKey')
);
delete obj['oldKey'];

console.log(obj); // { newKey: 'value' }

Now the new key property will retain certain characteristics of the old key property, such as enumerability and writability.

Let’s look at some ways to quickly convert an object to a Map in JavaScript.

1. Object.entries() in Map() Constructor

To convert an object to a Map, we can call the Object.entries() method with the object as an argument, and pass the result to the Map() constructor to create the Map object. For example:

const obj = {
  user1: 'John',
  user2: 'Kate',
  user3: 'Peter',
};

const map = new Map(Object.entries(obj));

// Map(3) { 'user1' => 'John', 'user2' => 'Kate', 'user3' => 'Peter' }
console.log(map);

Note: Object.entries() transforms an object into an array of key-value pairs that the Map() constructor uses to create the Map elements.

const obj = {
  user1: 'John',
  user2: 'Kate',
  user3: 'Peter',
};

const entries = Object.entries(obj);

// [ [ 'user1', 'John' ], [ 'user2', 'Kate' ], [ 'user3', 'Peter' ] ]
console.log(entries);

We can generate the array without using Object.entries(), like this:

const obj = {
  user1: 'John',
  user2: 'Kate',
  user3: 'Peter',
};

const entries = Object.keys(obj).map((key) => [
  key,
  obj[key],
]);

// [ [ 'user1', 'John' ], [ 'user2', 'Kate' ], [ 'user3', 'Peter' ] ]
console.log(entries);

2. Iterate over Object Keys and Add Elements to Map

We can also convert an object to a Map by iterating through the object keys, using the Map set() method to add an element to the resulting Map for each key. We can obtain the keys with the Object.keys() method and loop through them with the forEach() method. For example:

const obj = {
  user1: 'John',
  user2: 'Kate',
  user3: 'Peter',
};

const map = new Map();
Object.keys(obj).forEach((key) => {
  map.set(key, obj[key]);
});

// Map(3) { 'user1' => 'John', 'user2' => 'Kate', 'user3' => 'Peter' }
console.log(map);

In this article, we’ll be looking at some ways to easily convert a Map to an object in JavaScript.

1. Object.fromEntries()

To convert a Map to an object, we can use the Object.fromEntries() method, passing the Map as an argument. For example:

const map = new Map([
  ['user1', 'John'],
  ['user2', 'Kate'],
  ['user3', 'Peter'],
]);

const obj = Object.fromEntries(map);

// { user1: 'John', user2: 'Kate', user3: 'Peter' }
console.log(obj);

Note: Object.fromEntries() can transform any list of key-value pairs into an object. For example, it can directly transform the array of key-value pairs that we passed to the Map() constructor:

const arr = [
  ['user1', 'John'],
  ['user2', 'Kate'],
  ['user3', 'Peter'],
];
const obj = Object.fromEntries(arr);

// { user1: 'John', user2: 'Kate', user3: 'Peter' }
console.log(obj);

2. Iterate over Map and Create Keys in Object

Another way to convert a Map to an object is iterate over the entries of the Map and create a new key on the object for each of them. For each entry, we set the key name and value to the entry name and value respectively. For example:

const map = new Map([
  ['user1', 'John'],
  ['user2', 'Kate'],
  ['user3', 'Peter'],
]);

const obj = {};
map.forEach((value, key) => {
  obj[key] = value;
});

// { user1: 'John', user2: 'Kate', user3: 'Peter' }
console.log(obj);

Note: We can also iterate over the Map with the for...of loop:

const map = new Map([
  ['user1', 'John'],
  ['user2', 'Kate'],
  ['user3', 'Peter'],
]);

const obj = {};
for (const [key, value] of map) {
  obj[key] = value;
}

// { user1: 'John', user2: 'Kate', user3: 'Peter' }
console.log(obj);