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();
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
Map.prototype.entries and Map.prototype.set. That means: If you write a class that extends Map and overwrites either of these two methods, then simply writing new ExtendedMap( extendedMapObj ) will not work if the extended methods rely on properties that are not available to the super.
var newMap = new Map(existingMap) is O(n) where n is the number of the key/value pairs of the map? I guess that the cloning operation is not constant O(1) if, as you say, Map.prototype.entries is called under the hood...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]
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
deep copy of the target Map it's just a shallow copy. Maybe is this why it's so fast?
Very simple to just use Object.assign()
let map = {'a': 1, 'b': 2}
let copy = Object.assign({}, map);
// Or
const copy = Object.assign({}, {'a': 1, 'b': 2});
Object.assign Warning for Deep Clone: "If the source value is a reference to an object, it only copies the reference value."
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.
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.
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.
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;
}
let copy = {...myMap};