Best of Modern JavaScript — New Data Structures

John Au-Yeung
Oct 27 · 3 min read
Image for post
Image for post
Photo by Siora Photography on Unsplash

Since 2015, JavaScript has improved immensely.

It’s much more pleasant to use it now than ever.

In this article, we’ll look at controlling the spreadability of arrays, maps, and sets.

Symbol.isConcatSpreadable

The Symbol.isConcatSpreadable isn’t part of any object in the ES6 standard library.

The mechanism exists purely for browser APIs and user code.

This means the subclasses of Array are spread by default.

Subclasses of Array can prevent instances from being spread by setting Symbol.isConcatSpreadable to fale .

This property can be an instance or a prototype property.

Other array-like objects are spread by concat if Symbol.isConcatSpreadable is true .

This means we can turn on spreading for some array-like objects.

Typed arrays aren’t spread and they don’t have the concat instance method.

Range of Array Indexes

ES6 follows the same rules as ES5 for the array index range.

Lengths are between 0 and 2 ** 32 — 1 .

And indexes are in the range between 0 and 2 ** 32 — 1 .

Strings and typed arrays have a larger range of indexes.

The upper bound of the range is because 2 ** 53 — 1 is the largest integer that JavaScript gloating point numbers can represent safely.

Maps and Sets

Maps and sets are new data structures introduced with ES6.

Maps can have arbitrary values. They’re stored as key-value pairs.

We can use an Array with entries having [key, value] pairs to set up the initial data.

For example, we can write:

We pass in an array of key-value pair arrays to the Map constructor to create our map.

A set is a collection of unique elements.

We can create a set with the Set constructor.

For example, we can write:

then we get that unique is the array [2, 3, 5, 6] .

It’s useful for removing duplicate elements in an array.

Weak map is a map that doesn’t prevent its keys from being garbage collected.

This means that we won’t have to worry about memory leaks when using it.

Map

There’s no good way to create an object of key-value pairs with ES5 or earlier.

The only way is to create an object literal and use that as a map.

With ES6, we have the Map constructor.

To create a map, we can write:

We create the map with the Map constructor.

Then we call the set method with the key and value as arguments to add or update the map with the entry.

If the entry with the key already exists, it’ll be overwritten.

The get method lets us get the item given the key.

So we can write:

and we get 'bar' .

The has method lets us check if an entry with the given key exists.

For example, we can write:

then hasFoo would be true .

The delete method lets us delete the entry with the given key,

For example, we can write:

to delete the entry with the key 'foo' .

Image for post
Image for post
Photo by Srinivasan Venkataraman on Unsplash

Conclusion

We can control if an object if spreadable with the Array.prototype.concat method with the Symbol.isConcatSpreadable property.

Maps and sets are useful data structures that are introduced with ES6.

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

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

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