---
id: 75f0d58e-d13c-11ee-abe1-23b9fd5ced9a
title: |
  How to Use the JavaScript Map and Set Objects – Explained with Code Examples
status: ARCHIVED
tags:
  - read-later
  - RSS
date_added: 2024-02-21 18:39:50
url_omnivore: |
  https://omnivore.app/me/how-to-use-the-java-script-map-and-set-objects-explained-with-co-18dcf1d24bb
url_original: |
  https://www.freecodecamp.org/news/javascript-map-and-set-objects-explained/
---

# How to Use the JavaScript Map and Set Objects – Explained with Code Examples

## Highlights

Under the hood, the `Map` object performs better when you need to add and remove keys, so you might consider using it when your data changes frequently.

Also, the Map object has many useful methods for data manipulation, such as `has()` to see if the Map contains a specific key, `keys()` to get all keys defined in the `Map`, `values` to get all values, and `entries()` to get all key/value pairs. 

[source](https://omnivore.app/me/how-to-use-the-java-script-map-and-set-objects-explained-with-co-18dcf1d24bb#9c807b39-b9c0-49de-895e-1d7f6b095ab4) 

---

The `Set` object allows you to store a collection of elements, just like an Array. The differences between a `Set` and an array are:

* A `Set` requires all elements to be unique
* A `Set` has fewer methods for data manipulation 

[source](https://omnivore.app/me/how-to-use-the-java-script-map-and-set-objects-explained-with-co-18dcf1d24bb#52f87526-14bc-40fb-b821-493da97dd7e3) 

---

Aside from the regular methods above, `Set` also has composition methods that you can use to perform various set theory operations such as difference, union, and intersection. 

[source](https://omnivore.app/me/how-to-use-the-java-script-map-and-set-objects-explained-with-co-18dcf1d24bb#cb2eebdd-f9f4-4a83-b298-f65c5556f842) 

---

## Original

![How to Use the JavaScript Map and Set Objects – Explained with Code Examples](https://proxy-prod.omnivore-image-cache.app/1280x720,sp6PB7t-iiwqHUxBcJgrDBxMVwkBEE45zHsnUKE3V87c/https://www.freecodecamp.org/news/content/images/size/w2000/2024/02/javascript-mat-and-set-objects-introduction.png) 

Map and Set are two JavaScript data structures you can use to store a collection of values, similar to Objects and Arrays. They are specialized data structures that can help you store and manipulate related values. 

In this tutorial, we will see how Map and Set work in detail and when to use them. We will also explore the Set object composition methods that were recently added to the JavaScript standard.

## Table of Contents

* [The Map Object Explained](#the-map-object-explained)
   * [How to Create a Map Object](#how-to-create-a-map-object)
   * [Map Object Methods and Properties](#map-object-methods-and-properties)
   * [Other Ways to Create a Map Object](#other-ways-to-create-a-map-object)
   * [Iterate Over Map Object Data](#iterate-over-map-object-data)
   * [When to Use the Map Object](#when-to-use-the-map-object)
* [Set Object Explained](#set-object-explained)
   * [How to create a Set Object](#how-to-create-a-set-object)
   * [Set Object Methods and Properties](#set-object-methods-and-properties)
   * [Set Composition Methods](#set-composition-methods)
   * [Iterate Over a Set Object](#iterate-over-a-set-object)
   * [When to Use the Set Object](#when-to-use-the-set-object)
* [Conclusion](#conclusion)

## The Map Object Explained

The `Map` object stores data in a key/value pair structure, just like an Object. The main differences between a regular object and a `Map` are:

* A `Map` can have any type of data as the key value
* A `Map` maintains the order of data added to the object

### How to Create a Map Object

To create a `Map` object, you can call the `Map()` constructor as follows:

```dart
const myMap = new Map();
```

Create a Map object in JavaScript

The code above creates a new empty `Map` object.

### Map Object Methods and Properties

A `Map` object has the following methods and properties:

* `set(key, value)` – Adds a key/value pair to a Map
* `get(key)` – Retrieves a value from a Map (returns `undefined` if key doesn't exist)
* `has(key)` – Checks if a Map has a specific key
* `delete(key)` – Removes a specific key from a Map
* `clear()` – Removes all items from a Map
* `keys()` – Returns all keys in a Map
* `values()` – Returns all values in a Map
* `entries()` – Returns all keys and values in a Map
* `size` – Returns the number of items in Map

To insert data into the `Map` object, you can use the `set()` method:

```dart
const myMap = new Map();

myMap.set(1, 'Jack');
myMap.set(2, 'Jill');
myMap.set('animal', 'Elephant');
```

Inserting values to the Map object

The code above creates a `Map` object with 3 entries as follows:

```dart
Map(3)
0: {1 => "Jack"}
1: {2 => "Jill"}
2: {"animal" => "Elephant"}
```

The Map object entries

To retrieve a value from the `Map` object, you need to use the `get()` method and pass the key as its argument:

```livecodeserver
console.log(myMap.get(1)); // Jack

console.log(myMap.get('animal')); // Elephant


```

Retrieving Map object values

 To see how many key/value pairs a `Map` has, you can access the `size` property:

```arduino
myMap.size; // 3
```

Accessing the Map.size property

To see if a certain key exists in a `Map` object, you can use the `has()` method. See the example below:

```angelscript
myMap.has(1); // true

myMap.has(10); // false
```

Using the Map.has() method

To remove a key/value pair from a `Map` object, you can use the `delete()` method and pass the key of the pair you want to remove as follows:

```awk
myMap.delete(1);

console.log(myMap);
// 0: {2 => "Jill"}
// 1: {"animal" => "Elephant"}
```

Deleting an entry from the Map object

If you want to remove all key/value pairs, you can use the `clear()` method instead:

```arduino
myMap.clear();

console.log(myMap); // Map(0) {size: 0}
```

Clearing a Map object

### Other Ways to Create a Map Object

You can also create a `Map` object from an Array as follows:

```prolog
const myMap = new Map([
  [1, 'Jack'],
  [2, 'Jill'],
  ['animal', 'Elephant'],
]);
```

Creating a Map from an Array

When creating a `Map` from an Array, you need to create a two-dimensional array and specify two elements in each array. 

The first element will be the key, the second element will be the value. Any extra value in the array will be ignored.

In the example below, the value 'Johnson' from the first array will be ignored by the `Map()` constructor:

```dart
const myMap = new Map([
  [1, 'Jack', 'Johnson'], // the value 'Johnson' is ignored
  [2, 'Jill'],
  ['animal', 'Elephant'],
]);
```

Creating a Map from an array with more than two values 

Because you can create a `Map` object from an array, you can also create one from an object. You need to transform the object into an array first using the `Object.entries()` method.

The following example shows how to use an object to create a `Map`:

```javascript
const person = {
    'name': 'Jack',
    'age': 20,
}

const myMap = new Map(Object.entries(person));

console.log(myMap); // Map(2) { 'name' => 'Jack', 'age' => 20 }
```

Creating a Map from an object

### Iterate Over Map Object Data

To iterate over a `Map` object data, you can use either the `forEach()` method or the `for .. of` loop:

```javascript
const myMap = new Map([
  [1, 'Jack'],
  [2, 'Jill'],
  ['animal', 'Elephant'],
]);

// iterate using the forEach() method
myMap.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

// or using the for .. of loop

for (const [key, value] of myMap) {
  console.log(`${key}: ${value}`);
}
```

Both methods give the same output:

```http
1: Jack
2: Jill
animal: Elephant
```

### When to Use the Map Object

You can think of the `Map` object as an upgraded version of the regular Object. It can use any type of data as the key value, while an object can only use string values as keys.

==Under the hood, the== `==Map==` ==object performs better when you need to add and remove keys, so you might consider using it when your data changes frequently.==

==Also, the Map object has many useful methods for data manipulation, such as== `==has====()==` ==to see if the Map contains a specific key,== `==keys====()==` ==to get all keys defined in the== `==Map==`==,== `==values==` ==to get all values, and== `==entries====()==` ==to get all key/value pairs.==

But if you only want to create an object without further manipulation, then you don't need to use the `Map` object. 

One example is when you send a network request using the `fetch()` method. You would create an object and convert it into a JSON string, so using a `Map` object won't give any benefit.

## Set Object Explained

==The== `==Set==` ==object allows you to store a collection of elements, just like an Array. The differences between a== `==Set==` ==and an array are:==

* ==A== `==Set==` ==requires all elements to be unique==
* ==A== `==Set==` ==has fewer methods for data manipulation==

### How to Create a Set Object

To create a new `Set` object, you need to call the `Set()` constructor as follows:

```dart
const mySet = new Set();
```

Creating a new Set object

The code above will create a new empty set.

### Set Object Methods and Properties 

A `Set` object has the following methods and properties:

* `add(value)` – Adds a value to a Set
* `has(value)` – Checks if a Set contains a specific value
* `delete(value)` – Removes a specific value from a Set
* `clear()` – Removes all items from a Set
* `keys()` – Returns all values in a Set
* `values()` – Returns all values in a Set
* `entries()` – Returns all values in a Set as `[value, value]` array
* `size` – Returns the number of items in Set

Note that the `keys()` and `values()` methods in a Set object return the same output.

There's also the `entries()` method which returns an array as follows:

```javascript
const mySet = new Set(['Jack', 'Jill', 'John']);

console.log(mySet.entries());
```

Running Set entries() method

Output:

```prolog
[Set Entries] {
  [ 'Jack', 'Jack' ],
  [ 'Jill', 'Jill' ],
  [ 'John', 'John' ]
}
```

Output of Set entries() method

Notice how the values are repeated once in each array above. The `entries()` method is created to make `Set` similar to the `Map` object, but you probably don't need it.

There are extra methods that you can use to interact with another `Set` object. We'll discuss them in the next section.

To add an element to the Set object, you can use the add method:

```processing
const mySet = new Set();

mySet.add(1);
mySet.add(2);
mySet.add(3);

console.log(mySet); // [1, 2, 3]
```

Adding new elements to the Set object

To get all values stored in a `Set`, call the `values()` method:

```pgsql
mySet.values(); // [Set Iterator] { 'Jack', 'Jill', 'John' }
```

Getting all values from a Set object

To check if the `Set` has a specific value, use the `has()` method:

```elixir
mySet.has('Jack'); // true

mySet.has('Michael'); // false
```

Check if a Set has a specific value

To remove a single value, call the `delete()` method. To remove all values, use the `clear()` method:

```less
mySet.delete('Jill');

mySet.clear();
```

Delete a single value or clear all from Set

### Set Composition Methods

==Aside from the regular methods above,== `==Set==` ==also has composition methods that you can use to perform various set theory operations such as difference, union, and intersection.==

The following table is from [MDN Set documentation](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global%5FObjects/Set#set%5Fcomposition):

![set-composition-methods](https://proxy-prod.omnivore-image-cache.app/1585x2050,sPVCo_5Ndwww9ovUzsJnG9IGeZKON-MOiMv_9bax5rNk/https://www.freecodecamp.org/news/content/images/2024/02/set-composition-methods.png)

A List of Set Composition Methods

For example, you can get a set containing the differences between two other sets as follows:

```angelscript
const setA = new Set([1, 2, 3, 4, 5]);

const setB = new Set([4, 5, 6, 7, 8]);

const diffsA = setA.difference(setB); // Set(3) {1, 2, 3}
const diffsB = setB.difference(setA); // Set(3) {6, 7, 8}

```

Example of using the Set difference() method

Here, the `setA.difference(setB)` returns a `Set` containing values unique to the `setA` object.

The opposite values are returned when you run `setB.difference(setA)` method.

Note that these methods are new additions to the JavaScript standard, and as of this writing, only Safari 17 and Chrome 122 support these methods.

Most likely, these methods will be included in Node.js soon.

### Iterate Over a Set Object

To iterate over a `Set` object, you can use either the `forEach()` method or the `for .. of` loop:

```pgsql
const mySet = new Set(['Jack', 'Jill', 'John']);

// iterate using the forEach() method
mySet.forEach(value => {
  console.log(value);
});

// or using the for .. of loop

for (const value of mySet) {
  console.log(value);
}
```

Output:

```mipsasm
Jack
Jill
John
```

### When to Use the Set Object

You can think of the `Set` object as the alternative version of the regular Array.

Because a `Set` object ignores duplicate values, you can use this object to purge duplicates from an Array, then turn the `Set` object back to an Array:

```angelscript
const myArray = [1, 1, 2, 2, 3, 3];

const uniqueArray = [...new Set(myArray)];

console.log(uniqueArray); // [ 1, 2, 3 ]
```

Creating a unique array with the help of Set

Another reason you may want to use a `Set` is when you need to compose multiple set objects using the composition methods, such as `union()` and `difference()`. These methods are not available in an Array.

## Conclusion

In this article, you've learned how the Map and Set objects work and when to use them in your code.

If you enjoyed this article and want to take your JavaScript skills to the next level, I recommend you check out my new book __Beginning Modern JavaScript_ [here](https://codewithnathan.com/beginning-modern-javascript).

[![beginning-js-cover](https://proxy-prod.omnivore-image-cache.app/2000x1667,s6cLBb9obr-IvLwhkHZ_9YW6u9bvhxbOp3iAu4nsV6tM/https://www.freecodecamp.org/news/content/images/2024/01/beginning-js-cover.png)](https://codewithnathan.com/beginning-modern-javascript)

The book is designed to be easy for beginners and accessible to anyone looking to learn JavaScript. It provides a step-by-step gentle guide that will help you understand how to use JavaScript to create a dynamic web application.

Here's my promise: __You will actually feel like you understand what you're doing with JavaScript._

See you later!

---

---

 Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. [Get started](https://www.freecodecamp.org/learn/) 