JavaScript Typed Arrays

Sanjam Singh
May 6 · 5 min read
Image from pixabay

A Typed Array may be a block of memory with a Typed read into it, very like however arrays work? As a result of a Typed Array is backed utilizing raw reminiscence, the JavaScript engine will skip the reminiscence directly to native libraries while not having to fastidiously convert the facts to a native illustration.

Typed arrays perform masses on top of JavaScript arrays for passing records to WebGL and completely different genus Apis dealing with binary knowledge.

Typed array views act like unmarried-kind arrays to the vicinity of associate ArrayBuffer. There are views for all similar previous numeric kinds, with self-descriptive names like Float32Array, Float64Array, Int32Array, and Uint8Array. There is to boot a singular read that has replaced the picture element array kind in Canvas’s ImageData: Uint8ClampedArray.

DataView is that the second type of reading and it’s supposed for handling heterogeneous info. rather than obtaining associate array-like API, the DataView object affords you with a get/set API to look at and Type discretional statistics sorts at discretional computer memory unit offsets. DataView works finely for analyzing and Typed document headers and completely different such struct-like facts.


To use ArrayBuffers that embody records with heterogeneous sorts, the highest approach is to use a DataView to the buffer. Suppose we’ve got a report layout that incorporates a header with an associate in Nursing 8-bit unsigned int followed utilizing 2 16-bit ints, followed by the approach of a payload array of 32-bit floats.

Typed array views square measure regularly within the native computer memory unit order. this can be to form them quick. You got to use a DataView to look at and Typed knowledge whereby endianness goes to be a problem.

The DataView in addition has techniques for Typed values to buffers. These setters square measure named inside the equal fashion as a result of the getters, “set” determined by approach of the statistics kind.

Browser APIs and Media Source API

A short assessment of the exclusive browser Apis could be present the employment of typed Arrays. The contemporary crop consists of WebGL, Canvas, internet Audio API, XMLHttpRequests, WebSockets, internet staff, Media supply API and File Apis. From the list of Apis, you may see that typed Arrays area unit well appropriate for performance-touchy transmission add an addition to with efficiency passing information spherical.

Recently, the media parts conjointly got some typed Array goodness within the form of the Media supply API. You’ll be able to directly bypass a typed Array containing video statistics to a video component with the employment of webkitSourceAppend.

This makes the video detail append the video statistics once this video. SourceAppend is tremendous for doing interstitials, playlists, streaming and totally different uses within which you’ll get to play varied videos the usage of one video component.

Transferable objects

Transferable objects in postMessage create passing binary records to alternative windows and internet employees an excellent deal faster. After you send an Associate in Nursing object to an employee as a Transferable, the item can become inaccessible inside the causation thread, and therefore the receiving employee gets possession of the thing.

This allows for Associate in Nursing hugely optimized implementation wherever they sent facts are not forever derived, merely the possession of the typed Array is transferred to the receiver.

To use Transferable objects with internet employees, you wish to use the webkitPostMessage technique on the employee. The webkitPostMessage approach works very similar to postMessage, however, it takes 2 arguments instead of only 1. The brought ordinal argument is Associate in Nursing array of gadgets you need to modify to the worker.


A small bit manipulation library for typed Arrays called BitView.Js because the name says, it very works the same as the DataView, except it works with bits. With BitView.Js, you’ll get ANd set the value of a bit at a given bit offset in an ArrayBuffer. BitView.Js conjointly has techniques for storing and loading 6-bit and 12-bit ints at impulsive bit offsets.

12-bit ints square measure glorious for running with show coordinates, as displays tend to possess fewer than 4096 pixels aboard the longer dimension. By the usage of 12-bit ints instead of 32-bit ints, you get a sixty twenty years length reduction.

For an additional extreme example, an operation with Shapefiles that use sixty four-bit floats for the coordinates, however, the exactitude as a result of the version was the foremost effective attending to be well-tried at visual display unit length. Shift over to twelve-bit base coordinates with 6-bit deltas to encrypt from the previous coordinate brought the file length all the manner right down to a tenth.


One of the most exciting things close to typed arrays is however they create it easier to deal with binary documents in JavaScript. Rather than parsing a string severally with the help of a personal and manually dynamic the characters into binary numbers and such, you’ll currently get Associate in Nursing ArrayBuffer with XMLHttpRequest and directly method it the employment of a DataView. This makes it sleek to e.g. Load in Associate in Nursing MP3 report and studies the information tags to be used on your audio player or load in an exceedingly shapefile and switch it right into a WebGL model or study the EXIF tags off a JPEG and show them to your slideshow app.

The problem with ArrayBuffer XHRs is that analyzing struct-like knowledge from the buffer could be a piece of pain. DataView is correct for finding out some numbers at a time in Associate in Nursing endian-secure vogue, typed array views are acceptable for analyzing arrays of element-length-aligned native endian numbers. What we tend felt lacking could be a manner to look at arrays and structs of records in an exceedingly convenient endian-safe vogue.

Thank you for reading my article and I hope you all will like it! I tried to explain to you briefly so that you have a basic idea about “JavaScript Typed Arrays”. If you want to learn more and clear about it, check out the link given below:


Medium’s largest Java publication, followed by 11300+ programmers. Follow to join our community.

Sanjam Singh

Written by

Cloud, DevOps and Web Developer | Machine Learning/ Artificial Intelligence | Blogger | Freelancer


A humble place to learn Java and Programming better.

Sanjam Singh

Written by

Cloud, DevOps and Web Developer | Machine Learning/ Artificial Intelligence | Blogger | Freelancer


A humble place to learn Java and Programming better.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store