javascript ArrayBuffer, what's it for?

Basically ArrayBuffer is used to keep binary data. It can be the binary data of an image for example.

In other languages buffers are proved very useful. Yes, of-course it is little difficult to understand/use than other data types.

ArrayBuffer can be used to get data of jpg image (RGB bytes) and produce a png out of it by adding alpha byte (i.e. RGBA).

Mozilla site has given a small use of ArrayBuffer here

Working with complex data structures

By combining a single buffer with multiple views of different types, starting at different offsets into the buffer, you can interact with data objects containing multiple data types. This lets you, for example, interact with complex data structures from WebGL, data files, or C structures you need to use while using js-ctypes.

Consider this C structure:

struct someStruct {  
  unsigned long id;  
  char username[16];  
  float amountDue;  
};  

You can access a buffer containing data in this format like this:

var buffer = new ArrayBuffer(24);  

// ... read the data into the buffer ...  

var idView = new Uint32Array(buffer, 0, 1);  
var usernameView = new Uint8Array(buffer, 4, 16);  
var amountDueView = new Float32Array(buffer, 20, 1);  

Then you can access, for example, the amount due with amountDueView[0].

Note: The data structure alignment in a C structure is platform-dependent. Take precautions and considerations for these padding differences.

Other than images, it's useful for precisely constructing and destructing low level network data packets used in protocols like UDP.

An ArrayBuffer represents binary data in RAM. You can "open" an ArrayBuffer for reading and writing using either a typed array or a DataView.

Typed arrays, such as Uint16Array, can read and write the buffer by treating it as a single array of integers. They don't let you control endianness; it uses the platform's native endianness. Using Uint8Array is useful for controlling individual bytes (this isn't affected by endianness).

DataView is not as simple, but it gives you much more control. It gives you full control over endianness, integer size, and byte index (e.g. you can access a 32 bit integer at an index even if it's not divisible by 32 bits). These things can be chosen each time you read and write an integer with the same DataView.

This may be helpful: https://javascript.info/arraybuffer-binary-arrays