How to copy a Map into another Map?

JavascriptClone

Javascript Problem Overview


How do I clone/copy a Map in JavaScript?

I know how to clone an array, but how do I clone/copy a Map?

var myArray = new Array(1, 2, 3);
var copy    = myArray.slice();
// now I can change myArray[0] = 5; & it wont affect copy array

// Can I just do the same for map?
var myMap = new ?? // in javascript is it called a map?
var myMap = {"1": 1, "2", 2};
var copy  = myMap.slice(); 

Javascript Solutions


Solution 1 - Javascript

With the introduction of Maps in JavaScript it's quite simple considering the constructor accepts an iterable:

var newMap = new Map(existingMap)

Documentation here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map

Solution 2 - Javascript

A simple way (to do a shallow copy) is to copy each property of the source map to the target map:

var newMap = {};
for (var i in myMap)
   newMap[i] = myMap[i];

> NOTE: newMap[i] could very well be a reference to the same object as myMap[i]

Solution 3 - Javascript

Very simple to clone a map since what you're talking about is just an object. There is a Map in ES6 that you should look up, but to copy an object, just use Object.assign()

let map = {"a": 1, "b": 2}
let copy = Object.assign({}, map);

You can also use cloneDeep() from Lodash

let copy = cloneDeep(map);

Solution 4 - Javascript

JQuery has a method to extend an object (merging two objects), but this method can also be used to clone an object by providing an empty object.

// Shallow copy
var newObject = jQuery.extend({}, oldObject);

// Deep copy
var newObject = jQuery.extend(true, {}, oldObject);

More information can be found in the jQuery documentation.

Solution 5 - Javascript

There is nothing built in.

Either use a well tested recursive property copier or if performance isn't an issue, serialise to JSON and parse again to a new object.

Solution 6 - Javascript

If you need to make a deep copy of a Map you can use the following:

new Map(JSON.parse(JSON.stringify(Array.from(source))));

Where source is the original Map object.

Note this may not be suitable for all use cases where the Map values are not serializable, for more details see: https://stackoverflow.com/a/122704/10583071

Solution 7 - Javascript

There is no built-in (edit: DEEP) clone/copy. You can write your own method to either shallow or deep copy:

function shallowCopy(obj) {
    var result = {};
    for (var i in obj) {
        result[i] = obj[i];
    }
    return result;
}

function deepCopy(obj) {
    var result = {};
    for (var i in obj) {
        // recursion here, though you'll need some non-trivial logic
        // to avoid getting into an endless loop.
    }
    return result;
}

[EDIT] Shallow copy is built-in, using Object.assign:

let result = Object.assign({}, obj);

All objects in Javascript are dynamic, and can be assigned new properties. A "map" as you refer to it is actually just an empty object. An Array is also an object, with methods such as slice and properties like length.

Solution 8 - Javascript

I noticed that Map should require special treatment, thus with all suggestions in this thread, code will be:

function deepClone( obj ) {
    if( !obj || true == obj ) //this also handles boolean as true and false
        return obj;
    var objType = typeof( obj );
    if( "number" == objType || "string" == objType ) // add your immutables here
        return obj;
    var result = Array.isArray( obj ) ? [] : !obj.constructor ? {} : new obj.constructor();
    if( obj instanceof Map )
        for( var key of obj.keys() )
            result.set( key, deepClone( obj.get( key ) ) );
    for( var key in obj )
        if( obj.hasOwnProperty( key ) )
            result[key] = deepClone( obj[ key ] );
    return result;
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionsazrView Question on Stackoverflow
Solution 1 - JavascripttswatersView Answer on Stackoverflow
Solution 2 - JavascriptrobView Answer on Stackoverflow
Solution 3 - JavascriptJoshua Michael CalafellView Answer on Stackoverflow
Solution 4 - JavascriptPastor BonesView Answer on Stackoverflow
Solution 5 - JavascriptalexView Answer on Stackoverflow
Solution 6 - JavascriptrobdcView Answer on Stackoverflow
Solution 7 - JavascriptNicoleView Answer on Stackoverflow
Solution 8 - JavascriptDmitriy PichuginView Answer on Stackoverflow