Best of Modern JavaScript — New Data Structures
Tags: javascript, webdev, beginners, programming
Published: 2021-01-19 00:27:02

---
title: Best of Modern JavaScript — New Data Structures
published: true
date: 2020-07-25 19:50:23 UTC
tags: javascript,webdev,beginner,programming
canonical_url: https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8anew-data-structures/?utm_source=rss&utm_medium=rss&utm_campaign=best-of-modern-javascript%25e2%2580%258a-%25e2%2580%258anew-data-structures
---

**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](https://thewebdev.info/2020/07/25/best-of-modern-javascript%e2%80%8a-%e2%80%8anew-data-structures/) appeared first on [The Web Dev](https://thewebdev.info).