In this post I will be explaining what are ArrayBuffers and Typed Arrays. And what are their uses. And also how to use them. All APIs we see in this post comes under HTML5 specifications.
JavaScript Arrays vs ArrayBuffers
Elements of JavaScript Arrays can be of any type(strings, numbers, arrays, objects etc). JavaScript arrays have no size limit, they can grow dynamically. The problem with JavaScript arrays is that they are slow in terms of execution time and occupy more memory.
The problem arrives when creating applications that require too much computation and deal with large amount of numbers. So ArrayBuffers were introduced.
A ArrayBuffer is an collection of 8bit blocks (a byte represents an ArrayBuffer element). ArrayBuffers have fixed length so they cannot grow dynamically. ArraysBuffers can only store numbers. All blocks are initialized to number 0 on creation of the ArrayBuffer.
ArrayBuffers
ArrayBuffers can be created using ArrayBuffer class.
Reading and Writing values into ArrayBuffer can be done using DataView class. Its not compulsory that only 8bits can be used to represent a number. We can use 8, 16, 32 and 64bits to represent a number.
DataView provides many other functions for writing into ArrayBuffer
- setInt8: Uses 8bit to store a number. It takes a signed value(-ve or +ve).
- setUint8: Uses 8bit to store a number. It takes a unsigned value(+ve)
- setInt16: Uses 16bit to store a number. It takes signed value.
- setUint16: Uses 16bit to store a number. It takes unsigned value.
- setInt32: Uses 32bit to store a number. It takes signed value.
- setUint32: Uses 32bit to store a number. It takes unsigned value.
- setFloat32: Uses 32bit to store a number. It takes signed decimal value.
- setFloat64: Uses 64bit to store a number. It takes signed decimal value.
Similarly DataView provides many functions for reading data from ArrayBuffer
- getInt8: Reads 8bit. Returns signed value.
- getUint8: Reads 8bit. Returns unsigned value.
- getInt16: Reads 16bit. Returns signed value.
- getUint16: Reads 16bit. Returns unsigned value.
- getInt32: Reads 32bit. Returns signed value.
- getUint32: Reads 32bit. Returns unsigned value.
- getFloat32: Reads 32bit. Returns signed decimal value.
- getFloat64: Reads 64bit. Returns signed decimal value.
Learn more about Endianness.
Typed Arrays
We saw how we can read and write numbers into ArrayBuffers. But the method was very hectic because we had to call a function every single time. What if we want to read/write like JavaScript arrays? We do have a solution for that i.e., Typed Arrays.
Typed arrays can be used to represent ArrayBuffers in terms of a particular size of blocks. Typed arrays provide JavaScript Arrays way of read/write.
The above picture shows a Typed Array of 16bit blocks representing a ArrayBuffer.
Similarly we can create typed arrays representing different block sizes
- Int8Array: Create a typed array of 8bit block size. Values are signed.
- Uint8Array: Create a typed array of 8bit block size. Values are unsigned.
- Int16Array: Create a typed array of 16bit block size. Values are signed.
- UInt16Array: Create a typed array of 16bit block size. Values are unsigned.
- Int32Array: Create a typed array of 32bit block size. Values are signed.
- Uint32Array: Create a typed array of 32bit block size. Values are unsigned.
- Float32Array: Create a typed array of 32bit block size. Values are signed decimals.
- Float64Array: Create a typed array of 64bit block size. Values are signed decimals.
We can also create Typed arrays without creating a ArrayBuffer. In that case a ArrayBuffer is created internally by browser with the same size as the Typed Array.
var copy = new Uint8Array(typed_array);//a typed array from another types array. A copy is produced
var typed_array_2 = new Int32Array([0,1,2,3]);//a typed array from javascript arrays.
Typed arrays also define methods for setting and querying entire regions of the array.
var typed_array_1 = new Uint8Array(1024);
var typed_array_2 = new Uint8Array([0,1,2,3]);
typed_array_1.set(typed_array_2); // Copy them to the start of another byte array
typed_array_1.set(typed_array_2, 4);// Copy them again at a different offset
typed_array_1.set([0,1,2,3], 8); //Or just copy values direct from a regular array
Conclusion
Blob APIs provide us an interface to retrieve its data as an ArrayBuffer. Binary files are composed of numbers and strings. So we can read data of an blob using Typed Array and DataView. To read characters we can read the decimal representation of the character (i.e., the character code which is stored in the file as a number) and convert it to string type. More about ArrayBuffer to and from String conversion. Binary files always don’t have a sequence of numbers therefore you will have to use DataView as data in file is heterogeneous.
ArrayBuffers are used in <canvas> and WebGL APIs. There are a lot of other uses of ArrayBuffers. This post was just an overview of ArrayBuffers.
