JavaScript Objects vs. Maps
Tags: programming, javascript, webdev, beginners
Published: 2022-09-08 12:03:16

---
title: JavaScript Objects vs. Maps
published: true
date: 2022-09-08 11:36:17 UTC
tags: programming, javascript, webdev, beginners
canonical_url: https://www.syncfusion.com/blogs/post/javascript-objects-vs-maps.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hdkcv5c87o92hy1w2snf.png
---

[Objects](https://www.w3schools.com/js/js_objects.asp "JavaScript Objects") and [Maps](https://www.w3schools.com/js/js_object_maps.asp "JavaScript Maps") are used in JavaScript to store data as dynamic collections of key-value pairs. Since Maps are inherited from Objects, there are some similarities between the two entities, and prototype functions of Objects can be utilized in Maps.

However, there are some unique characteristics to each of these entities. This article will examine the differences between Maps and Objects, their usage, and the best situations where each can be used.

## What is a Map?

A Map is a data structure that stores data as unique key-value pairs in which the insertion order is retained. It helps to avoid duplicity.

## What is an Object?

The concept of an Object is very similar to that of a Map: it stores data using a key-value pair. However, minor variations make Map work better under specific conditions, mainly because Objects do not preserve the insertion order of elements when storing the data.

## Manipulation of Maps and Objects

### 1. Construction

#### Maps

A Map can be created using the Map constructor in JavaScript.

```js
const map = new Map([[1, "one"], [2, "two"], [3, "three"]]);
```

We can set the values initially by parsing an array of arrays. The inner arrays contain a key and a value as their elements. The key field in Maps can be of any data type such as _number_, _array_, or _object_.

#### Objects

There are many ways to instantiate an Object.

```js
const obj1 = { 1: "one", 2: "two", 3: "three" };

const obj2 = new Object({ 1: "one", 2: "two", 3: "three" });

const obj3 = Object.create(obj1);
```

In the example above, **obj1** is created using Object literal syntax while the Object constructor is used for **obj2**. In **obj3** , we passed an Object that should be the newly created Object prototype. The data type of the key field in Object is limited to _strings_ and _symbols._ As a result, the keys given as numbers in the above code snippet will be converted to strings internally.

### 2. Item manipulation

#### Maps: Get, set, and delete element **s**

In Maps, we have to use the **set()** method to insert values, the **get()** method to access elements, and the **delete()** method to delete elements.

```js
const map = new Map();

map.set(1, "one");

console.log(map.get(1)); // output: one

map.delete(1);
console.log(map); // Map(0) {}
```

The **set()** method requires two parameters to initialize the key and value of a Map element. On the other hand, the **get()** method returns the value of the key we pass as the parameter. We can delete an element by passing the key to the **delete()** method.

#### Objects: Dot notation

We can use either dot notation or square bracket notation to access elements in an Object.

```js
const obj = {};

obj.a = "one"
obj["b"] = "two"

console.log(obj.a); // output: one
console.log(obj["b"]); //output: two

delete obj.a
delete obj["b"]
console.log(obj); // output: {}
```

Dot notation is straightforward, and we can access elements directly by their key. On the other hand, square bracket notation should be used in full when dynamically accessing the element. Also, we can use the **delete** keyword to delete elements from an Object.

### 3. Read keys and values

#### Maps

In Maps, we can use the **keys()** method to get the list of keys in a map.

```js
const map = new Map([[1, "one"], [2, "two"]]);

console.log(map.keys()); // output: [Map Iterator] { 1, 2 }
console.log(Array.from(map.keys())); // output: [1, 2]

console.log(map.values()); // output: [Map Iterator] { 'one', 'two' }
console.log(Array.from(map.values())); // output: ['one', 'two']

console.log(map.entries()); // output [Map Iterator] { [1, 'one'], [2, 'two'] }
console.log(Array.from(map.entries())); // output [[1, 'one'], [2, 'two'] ]
```

**map.keys()** returns a _Map Iterator_ with the keys, while **map.values()** returns a _Map Iterator_ with values. On the other hand, **map.entries()** can be used to return a _Map Iterator_ with key-value pairs. We can convert these _Map Iterators_ to arrays using **Array.from()**.

#### Objects

To get the keys to an Object, we can use **Object.keys()** and **Object.values()** to get the values, while **Object.entries()** can be used to get the key-value pairs.

```js
const obj = { 1: "one", 2: "two" };

console.log(Object.keys(obj)); // output: ['1', '2']

console.log(Object.values(obj)); // output: ['one', 'two']

console.log(Object.entries(obj)); // output: [['1', 'one'], ['2', 'two'] ]
```

The above functions return an array of keys, values, or key-value pairs of the Object we pass as the parameter.

### 4. Check if a key exists

#### Maps

Maps have the **has()** method to check if a key exists.

```js
console.log(map.has(2)); // output: true or false
```

#### Objects

The following methods can be used to check the existence of a key in an Object.

```js
console.log(2 in obj); // output: true or false
console.log(obj.hasOwnProperty(2)); // output: true or false
```

### 5. Get length

#### Maps

We can get the size or the number of elements of a Map using the **size** property.

```js
console.log(map.size); // output: 2
```

#### Objects

We can get the size of an Object as shown below.

```js
console.log(Object.keys(obj).length); // output: 2
```

Here, we got the **keys** array from the Object and used **length** to get the number of elements, similar to the Object’s size.

### 6. Iteration

#### Maps

There are several ways to iterate over the elements in a Map. The following code example illustrates iterating using **for** and **forEach** loops.

```js
//method 1
for (const [key, value] of map) {
	console.log(value);
};
//method 2
map.forEach((value, key) => console.log(value));
```

#### Objects

Similar to Maps, Objects can also be iterated in many ways. The following code example illustrates iterating using **for** and **forEach** loops.

```js
//method 1
for (const [key, value] of Object.entries(obj)) {
	console.log(value);
};

//method 2
Object.entries(obj).forEach(([key, value]) => console.log(value));
```

Unlike in Maps, we need helper functions to access key-value pairs in Objects.

## When to use Maps and Objects

Maps have higher performance and require less code to write, giving them an advantage over Objects.

The following are some cases where you can use Maps:

- If you want to use complex data types as keys.
- If preserving the insertion order of your keys is required.
- When performing hashing.

However, some cases necessitate the use of an Object. The following are some of them:

- Objects are ideal for cases where we need a simple structure to hold data and the keys are either strings or symbols.
- Object is unquestionably the best option in scenarios where different logic must be applied to each property piece.
- When dealing with JSON data, Objects have direct support in JSON, but Maps do not.

## Final thoughts

Although Maps perform better, it all comes down to the type of data being used and the operation that needs to be performed. Use Maps and Objects wisely in the appropriate situations.

I hope you now have a good understanding of using Objects and Maps in JavaScript.

Thank you for reading!

Syncfusion [Essential JS 2](https://www.syncfusion.com/javascript-ui-controls "Essential JS 2") is the only suite you will ever need to build an app. It contains over 65 high-performance, lightweight, modular, and responsive UI components in a single package. Download a [free trial](https://www.syncfusion.com/downloads/essential-js2 "Free evaluation of the Syncfusion Essential Studio") to evaluate the controls today.

If you have any questions or comments, you can also contact us through our [support forums](https://www.syncfusion.com/forums "Syncfusion support forum"), [support portal](https://support.syncfusion.com/ "Syncfusion support portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion feedback portal"). We are always happy to assist you!

## Related blogs

- [7 Functional Programming Techniques for JavaScript Developers](https://www.syncfusion.com/blogs/post/7-functional-programming-techniques-for-javascript-developers.aspx)
- [11 Console Methods in JavaScript for Effective Debugging](https://www.syncfusion.com/blogs/post/11-console-methods-in-javascript-for-effective-debugging.aspx)
- [Building an Image Carousel in JavaScript Is Now Easy!](https://www.syncfusion.com/blogs/post/building-an-image-carousel-in-javascript-is-now-easy.aspx)
- [Effectively Visualize a Large Number of Markers Using JavaScript Maps](https://www.syncfusion.com/blogs/post/visualize-a-large-number-of-markers-using-javascript-maps.aspx)