Categories
Modern JavaScript

Best of Modern JavaScript — Typed Array Properties

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.

Typed Arrays

Typed arrays are arrays where its elements can only be numbers.

The constructors that can create integer only typed arrays include Int8Array, Uint8Array, Uint8ClampedArray, Int16Array, Uint16Array, Int32Array, and Uint32Array .

Floating-point number only arrays include Float32Array and Float64Array .

Typed Arrays vs Normal Arrays

Typed arrays are very similar to normal arrays.

They have a length property and elements can be accessed with the bracket operator with their indexes.

The standard array methods are also available.

All their elements are always of the same type.

Setting elements convert the value to the type allowed.

Typed arrays are always contiguous.

Normal arrays can have holes, but typed arrays can’t.

They’re always initialized with zeroes because they can’t have holes.

For example:

new Array(5)

creates an array with 5 empty slots, but:

new Uint8Array(5)

creates a typed array with 5 zeroes.

A typed array also has an associated buffer.

The elements of a typed array is stored in an associated ArrayByffer that can be accessed with the buffer property.

Typed Arrays are Iterable

Typed arrays are iterable.

It has a Symbol.iterator method to make it an iterable object.

So we can use the for-of loop with them.

For example, we can write:

const arr = Uint8Array.of(1, 2, 3, 4, 5);
for (const byte of arr) {
  console.log(byte);
}

Then we get 1, 2, 3, 4, and 5 logged.

Converting Typed Arrays to and from Normal Arrays

We can convert between typed and normal arrays.

For instance, we can create a typed array from a normal array by writing:

const typedArr = new Uint8Array([1, 2, 3, 4, 5]);

We can convert a typed array to a normal with slice method or the spread operator.

To call slice to convert the typed array to a normal array, we can write:

const typedArr = new Uint8Array([1, 2, 3, 4, 5]);
const arr = Array.prototype.slice.call(typedArr);

We can also use the spread operator by writing:

const typedArr = new Uint8Array([1, 2, 3, 4, 5]);
const arr = [...typedArr];

We can also use the Array.from method to do the same thing.

For example, we can write:

const typedArr = new Uint8Array([1, 2, 3, 4, 5]);
const arr = Array.from(typedArr);

In all 3 examples, we get [1, 2, 3, 4, 5] for arr .

Inheritance Hierarchy of Typed Arrays

Typed array classes all have a common superclass.

The superclass isn’t directly accessible from our JavaScript code.

The prototype property of the typed array constructor holds all the methods of a typed array.

Static Typed Array Methods

Typed array constructors have some static methods.

One of them is the of method.

We can create a typed array from it with the arguments becoming the entries of it.

For example, we can write:

const typedArr = Uint8Array.of(1, 2, 3, 4, 5);

to call of with some numbers which end up in typedArr .

Conclusion

Typed arrays are similar to normal arrays but have many properties that set them apart.

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 *