Shallow-clone a Map or Set

Question

How do you shallow-clone a Map or Set object in JavaScript?

I want to get a new Map or Set that has the same keys and values.

Answer 1

Use the constructor to clone Maps and Sets:

var clonedMap = new Map(originalMap)

var clonedSet = new Set(originalSet)

Answer 2

Creating a new Set via a for loop is faster than the Set constructor. The same is true for Maps, although to a lesser degree.

const timeInLoop = (desc, loopCount, fn) => {
  const d = `${desc}: ${loopCount.toExponential()}`
  console.time(d)
  for (let i = 0; i < loopCount; i++) {
    fn()
  }
  console.timeEnd(d)
}

const set = new Set([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])

const setFromForLoop = x => {
  const y = new Set()
  for (const item of x) y.add(item)
  return y
}

const map = new Map([['a', 1], ['b', 2], ['c', 3], ['d', 4], ['e', 5]])

const mapFromForLoop = x => {
  const y = new Map()
  for (const entry of x) y.set(...entry)
  return y
}

timeInLoop('new Set(set)', 1e5, () => new Set(set))

timeInLoop('setFromForLoop(set)', 1e5, () => setFromForLoop(set))

timeInLoop('new Map(map)', 1e5, () => new Map(map))

timeInLoop('mapFromForLoop(map)', 1e5, () => mapFromForLoop(map))

Answer 3

Shallow clone:

var clonedMap = new Map(originalMap)

var clonedSet = new Set(originalSet)

Deep clone:

var deepClonedMap = new Map(JSON.parse(JSON.stringify([...originalMap])))
var deepClonedSet = new Set(JSON.parse(JSON.stringify([...originalSet])))

let originalMap = new Map()
let data = {a:'a',b:'b'}
originalMap.set(1,data)

let shallowCloned = new Map(originalMap)
let deepCloned = new Map(JSON.parse(JSON.stringify([...originalMap])))
data.a = 'p'
console.log('originalMap:',[...originalMap])
console.log('shallowCloned:',[...shallowCloned])
console.log('deepCloned:',[...deepCloned])

Answer 4

This way has the smallest amount of code needed for shallow copying and does the job.

Disclosure: I did not test if this way impacts performance, maybe on large sets or inc ase you have a lot of them it may NOT be the best approach..

const mySet = new Set([1, 2, 3, 4]);
const myCloneSet = new Set(Array.from(mySet));
console.log(mySet === myCloneSet) //false

Answer 5

I needed to copy ("clone") a JavaScript set, and this question piqued my interest regarding the integrity of that cloned copy, to perturbations of the sources for those copies.

Tests

var fruit = new Set(['apples', 'bananas']);
var provinces = new Set(['british columbia', 'nova scotia']);
console.log('fruit:', fruit)
console.log('provinces:', provinces)
// fruit: Set [ "apples", "bananas" ]
// provinces: Set [ "british columbia", "nova scotia" ]

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Set#implementing_basic_set_operations
function unionSets(setA, setB) {
    let _union = new Set(setA);
    for (let elem of setB) {
        _union.add(elem)
    }
    return _union;
}

myUnionSet = unionSets(fruit, provinces);
console.log('myUnionSet:', myUnionSet)
// myUnionSet: Set(4) [ "apples", "bananas", "british columbia", "nova scotia" ]

// Tests:
fruit.delete('apples');
provinces.delete('british columbia');

console.log('fruit:', fruit)
console.log('provinces:', provinces)
console.log('myUnionSet:', myUnionSet)
// fruit: Set [ "bananas" ]
// provinces: Set [ "nova scotia" ]
// myUnionSet: Set(4) [ "apples", "bananas", "british columbia", "nova scotia" ]

Answer 6

If the Map contains non-nested structures (e.g. Map of Arrays), here's a quick way to deep copy it, for anyone interested:

const newMap = new Map();
old.forEach((val, key) => newMap.set(key, [...old.get(key)]));