• JavaScript Video Tutorials

JavaScript - The TypedArray Object

What is a TypedArray?

A JavaScript TypedArray is an array-like object used to store binary data. Unlike the array, the size of the TypedArray can't be dynamic and can't hold the values of the different data types, improving the performance of the TypedArray.

A TypedArray is used in audio processing, graphics rendering, networking, etc.

Why TypedArray?

In other programming languages like C++, an array can contain data of only one data type, but a JavaScript array is a bit different. It can contain elements of multiple data types. So, JavaScript arrays are less efficient in dealing with binary data and when higher performance is needed.

It is one of the reasons that TypedArray is introduced in JavaScript, and it is also called the array buffer. A TypedArray is the best way to handle binary data while maintaining the memory.

TypedArray Objects

Here are the types of TypedArray objects available to store the data of the 8, 16, 32, or 64-bit data. You can choose any object to create a TypedArray according to the data you need to store.

Sr. No. TypedArray Data Type Range Example
1 Int8Array 8-bit two's complement Signed integer (byte) −128 to 127 new Int8Array([92, 17, −100])
2 Uint8Array 8−bit Unsigned integer 0 to 255 new Uint8Array([132, 210, 0])
3 Uint8ClampedArray 8−bit Unsigned integer 0 to 255 new Uint8ClampedArray([90, 17, 70])
4 Int16Array Short integer −32768 to 32767 new Int16Array([1000, −2000, 150])
5 Uint16Array Unsigned short int 0 to 65535 new Uint16Array([50, −6535, 12000])
6 Int32Array Signed long integer −2147483648 to 2147483647 new Int32Array([1000000, −2000000, 9876])
7 Uint32Array Unsigned long integer 0 to 4294967295 new Uint32Array([100, 42967295, 0])
8 Float32Array Float (7 significant digits) ±1.2x10^-38 to ±3.4x10^38 new Float32Array([3.134, 1.618, -0.5])
9 Float64Array Double (16 significant digits) ±5.0x10^-324 to ±1.8x10^308 new Float64Array([2.78, -12.35, 99.9])
10 BigInt64Array Big signed integer −2^63 to 2^63 − 1 new BigInt64Array([−9071954740991n, 9719925474991n])
11 BigUint64Array Big unsigned integer 0 to 2^64 − 1 new BigUint64Array([0n, 18446744709551615n])

A TypedArray doesn't support the methods like push(), pop, etc., but supported properties and methods are listed below.

TypedArray Properties

Here is a list of the properties of the TypedArray object along with their description −

Sr.No. Property & Description
1

Constructor

It returns an array buffer constructor.
2

byteLength

It returns the byte length of the TypedArray.
3

maxByteLength

It returns the maximum byte length to expand the size of the TypedArray.
4

resizable

To check whether the TypedArray is resizable.

TypedArray Static Methods

Here is a list of the static methods of the TypedArray object along with their description −

Sr.No. Methods & Description
1

from()

It returns a new Array instance.
2

of()

It returns a new Array instance.

TypedArray Instance Methods

Here is a list of the instance methods of the TypedArray object along with their description −

Sr.No. Methods & Description
1

at()

It returns an element in the typed array that matches the given index.
2

copyWithin()

It returns a modified TypedArray without changing the length of the original TypedArray.
3

entries()

It returns a new array iterable object.
4

every()

It returns true if all elements in the typed array pass the test implemented by the callback function, and false otherwise.
5

fill()

It returns the modified typed array, that is filled with the specified value.
6

filter()

It returns a new copy of a typed array that includes only the elements that pass the test.
7

find()

It returns the first element is TypedArray that satisfied the provided test function, 'undefined' otherwise.
8

findIndex()

It returns an index of the first element is TypedArray that satisfied the provided test function, '-1' otherwise.
9

findLast()

It returns the last element in the typed array that satisfies the provided testing function, 'undefined' if not found.
10

findLastIndex()

It returns the last element in the typed array that passes the test, -1 if not found.
11

forEach()

It returns none(undefined).
12

includes()

It returns 'true' if searchElement is found in the typed array; 'false' otherwise.
13

indexof()

It returns the first index of the searchElement.
14

join()

It returns a string by joining all the elements of a typed array.
15

Keys()

It returns a new iterable iterator object.
16

lastIndexof()

It returns the last index of the searchElement in a typed array. If the search element is not present, it returns -1.
17

map()

It returns a new typed array by executing the callback function on each element.
18

reduce()

It returns a value that outputs from running the "reducer" callback function to completion over the entire typed array.
19

reduceRight()

It returns a value that results from the reduction.
20

reverse()

It returns the reference of the original typed array in reversed order.
21

set()

It returns none(undefined).
22

Slice()

It returns a new typed array containing the extracted elements of the original typed array.
23

some()

It returns true, if atlesat one element in typed array pass the test implemented by provided function; false otherwise.
24

sort()

It returns the reference of the same typed array in sorted order.
25

subarray()

It returns a new TypedArray object.
26

toLocaleString()

It returns a string that represents the elements of the typed array.
27

toReversed()

It returns a new typed array containing the elements in reversed order.
28

toSorted()

It returns a new typed array with the elements sorted in ascending order.
29

toString()

It returns a string that represents the elements of the typed array.
30

values()

It returns a new array iterable object.
31

with()

It returns a new typed array with the element at the index replaced with the specified value.

Examples

Example 1

We used the Int8Array to create a TypedArray in the example below. We passed the array containing the multiple elements as an object constructor.

In the output, you can see that if any input element is greater than the 8-bit number, the constructor function automatically enforces it to the 8-bit number.

<html>
<body>
  <p id = "output"> </p>
  <script>
    const array = new Int8Array([1000, 200, 30, 40]);
    document.getElementById("output").innerHTML = "The array is: " + array;
  </script>
</body>
</html>

Output

The array is: -24,-56,30,40

Example 2

In the example below, we used the Float32Array() constructor function to create a TypedArray. It is used to store the 32-bit floating point numbers.

Also, you can access or update TypedArray elements as the normal array.

<html>
<body>
  <p id = "output"> </p>
  <script>
    const array = new Float32Array([100.212, 907.54, 90, 14562547356342.3454]);
    array[2] = 23.65; // Updating the 3rd element of the array
    document.getElementById("output").innerHTML = "The array is: " + array;
  </script>
</body>
</html>

Output

The array is: 100.21199798583984,907.5399780273438,23.649999618530273,14562546941952

Advertisements