Uint8Array Javascript usecase

Question

I just discovered that Javascript has typed arrays via this link. I was immediately curious what the benefit of such objects might be in the language.

I noticed that UInt8Arrays lose the .map()-type functions that I would have for normal arrays objects so if you want to loop over them you would need a for loop.

I assumed that I might be able to expect some performance boost when using UInt8Arrays but this doesn't seem to be the case.

var a = d3.range(225)
var b = new Uint8Array(d3.range(225))

console.time("a")
var result = 0;
for (var j = 10000; j >= 0; j--) {
    for (var i = a.length - 1; i >= 0; i--) {
        result += a[i];
    };
};
console.timeEnd("a")
console.time("b")
var result = 0;
for (var j = 10000; j >= 0; j--) {
    for (var i = b.length - 1; i >= 0; i--) {
        result += b[i];
    };
};
console.timeEnd("b")

I am using the d3 library to quickly generate a large array. This script gives the following output:

a: 2760.176ms
b: 2779.477ms 

So the performance doesn't improve. The UInt8Array also doesn't throw an error when you insert a wrong value.

> new Uint8Array([1,2,3,4,'aasdf'])
[1,2,3,4,0]

With this in mind, what is the proper use case for UInt8Array in Javascript? It seems like the normal array is a lot more flexible, equally robust and equally fast.

Answer 1

"Performance" usually doesn't mean just how fast your script runs. There are also many other important factors, like how fast it freezes your pc and/or crashes. memory. The smallest amount of memory javascript implementation usually allocate for a var is 32 bit. This means

var a = true;

a boolean looks like this in your memory:

0000 0000 0000 0000 0000 0000 0000 0001

It's a huge waste, but usually not a problem, as no one uses a significant enough amount of them for it to really matter. Typed Arrays are for cases where it does matter, when you can actually reduce your memory usage by a huge amount, like when working with image data, sound data, or all sorts of raw binary data.

Another difference, that allows you to potentially save even more memory in some cases is that it allows you to operate on data passed by reference you'd normally pass by value.

Consider this case:

var oneImage = new Uint8Array( 16 * 16 * 4 );
var onePixel = new Uint8Array( oneImage.buffer, 0, 4 );

you now have 2 independent views on the same ArrayBuffer, operating on the same data, applying that concept allows you to not only have that one huge thing in your memory, it allows you to actually subdivide it into as many segments as you currently want to work on with little overhead, which is probably even more important.