What is the use of TypedArray Object in JavaScript ?
Last Updated :
25 Jul, 2024
Introduction: Arrays in Java and C++ are data structures, that are of fixed-size contiguous and store homogeneous data. These arrays utilize contiguousness and caching to improve performance thus reducing the random access time. However, JavaScript arrays are different beasts. Unlike typical arrays, they are dynamic, sparse, and non-homogeneous. This at first gives a presumption of their low performance(due to the inability of caching features), but under the hood things are different. Javascript engines are incredibly clever beasts. Whenever the data is not sparse and is homogeneous, transparently Javascript stores them in contiguous blocks of memory. Thus behaving a little like typical arrays and giving us improved performance.
Need of TypedArrays: Though Javascript arrays performed well, but with improvements in web applications due to the addition of WebGL, Sockets, etc. improvement in performance was needed. It was required for JavaScript code to be able to quickly and easily manipulate raw binary data. This is where TypedArrays come into the picture. But the question arises: if the JavaScript engine can optimize the things underneath, why do we need TypesArrays? To answer this, we need to know how numbers and JavaScript arrays behave? Actually, all numbers in JavaScript are going to 64-bit floating-point numbers according to the IEEE-754 standard which is not that efficient. However, TypedArrays allow us to have contiguous blocks of 8, 16, 32, and 64 bits for signed and unsigned integers as well as 32-bit and 64-bit floating numbers.
This allows us to be more efficient as it specifies how much amount of memory is to be utilized and also helps in the transfer of binary data in the expected format.
Uses of TypedArrays: If we want to transfer binary data as a 16-bit contiguous integer format rather than a conventional 64-bit floating-point, TypedArrays will be efficient. In simpler words, with TypedArrays, we are creating arrays with their content strictly controlled.
Example 1: Let’s say you wanted to render some 3d graphics on the web. This requires being able to transfer an array of numbers, say pixel values as RGB, or some data to a native interface, which needed it to be in some specific size(for RGBA in (0,255) ). But for TypedArrays, we would have implemented a lot of data handling to make sure things work properly, and that too in 64-bit floating-point format.
JavaScript
<script>
// pixelData array with pixel values
const pixelData = [143, 1432, 728,
913, 182, 64, 023, 343, 183, 194]
// To convert pixel data into RGBA range ie. (0,255)
const clampedRGBA = new Uint8ClampedArray(pixelData);
console.log("Clamped PixelData: " + clampedRGBA)
</script>
Output:
Clamped PixelData: 143,255,255,255,182,64,19,255,183,194
Explanation: The above output shows how easily pixel values are clamped achieved using Uint8ClampedArray without requiring any explicit data handling.
Example 2: In this example, we will see how we can attach typed array views and DataViews to the buffer to reads the contents of the specified file. Many API’s make use of TypedArrays such as FileReader.prototype.readAsArrayBuffer() . The FileReader can read file contents as an ArrayBuffer.
HTML
<!DOCTYPE html>
<html lang="en">
<body>
<input type="file" onchange='readFile(event)' />
<br><br>
<textarea cols="50" rows="10"></textarea>
<script>
var readFile = function (event) {
var input = event.target;
var text = "";
var reader = new FileReader();
reader.onload = function () {
var arrayBuffer = reader.result;
var idView = new Uint8Array(arrayBuffer);
idView.forEach(function (alpha) {
// console.log(String.fromCharCode(alpha))
text = text + String.fromCharCode(alpha)
});
console.log(text);
document.getElementsByTagName(
'textarea')[0].innerText = text;
};
reader.readAsArrayBuffer(input.files[0]);
};
</script>
</body>
</html>
Output:
Explanation: The above example shows us how with the help of FileReader API and TypedArray views, we can view the contents of the file or blob.
Similar Reads
JavaScript typedArray.of() Method
The typedArray.of() is an inbuilt function in JavaScript which is used to construct a new typedArray with a variable number of parameters. Syntax: TypedArray.of(element0, element1, ......) Parameters: It accepts parameters of different elements whose typedArray is going to be created. Return value:
1 min read
JavaScript TypedArray.of() Method
The TypedArray.of() method is used to create a new array from a variable number of arguments that are passed to it. Syntax: TypedArray.of( el0, el1, el2, ...elN ) Parameters: This method accepts a variable number of elements, which are used to create the Int16Array array. TypedArray can contain any
2 min read
JavaScript TypedArray.prototype.with() Method
A new method TypedArray.prototype.with(), was introduced in ECMAScript 2023 (ES2023) to provide a means of modifying an element in a particular TypedArray without altering the underlying array directly, it generates a new TypedArray with the required alteration and then returns it. TypedArray instan
2 min read
JavaScript typedArray.includes() Method
The typedArray.includes() is an inbuilt function in JavaScript which is used to check whether a particular element is included by the given typedArray or not and accordingly it returns true and false. Syntax: typedarray.includes(Element, Index); Parameters: It accepts two parameter which are specifi
2 min read
JavaScript typedArray.set() Method
The typedArray.set() is an inbuilt function in JavaScript which is used to stores a number of values in the given typedArray. typedArray.set(typedArray, offset) Parameters: It accept two parameters which are specified below- typedarray: It is the source array. offset: It is optional and it is into t
1 min read
JavaScript TypedArray.prototype.includes() Method
In JavaScript the TypedArray.prototype.includes() method is used to check that the given typed array contains a specific given element or not, if it contains the element it returns true otherwise false. SyntaxtypedArray.includes(searchElement)ORtypedArray.includes(searchElement, fromIndex)Parameters
1 min read
How to check the type of a variable or object in JavaScript ?
In this article, How to Check the Type of a Variable or Object in JavaScript? In JavaScript, the typeof operator is used to determine the typeof an object or variable. JavaScript, on the other hand, is a dynamically typed (or weakly typed) language. This indicates that a variable can have any type o
2 min read
JavaScript TypedArray.prototype.findLast() Method
A new method, TypedArray.prototype.findLast(), was introduced in ECMAScript 2023 (ES2023). The method findLast() of instances TypedArray proceeds traverse over the typed array backwards and provides method returning the value of the first element that satisfies the supplied testing function. When th
2 min read
JavaScript typedArray.some() Method
The typedArray.some() is an inbuilt function in JavaScript which is used to check whether some elements of the typedArray satisfy the test implemented by the given function. Syntax: typedarray.some(callback) Parameters: It takes the parameter callback function and this callback function takes three
2 min read
JavaScript TypedArray.prototype.values() Method
TypedArray's values() method returns a new iterator object for the array, this iterator will allow you to traverse through typed arrays and generate the value of each element at every position and like values() method for normal JavaScript arrays, it serves a similar role. SyntaxtypedArray.values()P
1 min read