To create a shallow copy of a `Map`, pass the existing `Map` as a parameter to the `Map()` constructor, e.g. `const newMap = new Map(oldMap)`. The `Map()` constructor takes an iterable, such as another `Map`, and adds the key-value pairs to the new `Map`.

How to create a shallow Copy of a Map in JavaScript


## Create a shallow Copy of a Map in JavaScript

**To create a shallow copy of a `Map`, pass the existing `Map` as a parameter to
the `Map()` constructor, e.g. `const newMap = new Map(oldMap)`. The `Map()`
constructor takes an iterable, such as another `Map`, and adds the key-value
pairs to the new `Map`.**

```javascript:index.js
const oldMap = new Map([
  ['name', 'Tom'],
  ['country', 'Chile'],
]);

// 👇️ {'name' => 'Tom', 'country' => 'Chile'}
console.log(oldMap);

const copy = new Map(oldMap);
// 👇️ {'name' => 'Tom', 'country' => 'Chile'}
console.log(copy);
```

<InArticleAd />

We used the
[Map()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/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.

```javascript:index.js
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`.

```javascript:index.js
const oldMap = new Map([
  ['name', 'Tom'],
  ['country', 'Chile'],
]);

// {'name' => 'Tom', 'country' => 'Chile'}
console.log(oldMap);

const copy = new Map(oldMap);
// 👇️ {'name' => 'Tom', 'country' => 'Chile'}
console.log(copy);

copy.set('age', 30);

// 👇️ {'name' => 'Tom', 'country => 'Chile', 'age' => 30}
console.log(copy);

// 👇️ {'name' => 'Tom', 'country => 'Chile'}
console.log(oldMap);
```

<InArticleAd />

## Further Reading

- [How to create a Deep Copy of a Map in JavaScript](/blog/javascript-deep-copy-map)
- [How to create a shallow Copy of a Set in JavaScript](/blog/javascript-shallow-copy-set)

<InArticleAd />


How to create a shallow Copy of a Map in JavaScript

Create a shallow Copy of a Map in JavaScript #

Further Reading #

Borislav Hadzhiev

For more articles, navigate to myHome Page

How to create a shallow Copy of a Map in JavaScript

Create a shallow Copy of a Map in JavaScript #

Further Reading #

Join my newsletter

Borislav Hadzhiev

For more articles, navigate to myHome Page