Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
JavaScript ArrayBuffer Object
In this article, we will learn about JavaScript ArrayBuffer objects. The ArrayBuffer object in JavaScript is a fundamental part of the Web API for efficiently handling binary data.
What is ArrayBuffer?
The JavaScript ArrayBuffer object represents a generic, fixed-length raw binary data buffer. To manipulate the contents of an ArrayBuffer object we have to create a DataView object as we cannot manipulate the contents directly. We can read and write both using the DataView object.
Syntax
new ArrayBuffer(byteSize)
The byteSize parameter specifies the array buffer size in bytes that will be created.
Use Cases of ArrayBuffer
Following are the use cases of JavaScript ArrayBuffer objects:
- Binary Data Handling: Useful in Web APIs like the Fetch API for handling binary file downloads.
- WebSockets & Network Requests: Efficiently transfers binary data over network connections.
- File Processing: Reads and writes files using the File API.
- WebAssembly & Performance Optimization: Used in performance-critical applications like image processing and gaming.
Creating an ArrayBuffer
To create an ArrayBuffer, use the constructor and specify its size in bytes:
// Create an ArrayBuffer of 16 bytes let buffer = new ArrayBuffer(16); console.log(buffer.byteLength);
16
Basic ArrayBuffer Operations
Here's how to create and manipulate data using ArrayBuffer with DataView:
// Create an 8-byte ArrayBuffer
var buffer = new ArrayBuffer(8);
var view = new DataView(buffer);
// Write a 16-bit integer at position 0
view.setInt16(0, 0x2721);
// Read the value back
console.log('Hex value:', view.getInt16(0).toString(16));
console.log('Binary value:', view.getInt16(0).toString(2));
console.log('Decimal value:', view.getInt16(0));
Hex value: 2721 Binary value: 10011100100001 Decimal value: 10017
Working with Different Data Types
ArrayBuffer with DataView supports various data types:
let buffer = new ArrayBuffer(16);
let view = new DataView(buffer);
// Store different data types
view.setInt8(0, 42); // 1 byte integer
view.setInt16(1, 1000); // 2 byte integer
view.setFloat32(4, 3.14159); // 4 byte float
view.setFloat64(8, 2.71828); // 8 byte double
// Read them back
console.log('Int8:', view.getInt8(0));
console.log('Int16:', view.getInt16(1));
console.log('Float32:', view.getFloat32(4));
console.log('Float64:', view.getFloat64(8));
Int8: 42 Int16: 1000 Float32: 3.1415901184082031 Float64: 2.71828
Interactive Example
Below is an example of a JavaScript ArrayBuffer() Object in a browser environment:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ArrayBuffer Example</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
margin: 20px;
}
.sample {
font-size: 20px;
font-weight: 500;
padding: 10px;
background-color: #f0f0f0;
border-radius: 5px;
margin: 10px 0;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>JavaScript ArrayBuffer Object</h1>
<div class="sample"></div>
<button class="btn">Toggle Binary/Hex Display</button>
<h3>Click the button to toggle between hexadecimal and binary representation</h3>
<script>
let fillEle = document.querySelector(".sample");
var buffer = new ArrayBuffer(8);
var view1 = new DataView(buffer);
view1.setInt16(0, 0x2721);
let isBinary = false;
// Initially display hex
fillEle.innerHTML = "Hex: " + view1.getInt16(0).toString(16).toUpperCase();
document.querySelector('.btn').addEventListener('click', () => {
if (isBinary) {
fillEle.innerHTML = "Hex: " + view1.getInt16(0).toString(16).toUpperCase();
isBinary = false;
} else {
fillEle.innerHTML = "Binary: " + view1.getInt16(0).toString(2);
isBinary = true;
}
});
</script>
</body>
</html>
ArrayBuffer Properties
Key properties of ArrayBuffer objects:
let buffer = new ArrayBuffer(24);
console.log('Buffer size:', buffer.byteLength);
console.log('Is ArrayBuffer?', buffer instanceof ArrayBuffer);
// ArrayBuffer is not directly iterable
console.log('Buffer contents cannot be directly accessed');
console.log('Need DataView or TypedArray for manipulation');
Buffer size: 24 Is ArrayBuffer?: true Buffer contents cannot be directly accessed Need DataView or TypedArray for manipulation
Comparison with Regular Arrays
| Feature | Regular Array | ArrayBuffer |
|---|---|---|
| Data Type | Any JavaScript value | Raw binary data only |
| Size | Dynamic | Fixed at creation |
| Direct Access | Yes (arr[0]) | No (requires DataView/TypedArray) |
| Memory Efficiency | Lower | Higher for binary data |
Conclusion
The ArrayBuffer object is essential for handling binary data in JavaScript applications. Combined with DataView or TypedArray, it provides efficient memory management and precise control over binary data operations, making it invaluable for file processing, network communications, and performance-critical applications.
914 Views
