Should You Stop Using Objects and Arrays to Store Data?

ES6 has other ways of handling data structures and values in the form of Set and Map

Anurag Kanoria
Nov 3 · 6 min read

For years, programmers have used objects and arrays to store data. This trend is not only limited to JavaScript.

There was simply no other choice besides these two to store multiple values and handle data structures.

There were several limitations however while using objects and array such as:

  1. An array can store duplicate elements.
  2. No method to find the length of the object as we have for arrays.
  3. Only Strings can be stored in objects and it doesn’t remember the insertion order.
  4. Developers had to choose either arrays or objects depending upon their use case.
  5. Third-party libraries like Lodash were used to enhance the capabilities of the array

But with the launch of ES6 in 2015, things changed for the better.

ES6 brings in support for Map and Set which aims to overcome the limitations stated above.

As stated before, both of these are introduced in the ES6 version of JavaScript.

Set is an ordered collection of unique elements. ‘Unique elements’ is the primary takeaway because it means that no duplicate elements can be stored in a set. It doesn’t have a key-value pair system though.

A Map on the other hand is a combination of array and object data structure. It is a collection of key-value pairs like objects but it also remembers the insertion format and has a length(.size) property.

I will be going over Set first and then Map.

A Set can be initialized like this:

You can easily insert elements into the set using the .add() method.

This is where things get a little interesting. A Set in JavaScript borrows a lot of properties from a mathematical set and only contains unique elements.

Removing elements is also very straightforward using the .delete() method to delete a single element and .clear() method to remove all the elements

Using the .sizemethod, one can easily find the size of the set which can be helpful.

Set behaves differently when trying to log or access its values. You can log the array and see the elements but the same is not true for a set.

To access Set, we need a SetIterator() to get all the values.

JavaScript provides a property .values() to get an iterator which we can then use in combination with a loop to retrieve all the values.

This is demonstrated by the code snippet below:

The easier way to retrieve all the elements is by using .forEach() and is given below:

Output:

Additionally, you can check if a value exists or not using .has()method which returns true if the element is found.

It is worth mentioning that methods like keys() and entries() are available for Set despite the fact that Set doesn’t support key-value pair elements.

Set and Array tend to perform and handle the same operations however there exists some difference.

The biggest difference is that Set can’t have duplicate items like Array and Set provides an easier method to delete items.

Additionally, the elements of the set are iterable in the insertion order.

Like the mathematical set, the Set in JavaScript can also be used to perform operations like union and intersection which can be used while merging data or finding common elements in two sets.

You can full list of methods and guide on Set here.

Similar to Set, Map can also be declared in the same fashion.

The Map supports the object-like key-value pairs. Therefore, when adding value, we need to provide a key as well.

This is different from what we saw with the Set.

To remove a value from the Map, we can simply pass the key into the .delete() property.

Like Set, we can use .clear() to remove all the elements.

The size(length) of the map can easily be retrieved using the .size property.

The Map provides us with a .get() method to quickly get the value by passing the key as an argument in the method.

But what if you want only the keys, values, or both key and value?

Map has .keys() ,.values() and.entries() respectively for achieving the same.

Using the same map from the code above,

Iterating over the map is also quite simple.

Moreover, you can easily check if an element exists or not using .has() property and passing the key.

If you decide to convert your object to a map, JavaScript has got you covered.

We have earlier used .entries() to get all the key-value pairs but this time we are gonna use the method on Object .

You can easily convert a map to an object as well as shown above.

To convert the map into an array we can use the Array.from(myMap) .

The Map seems to solve a lot of shortcomings of the array and objects such as able to handle much more complex operations.

The Map is like a hybrid of array and objects. It has a size property like array and can store elements in a key-value pair format.

Besides this, it also provides methods to like .has() to check if an element exists or not which can save you a ton of time.

Moreover, it does not necessarily need the key to be of String type. You can even use an object as a key that can help you write better code.

You can a much more detailed guide here.

While Array and Objects have become the de facto standard to store collections and key-value pair elements, with the introduction of Map and Set you can give your code an interesting approach.

Set and Map are the new standards offered by JavaScript for storing complex data structures.

Additionally, using these data structures also eliminates the need to use a third-party library like Lodash as these new data structures provide methods like .has() and .delete() by default.

Array and objects are not obsolete in any sense, however, using set and the map is surely a better way to handle data especially when building giant, complex applications.

Enjoyed this article? If so, get more similar content by subscribing to Decoded, our YouTube channel!

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store