Tuesday, March 19, 2024

JavaScript Typed Arrays Guide (with Examples)

You can use ArrayBuffers and DataView to access data of various types using JavaScript. While this approach was a great solution to address the inefficiencies of using a standard Array class in JavaScript, it is not without its own issues. This approach requires more steps than should be needed for setting up and reading the data.

With Typed Arrays, you can reduce the number of steps by selecting an array that is typed to match the type of data you want to store. By using typed arrays, you eliminate the extra steps that the ArrayBuffer/DataView approach takes and instead can use typed arrays in a manner similar to standard JavaScript arrays. You get the efficiency of the ArrayBuffers with the ease of standard Arrays.

There are a number of specifically typed arrays that you can use in JavaScript including:

  • Int8Array — A one byte, 8-bit signed integer from -128 to 127
  • Uint8Array — A one byte, 8-bit unsigned integer from 0 to 255
  • Int16Array — A two byte, 16-bit signed integer from -32768 to 32767
  • Uint16Array — A two byte, 16-bit unsigned integer from 0 to 65535
  • Int32Array — A four byte, 32-bit signed integer from -2,147,483,648 to 2,147,483,647
  • Uint32Array — A four byte, 32-bit unsigned integer from 0 to 4,294,967,295
  • Float32Array — A four byte, 32-bit floating point number with 7 significant digits from 1.2×10<sup>-38</sup> to 3.4X10<sup>38</sup>
  • Float64Array — An eight byte, 64-bit floating point number with 16 significant digits, ranging from 5.0×10<sup>-324</sup> to 1.8×10<sup>308</sup>

Each of the typed arrays are based on the same TypeArray, which means they each operate similarly. The amount of storage used for each of the various types will be allocated based on the number of bytes used. Unlike an ArrayBuffer, however, the amount of space will be enough to store the various types. An Int16Array allocated for 10 elements will reserve twice the space of an Int8Array.

A simple example can help illustrate the differences in using a typed array versus an Array Buffer. To set up an array that holds the numbers from 1 to 10 in 16-bit integers is as simple as:

var myArray = new Uint16Array([ 1,2,3,4,5,6,7,8,9,10 ]); 

You can see the contents of this array by converting it to a simple string. A call to myArray.toString() would return the string “1,2,3,4,5,6,7,8,9,10”.

The efficiency of typed arrays is mostly seen when working with data being read from other APIs such as OpenGL, XmlHttpRequest, WebGL and Canvas.

Uint8ClampedArray

There is a ninth typed array called Uint8ClampedArray that is useful for graphics. This is similar to the Unt8Array; however, it is restricted to only the values of 0 to 255. If you try to add a value higher than 255, it will be changed to 255. Consider the following example:

var myArray = new Uint8ClampedArray([ 100,200,300,400,500 ]); 

The result of calling myArray.toString() would be:

100,200,255,255,255

This is extremely useful when working with graphics because you don’t need to verify that every value falls within the zero to 255 range.

Methods for TypedArrays

Typed Arrays operate in a lot of ways like standard JavaScript arrays. Some of the various methods include copyWithin(), entries(), every(), fill(), filter(), find(), findIndex(), forEach(), includes(), indexOf(), join(), keys(), lastIndexOf(), map(), reduce(), reduceRight(), reverse(), set(), slice(), some(), sort(), subarray(), values(), toLocaleString(), and toString(). There are also standard properties, including buffer.

Earlier, an example was showing converting a typed array to a string. The following are additional, simple examples using Typed Arrays:

Example 1: Joining Array Items

var myArray = new Uint16Array([ 100,200,300,400,500,600 ]);
       alert( myArray.join("  | "); ) 

This would display:

100 | 200 | 300 | 400 | 500 | 600

Example 2: Show Length of Array in Bytes

This example shows the number of bytes for a typed array. If you change this to different array types, you’ll get different answers.

var myArray = new Uint16Array([ 100,200,300,400,500,600 ]);
       alert( myArray.byteLength); 

This would display 12. That’s two bytes for each of the six array elements. The following code will result in an answer of 24:

var myArray = new Uint32Array([ 100,200,300,400,500,600 ]);
       alert( myArray.byteLength); 

Example 3: Converting a Typed Array to a Standard JavaScript Array

var myArray = new Uint16Array([ 100,200,300,400,500,600 ]);
       normalArray = Array.prototype.slice.call(myArray);

       if ( myArray.constructor === Uint16Array )
       {       
              alert("myArray is Uint16Array");
       }
       else
       {
              alert("myArray is NOT Uint16Array");
       }

       if ( normalArray.constructor === Uint16Array )
       {
              alert("normalArray is Uint16Array");
       }
       else
       {
              alert("normalArray is NOT Uint16Array");
       }

       if ( normalArray.constructor === Array )
       {
              alert("normalArray is Array");
       }
       else
       {
              alert("normalArray is NOT Array");
       }

This example uses the split() method to break and convert a Uint16Array into a standard JavaScript Array. You can see from the checks afterword that the new array is a normal array and no longer seen as a Uint16Array. The output from the three if/else checks is:

myArray is Uint16Array
normalArray is NOT Uint16Array
normalArray is Array

Get the Free Newsletter!

Subscribe to Developer Insider for top news, trends & analysis

Popular Articles

Featured