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) | -28 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.2×10^-38 to ±3.4×10^38 | new Float32Array([3.134, 1.618, -0.5]) |
| 9 | Float64Array | Double (16 significant digits) | ±5.0×10^-324 to ±1.8×10^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 | ConstructorIt returns an array buffer constructor. |
| 2 | byteLengthIt returns the byte length of the TypedArray. |
| 3 | maxByteLengthIt returns the maximum byte length to expand the size of the TypedArray. |
| 4 | resizableTo 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 −
TypedArray instance methods
| 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.
Open Compiler
<html><body><p id ="output"></p><script>const array =newInt8Array([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.
Open Compiler
<html><body><p id ="output"></p><script>const array =newFloat32Array([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
Leave a Reply