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.