Categories
Modern JavaScript

Best of Modern JavaScript — Typed Arrays

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 JavaScript typed arrays.

Clamped Conversion

Clamped conversions work differently than module conversion.

JavaScript provides us with constructors with typed arrays that does clamp conversions such as the Uint8ClampedArray constructor.

It works differently from modulo conversion in that all underflowing values are converted to the lowest value.

And all overflowing values are converted to the highest value.

For example, we can create one by writing:

const uint8c = new Uint8ClampedArray(1);

Then if we write:

uint8c[0] = 255;

We get 255 as the value of uint8c[0] .

If we write:

uint8c[0] = 256;

We still get 255.

On the other hand, if we write:

uint8c[0] = 0;

We get 0.

And if we write:

uint8c[0] = -1;

We still get 0.

Endianness

The endianness matters if we store multiple bytes in our typed arrays.

Big-endian means the most significant byte comes first.

So if we have 2 bytes like 0xABCD , then 0xAB comes first and then 0xCD .

Little-endian means the least significant byte comes first.

This means the order of the digits is stored opposite of the way that they’re a store in a big-endian array.

Endianness different between CPU architectures and are consistent across native APIs.

Typed arrays kets us to communicate with those APIs.

This is why their endianness can’t be changed.

The endianness of binary files and protocols are fixed across platforms.

DataViews lets us specify the endianness so that we can transport files and communicate with different protocols across multiple platforms.

Negative Indexes

Negative index can be used with the slice method.

Index -1 means the last element of the typed array.

For instance, we can write:

const arr = Uint8Array.of(0, 1, 2);
const last = arr.slice(-1);

We created an Uint8Array with some numbers.

Then we called slice with -1 to return a typed array with the last entry of arr .

Offsets must be non-negative integers.

So if we pass in a negative number to the DataView.prototype.getInt8 method, we’ll get a RangeError.

ArrayBuffers

ArrayBuffers store the data and views let us read and change them.

To create a DataView, we got to provide the constructor with an ArrayBuffer.

Typed array constructors can optionally create ArrayBuffers for us.

The ArrayBuffer constructor takes a number with the length of the ArrayBuffers.

The ArrayBuffer constructor has the isView static method that returns true if the argument we pass in is a view for an ArrayBuffers.

Only type arrays and DataViews have the [[ViewedArrayBuffer]] internal slot which makes them views.

The ArrayBuffer.prototype.byteLength is an instance method that returns the capacity of the ArrayBuffer in bytes.

It’s a getter method.

ArrayBuffer.prototype.slice(start, end) is an instance method that returns a new ArrayByffer with the index greater than or equal to start and less than end .

start and end can be negative.

Conclusion

Typed arrays can wrap values in various ways.

Also, we’ve to have the correct endianness to store and communicate the data properly.

ArrayBuffers let us store binary data and slice them.

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 *