Clone a map in JavaScript

This post will discuss how to clone a map in JavaScript.

Cloning a map means creating a new map that contains the same key-value pairs as the original map. Depending on the type and complexity of the values, we may need to perform a shallow clone or a deep clone of the map.

A shallow clone of a map creates a new map that references the same values as the original map. This means that if we modify the values in the new map, it will also affect the original map, and vice versa. A shallow clone is faster and simpler to perform, but it may not be suitable for complex or nested values.
A deep clone of a map creates a new map that copies the values from the original map. This means that if we modify the values in the new map, it will not affect the original map, and vice versa. A deep clone is slower and more complicated to perform, but it ensures that the new map is independent from the original map.

Here are some of the methods we can use to clone a map in JavaScript:

1. Using `Map()` constructor

To perform a shallow clone of a map, we can use the Map() constructor and pass the original map as an argument. This will create a new map with the same key-value pairs as the original map. The following code illustrates this:

// Create an original map

let originalMap = new Map([

["name", "Adam"],

["age", 22],

["hobbies", ["cricket", "programming", "basketball"]]

]);

// Perform a shallow clone of the map

let shallowClone = new Map(originalMap);

// The shallowClone has the same key-value pairs as the originalMap

// Map(3) { "name" => "Adam", "age" => 22, "hobbies" => ["cricket", "programming", "basketball"] }

console.log(shallowClone);

// However, modifying the values in one map will affect the other map

shallowClone.get("hobbies").push("surfing");

// ["cricket", "programming", "basketball", "surfing"]

console.log(shallowClone.get("hobbies"));

// ["cricket", "programming", "basketball", "surfing"]

console.log(originalMap.get("hobbies"));

Download Run Code

2. Using JSON functions

To perform a deep clone of a map, we can use a combination of JSON.stringify() and JSON.parse() functions to convert the original map into a JSON string and then parse it back into an array of key-value pairs. Then we can pass this array to the Map() constructor to create a new map object with independent copies of the original map’s values. The following code illustrates this:

// Create an original map

let originalMap = new Map([

["name", "Adam"],

["age", 22],

["hobbies", ["cricket", "programming", "basketball"]]

]);

// Perform a deep clone of the map

let deepClone = new Map(

Object.entries(

JSON.parse(

JSON.stringify(

Object.fromEntries(originalMap)

)

);

// The deepClone has copies of the key-value pairs from the originalMap

// Map(3) { "name" => "Adam", "age" => 22, "hobbies" => ["cricket", "programming", "basketball"] }

console.log(deepClone);

// Modifying the values in one map will not affect the other map

deepClone.get("hobbies").push("surfing");

// ["cricket", "programming", "basketball", "surfing"]

console.log(deepClone.get("hobbies"));

// ["cricket", "programming", "basketball"]

console.log(originalMap.get("hobbies"));

Download Run Code

Note that this function only works for maps that contain simple values, such as numbers, strings, booleans, or nested arrays. If the map contains complex objects, such as dates, maps, sets, etc., this function will not preserve their data types and may cause errors.

3. Using Lodash library

Alternatively, we can use a third-party library, such as Lodash, that provides a cloneDeep() function to deep clone any kind of data structure in JavaScript. This function recursively clones the map and its nested values and handles circular references and custom cloning logic. The following code illustrates this:

// import Lodash library

const _ = require('lodash');

// Create an original map

let originalMap = new Map([

["name", "Adam"],

["age", 22],

["hobbies", ["cricket", "programming", "basketball"]]

]);

// Perform a deep clone of the map

let deepClone = _.cloneDeep(originalMap);

// The deepClone has copies of the key-value pairs from the originalMap

// Map(3) { "name" => "Adam", "age" => 22, "hobbies" => ["cricket", "programming", "basketball"] }

console.log(deepClone);

// Modifying the values in one map will not affect the other map

deepClone.get("hobbies").push("surfing");

// ["cricket", "programming", "basketball", "surfing"]

console.log(deepClone.get("hobbies"));

// ["cricket", "programming", "basketball"]

console.log(originalMap.get("hobbies"));

Download Code

That’s all about cloning a map in JavaScript.

1. Using Map() constructor

2. Using JSON functions

3. Using Lodash library

Share this:

1. Using `Map()` constructor