QNimate

  • CoursesVideos
  • WP PremiumPlugins
  • DemosLab
  • Home
  • QIdea
  • QTrack
Home Carbon Ads JavaScript ArrayBuffers And Typed Arrays

JavaScript ArrayBuffers And Typed Arrays

arraybuffer-typed-array

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.

var buffer = new ArrayBuffer(100);//100bits

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

  1. setInt8: Uses 8bit to store a number. It takes a signed value(-ve or +ve).
  2. setUint8: Uses 8bit to store a number. It takes a unsigned value(+ve)
  3. setInt16: Uses 16bit to store a number. It takes signed value.
  4. setUint16: Uses 16bit to store a number. It takes unsigned value.
  5. setInt32: Uses 32bit to store a number. It takes signed value.
  6. setUint32: Uses 32bit to store a number. It takes unsigned value.
  7. setFloat32: Uses 32bit to store a number. It takes signed decimal value.
  8. setFloat64: Uses 64bit to store a number. It takes signed decimal value.

Similarly DataView provides many functions for reading data from ArrayBuffer

  1. getInt8: Reads 8bit. Returns signed value.
  2. getUint8: Reads 8bit. Returns unsigned value.
  3. getInt16: Reads 16bit. Returns signed value.
  4. getUint16: Reads 16bit. Returns unsigned value.
  5. getInt32: Reads 32bit. Returns signed value.
  6. getUint32: Reads 32bit. Returns unsigned value.
  7. getFloat32: Reads 32bit. Returns signed decimal value.
  8. 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.

array

The above picture shows a Typed Array of 16bit blocks representing a ArrayBuffer.

Similarly we can create typed arrays representing different block sizes

  1. Int8Array: Create a typed array of 8bit block size. Values are signed.
  2. Uint8Array: Create a typed array of 8bit block size. Values are unsigned.
  3. Int16Array: Create a typed array of 16bit block size. Values are signed.
  4. UInt16Array: Create a typed array of 16bit block size. Values are unsigned.
  5. Int32Array: Create a typed array of 32bit block size. Values are signed.
  6. Uint32Array: Create a typed array of 32bit block size. Values are unsigned.
  7. Float32Array: Create a typed array of 32bit block size. Values are signed decimals.
  8. 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 typed_array = new Uint8Array(1024);//a typed array of size 1024bits
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.

//The set() method copies the elements of javascript arrays or typed arrays into a typed 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.

Jun 27, 2014Narayan Prusty
Detecting If Browser Is Online Or Offline Using JavaScriptPreloading Resources In Browser using rel="prefetch"
Comments: 2
  1. Bartek
    6 years ago

    I don’t know why, bu you are using bit units instead of bytes:
    var buffer = new ArrayBuffer(100);//100bits
    view.setInt32(8,22,false);//here we are writing 22 in big-endian after first byte.

    Not “100 bits” but 100 bytes, and not “after first byte”, but after 8th byte. Am I right?

    According to the spec:
    https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer
    https://developer.mozilla.org/pl/docs/Web/JavaScript/Reference/Global_Objects/DataView

    ReplyCancel
  2. Ravi
    7 years ago

    I am gettting stl file data in arrayBuffer, How do I save it as a file in binary format ?

    ReplyCancel

Leave a Reply to Ravi Cancel reply

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax

Narayan Prusty

I am a software engineer specialising in Blockchain, DevOps and Go/JavaScript. This is my personal blog where I write about things that I learn and feel interesting to share.

Image8 years ago 4 Comments Web Development
Share this
0
GooglePlus
0
Facebook
0
Twitter
0
Linkedin
  • JavaScript Arrays vs ArrayBuffers
  • ArrayBuffers
  • Typed Arrays
Related Articles
  • An Introduction To JavaScript Blobs and File Interface
  • Redis Permanent Storage
  • Difference between “Map” and “WeakMap” in JavaScript
  • Difference between Set and WeakSet in JavaScript
  • JavaScript “Map” Object
Our Sponsor
My Books

2014 - 2015 © QNimate
All tutorials MIT license