Understanding JavaScript Typed Arrays
JavaScript Typed Arrays Overview of Typed Arrays Typed arrays in JavaScript are designed specifically for handling binary data. Unlike regular arrays, these arrays are buffers w...
By Software Development Team
JavaScript Typed Arrays
Overview of Typed Arrays
Typed arrays in JavaScript are designed specifically for handling binary data. Unlike regular arrays, these arrays are buffers with a fixed length and store elements of specific data types, such as 8-bit integers or 32-bit numbers.
Advantages of Typed Arrays
Typed arrays offer an efficient method for managing binary data compared to traditional JavaScript arrays, which can contain elements of various types. As raw memory, typed arrays can be directly passed to functions without data conversion. They are much faster for functions that process raw binary data, making them ideal for:
- WebGL and Canvas: Fast graphics rendering and image processing.
- File APIs: Efficient reading and writing of local files.
- Media APIs: Swift handling of audio and video data.
- WebSockets: Effective binary data transfer over networks.
Typed arrays handle binary data as efficiently as arrays in languages like C.
Browser APIs Supporting Typed Arrays
Typed arrays are supported by various browser APIs, enhancing their utility in web development environments.
Differences from Regular Arrays
- Fixed Length: Typed arrays cannot be resized dynamically using methods such as
push()orpop(). - Type Restriction: Elements must conform to the specified data type of the typed array.
- Underlying Buffer: Typed arrays are views into an
ArrayBuffer, enabling direct manipulation of binary data.
Types of Typed Arrays
| Name | Min | Max | Bytes | Type |
|---|---|---|---|---|
Int8Array | -128 | 127 | 1 | byte |
Uint8Array | 0 | 255 | 1 | octet |
Uint8ClampedArray | 0 | 255 | 1 | octet |
Int16Array | -32768 | 32767 | 2 | short |
Uint16Array | 0 | 65535 | 2 | unsigned short |
Int32Array | -2147483648 | 2147483647 | 4 | long |
Uint32Array | 0 | 4294967295 | 4 | unsigned long |
BigInt64Array | -2^63 | 2^63 - 1 | 8 | bigint |
BigUint64Array | 0 | 2^64 - 1 | 8 | unsigned bigint |
Float16Array | -65504 | 65504 | 2 | unrestricted half |
Float32Array | -3.4e38 | 3.4e38 | 4 | unrestricted float |
Float64Array | -1.8e308 | 1.8e308 | 8 | unrestricted double |
8-Bit Integers
| Name | Data Type | Range |
|---|---|---|
Int8Array | Signed integer (byte) | -128/127 |
Uint8Array | Unsigned integer (octet) | 0/255 |
Uint8ClampedArray | Unsigned integer (octet) | 0/255 |
Uint8Array vs Uint8ClampedArray
The primary difference between Uint8Array and Uint8ClampedArray is how they handle values outside the 0-255 range. In Uint8ClampedArray, values are clamped to 0 or 255, whereas a Uint8Array simply uses the first 8 bits of the value.
Typed arrays are not regular arrays. For instance, isArray() returns false for typed arrays, and many standard array methods like push and pop are not supported.
16-Bit Integers
| Name | Data Type | Range |
|---|---|---|
Int16Array | Short integer | -32768/32767 |
Uint16Array | Unsigned short int | 0/65535 |
32-Bit Integers
| Name | Data Type | Range |
|---|---|---|
Int32Array | Signed long int | -2147483648/2147483647 |
Uint32Array | Unsigned long int | 0/4294967295 |
64-Bit Integers
| Name | Data Type | Range |
|---|---|---|
BigInt64Array | Big signed int | -2^63/2^63-1 |
BigUint64Array | Big unsigned int | 0/2^64 |
Floating Point Numbers
| Name | Description | Range |
|---|---|---|
Float16Array | Half precision - 3 significant digits | -65504 / 65504 |
Float32Array | Normal precision - 7 significant digits | -3.4e38 / 3.4e38 |
Float64Array | Double precision - 15 significant digits | -1.8e308 / 1.8e308 |
In line with the ECMAScript standard, arithmetic in JavaScript uses double-precision floating-point arithmetic.
Browser Compatibility
Typed arrays are a feature of ES6 and are supported by all modern browsers since mid-2017, including Chrome, Edge, Firefox, Safari, and Opera.