167

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.

Jo Liss
  • 30,333
  • 19
  • 121
  • 170

5 Answers5

310

Use the constructor to clone Maps and Sets:

let clonedMap = new Map(originalMap);

let clonedSet = new Set(originalSet);
Jo Liss
  • 30,333
  • 19
  • 121
  • 170
14

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])
rebinnaf
  • 276
  • 2
  • 9
  • I guess it won't work if the `originalMap` has other maps/sets inside – d.k Jan 11 '22 at 13:39
  • Reminder: the parse/stringify method works ONLY with primitive values (strings, numbers, booleans). If you have BigInt, Date, Functions, etc. then it will BREAK. – targumon Jun 20 '23 at 12:33
12

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))
richytong
  • 2,387
  • 1
  • 10
  • 21
  • 4
    Nice find! It might be worth creating a bug on the Chromium bug tracker to call their attention to it. This is surely fixable in the engine. Similarly for Firefox, which exhibits the same issue for `Set` (though not for `Map`). – Jo Liss Aug 10 '20 at 14:23
  • 1
    Interestingly, `new Set(set)` is about 15-20 ms faster in Safari, but `setFromForLoop(set)` is about 20-28 ms faster in Chrome. – Magne Nov 27 '20 at 20:40
  • 12
    This is interesting but dangerous info for young developers. Unless you absolutely MUST have the fastest possible times NOW, you are much better to use the constructor methods because as @JoLiss points out, this is a bug and will get fixed - it's someone else's problem, so the less code you can write the better! – AntonOfTheWoods Mar 28 '21 at 01:19
  • 1
    Generally it's a really bad idea to worry about performance if you don't have a good reason to. Prioritize minimizing development time, or else there you end up being less efficient for no payoff. – ICW Aug 14 '21 at 19:17
  • super useful for folks that need performance for things like page load, albeit I don't see myself creating 10000 sets – SoluableNonagon Oct 05 '21 at 17:41
  • @AntonOfTheWoods good point, but you could always just add a `cloneSet()` function which is documented with the reason to why this is used instead of the `Set` constructor, or simply a link to this answer. – Amit Beckenstein Mar 24 '22 at 11:30
0

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
Yaron Miro
  • 99
  • 1
  • 4
-2

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)]));
Hung Vu Dinh
  • 65
  • 1
  • 3