Modern JavaScript

Best of Modern JavaScript — Typed Arrays and Map/Set Issues

Spread the love

Since 2015, JavaScript has improved immensely.

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

In this article, we’ll look at issues with maps, sets, and typed arrays.

Why do Maps and Sets have the size Property?

Maps and sets have the size property instead of length because they aren’t sequential data structures, unlike arrays.

length is meant for sequential data structures like arrays.

Configure How Maps and Sets Compare Keys and Values

There’s no way to configure how maps and sets compare their keys and values.

This feature is hard to implement efficiently and properly.

Specify a Default Value when Getting Something out of a Map

There’s no short to specify a default value when we get something out of a map.

Maps don’t let us set the default value directly.

But we can use the || operator to do this since get returns undefined when the entry doesn’t exist.

Therefore, we can write:

const map = new Map();
const prevCount = map.get('foo') || 0;

We get the value with the key 'foo' .

If it’s undefined , we return 0.

Map vs Object

Maps are good for holding keys other than string keys.

Otherwise, objects can give us equivalent functionality.

If we’re mapping arbitrary data, then a map is probably a better choice.

If there’s a fixed set of keys, then objects are a good choice.

If the keys change, then maps are better.

When to use Objects as Map Keys?

We can use objects as map keys if we externally attach data to objects.

But this is better done with WeakMaps since garbage collection happens if we remove the reference to the key object.

Typed Arrays

Typed arrays are a special kind of array that lets us hold binary data.

They let us manipulate image data, canvas elements, process binary files, etc.

Also, we can use them to interact with native APIs like WebGL for graphics manipulation.

There’s no way to manipulate the binary data from theses APIs without a new data type.

2 kinds of objects work together with Typed Arrays.

They include buffers and views.

Buffers are instances of ArrayBuffer and holds binary data.

Views provide methods for accessing binary data.

There’re 2 kinds of views.

One is an instance of the Typed Array constructor such as Uint8Array , Floar64Array , etc.

These work like abnormal arrays, but only allows one type of elements and don’t have holes.

Another is the instance of DataVBiew that lets us access the byte offsets in the buffer.

Handling Overflow and Underflow

When a value is out of range, modular arithmetic is used to convert it to a value in range.

This means that the highest value plus one is converted to the lowest value.

And the lowest value minus one is converted to the highest value.

This is the case with Typed Arrays.

For instance, if we have:

const uint8 = new Uint8Array(1);
uint8[0] = 255;

uint8[0] is 255.

On the other hand, if we have:

const uint8 = new Uint8Array(1);
uint8[0] = 256;

uint8[0] is 0.

If we have:

const uint8 = new Uint8Array(1);
uint8[0] = -1;

uint8[0] is 255.

This applies to all types of Typed Arrays.


Maps and sets have their limitations. They’re also suitable for some applications.

Typed Arrays are used for storing binary data.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *