Borislav Hadzhiev
Reading timeยท4 min
Photo from Unsplash
lodash
Map.forEach
To create a deep copy of a Map
object:
Map
to an array.JSON.stringify()
method to stringify the array.JSON.parse()
method to parse the JSON string.Map()
constructor.const existingMap = new Map([ ['address', {street: 'Example'}], ['numbers', [1, 2, 3]], ]); const deepCopy = new Map( JSON.parse( JSON.stringify(Array.from(existingMap)) ) ); // ๐๏ธ {'address' => {street: 'Example'}, 'numbers': [1, 2, 3]} console.log(deepCopy);
We used the
Array.from()
method to convert the Map
object to a two-dimensional array.
const existingMap = new Map([ ['address', {street: 'Example'}], ['numbers', [1, 2, 3]], ]); // ๐๏ธ [['address', {street: 'Example}], ['numbers', [1, 2, 3]]] console.log(Array.from(existingMap));
The next step is to use the JSON.stringify method to convert the array to a JSON string.
const existingMap = new Map([ ['address', {street: 'Example'}], ['numbers', [1, 2, 3]], ]); // ๐๏ธ '[["address",{"street":"Example"}],["numbers",[1,2,3]]]' console.log(JSON.stringify(Array.from(existingMap)));
We then used the JSON.parse method to parse the string back into an array.
const existingMap = new Map([ ['address', {street: 'Example'}], ['numbers', [1, 2, 3]], ]); // ๐๏ธ [ [ 'address', { street: 'Example' } ], [ 'numbers', [ 1, 2, 3 ] ] ] console.log(JSON.parse(JSON.stringify(Array.from(existingMap))));
The last step is to pass the two-dimensional array to the Map() constructor.
JSON.stringify
method, so that all nested objects lose their reference.If we then try to mutate the array in the new Map
, it wouldn't affect the
existing Map
.
const existingMap = new Map([ ['address', {street: 'Example'}], ['numbers', [1, 2, 3]], ]); const deepCopy = new Map(JSON.parse( JSON.stringify(Array.from(existingMap)) )); deepCopy.get('numbers').pop(); // ๐๏ธ {'address' => {street: 'Example'}, 'numbers' => [1, 2]} console.log(deepCopy); // ๐๏ธ {'address' => {'street':'Example'},'numbers' => [1, 2, 3]} console.log(existingMap);
We used the pop
method to mutate the array in the deep copy, however, the
array in the existing Map
wasn't affected.
The nested arrays in the Maps have a different reference and location in memory
because we used the JSON.stringify
method.
If you have to create deep copies of Map
objects often, define a reusable
function.
function deepCopyMap(map) { return new Map(JSON.parse(JSON.stringify(Array.from(map)))); } const existingMap = new Map([ ['address', {street: 'Example'}], ['numbers', [1, 2, 3]], ]); const copy = deepCopyMap(existingMap); // ๐๏ธ Map(2) { 'address' => { street: 'Example' }, 'numbers' => [ 1, 2, 3 ] } console.log(copy);
The function takes a Map
object as a parameter and returns a deep copy of the
Map
.
lodash
#You can also use the lodash
library to create a deep copy of a Map
object.
First, install the lodash
module if you haven't already.
# ๐๏ธ initialize a package.json file npm init -y npm install lodash
You can now import and use the lodash.cloneDeep method.
import _ from 'lodash'; const existingMap = new Map([ ['address', {street: 'Example'}], ['numbers', [1, 2, 3]], ]); const deepCopy = _.cloneDeep(existingMap); // ๐๏ธ Map(2) { 'address' => { street: 'Example' }, 'numbers' => [ 1, 2, 3 ] } console.log(deepCopy);
The cloneDeep
method takes a value and recursively clones it, returning the
deep cloned value.
Mutating the array property in the cloned Map
doesn't mutate the property in
the original Map
.
import _ from 'lodash'; const existingMap = new Map([ ['address', {street: 'Example'}], ['numbers', [1, 2, 3]], ]); const deepCopy = _.cloneDeep(existingMap); deepCopy.get('numbers').pop(); // ๐๏ธ {'address' => {street: 'Example'}, 'numbers' => [1, 2]} console.log(deepCopy); // ๐๏ธ {'address' => {'street':'Example'},'numbers' => [1, 2, 3]} console.log(existingMap);
We used the pop
method to mutate the array in the deep copy, however, the
array in the existing Map
wasn't affected.
To create a shallow copy of a Map
:
Map
as a parameter to the Map()
constructor.Map()
constructor takes an iterable, such as another Map
, and adds
the key-value pairs of the iterable to the new Map
.const oldMap = new Map([ ['name', 'bobby hadz'], ['country', 'Chile'], ]); // ๐๏ธ Map(2) { 'name' => 'bobby hadz', 'country' => 'Chile' } console.log(oldMap); const copy = new Map(oldMap); // ๐๏ธ Map(2) { 'name' => 'bobby hadz', 'country' => 'Chile' } console.log(copy);
We used the
Map()
constructor to create a shallow copy of an existing Map
.
The only parameter the constructor takes is an iterable, such as an array, or
another Map
.
The elements in the iterable should be key-value pairs, e.g. a two-dimensional
array or another Map
object.
const example1 = [ ['name', 'Tom'], ['country', 'Chile'], ]; const example2 = new Map([ ['name', 'Tom'], ['country', 'Chile'], ]);
Each key-value pair gets added to the new Map
.
The new Map
object has a completely different reference and location in
memory.
Adding key-value pairs to it does not interact with the existing Map
.
const oldMap = new Map([ ['name', 'bobby hadz'], ['country', 'Chile'], ]); // ๐๏ธ Map(2) { 'name' => 'bobby hadz', 'country' => 'Chile' } console.log(oldMap); const copy = new Map(oldMap); // ๐๏ธ Map(2) { 'name' => 'bobby hadz', 'country' => 'Chile' } console.log(copy); copy.set('age', 30); // ๐๏ธ Map(3) { 'name' => 'bobby hadz', 'country' => 'Chile', 'age' => 30 } console.log(copy); // ๐๏ธ Map(2) { 'name' => 'bobby hadz', 'country' => 'Chile' } console.log(oldMap);
The code sample shows that adding key-value pairs to the copy doesn't add
key-value pairs to the original Map
object.
You can also use the Map.forEach()
method to create a shallow copy of a Map
object.
Map.forEach
#To create a shallow copy of a Map
:
Map
.Map.forEach()
method to iterate over the existing Map
.Map.set()
method to add each key-value pair to the new Map
.const oldMap = new Map([ ['name', 'bobby hadz'], ['country', 'Chile'], ]); const copy = new Map(); oldMap.forEach((value, key) => { copy.set(key, value); }); // ๐๏ธ Map(2) { 'name' => 'bobby hadz', 'country' => 'Chile' } console.log(oldMap);
We used the Map()
constructor to create an empty Map
object.
The function we passed to the
Map.forEach
method gets called with each key-value pair of the Map
object.
On each iteration, we use the
Map.set
method to add the current key-value pair to the new Map
object.