What is ArrayBuffer?
An array of bytes is known as an array buffer in javascript while known as a “byte array” in some other languages.
- The ArrayBuffer object represents a fixed-length raw binary data buffer whose content can’t be altered directly.
- A DataView object can also be used to access it, which is an untyped super flexible view over an ArrayBuffer or any typed array object that consists of regular array methods like map, find slice, etc.
- the content is read and written using these objects.
Any modifications to one object of the ArrayBuffer will be visible to the other objects and only one DataView or typed array object must be included in a single Array Buffer.
Syntax of ArrayBuffer
The Syntax of ArrayBuffer in JavaScript is given below:
The byteLength is a compulsory argument and it denotes the length or size of the array buffer in bytes that is being created.
Note: The return value will be the new ArrayBuffer object with size byteLength.
To further grasp the concept of an ArrayBuffer object in JavaScript, let us go through an example.
Example 1
In this example, we will simply initialize the ArrayBuffer object and give the size 16 and then console log the length of the initialized buffer using the built-in method of the Array/buffer object byteLength:
var myBuffer = new ArrayBuffer(16);
// console log the length of myBuffer
console.log(myBuffer.byteLength); // 16
Example 2
Let us manipulate the ArrayBuffer object a little further by using DataView. As discussed earlier we cannot modify or perform any operation on ArrayObject unless we use a view:
var myBuffer = new ArrayBuffer(16);
// DataView that refers to myBuffer object
var view1 = new DataView(myBuffer);
// Int8Array that refers to myBuffer object
var view2 = new Int8Array(myBuffer);
// set value to 32 bits
view1.setInt32(0, 0x76543210);
// console log the 32 bit value
console.log("32 bit value: "+view1.getInt32(0).toString(16));
// console log only the 8 bit value
console.log("8 bit value: "+view1.getInt8(0).toString(16));
console.log("32 bit value: "+view2[0].toString(16));
In the code above, first, we initialized an ArrayBuffer object with size 16 and then we referred to that ArrayObject with a DataView. We repeated the process of initializing another view using the Int8Array which represents the two’s-complement 8 bit signed integer array. After that we set the first view value to 32 bits and the second view value to 8-bit value and then console log it:
Conclusion
One of the core objects in JavaScript is the ArrayBuffer object, which is a fixed-length contiguous memory space reference whose content cannot be altered directly; instead, we need a Typed Array or a Data View. Data View specifies a format using methods in JavaScript, for example, getUint8(offset). To put it simply, an ArrayBuffer is used to store binary data, for example, binary data of a file or image.
In this post, we discussed the ArrayBuffer object in JavaScript along with two examples in which the first we simply initialized the ArrayBuffer object, and in the second example, we manipulated the ArrayBuffer object.
