Subscribe to my email list now at http://jauyeung.net/subscribe/

Follow me on Twitter at https://twitter.com/AuMayeung

Many more articles at https://medium.com/@hohanga

Even more articles at http://thewebdev.info/

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:

const map = new Map([
  [1, 'foo'],
  [2, 'bar'],
  [3, 'baz'],
]);

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:

const arr = [2, 3, 5, 6, 6, 6, 2];
const unique = [...new Set(arr)];

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:

const map = new Map();
map.set('foo', 'bar');

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:

const foo = map.get('foo');

and we get 'bar' .

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

For example, we can write:

const hasFoo = map.has('foo');

then hasFoo would be true .

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

For example, we can write:

map.delete('foo')

to delete the entry with the key 'foo' .

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.

The post Best of Modern JavaScript — New Data Structures appeared first on The Web Dev.