Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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);
Output
16
Displaying and Manipulating Binary Data By ArrayBuffer
Following are the steps for displaying and manipulating binary data by ArrayBuffer object ?
- The HTML includes a <div> to display data, a button to trigger an event, and a heading for explanation.
- CSS styles set the font and text size for a clean display.
- An ArrayBuffer of 8 bytes is created, and a DataView is used to manipulate it.
- view1.setInt16(0, 0x2721) stores a hexadecimal value at the beginning of the buffer.
- Clicking the button converts and displays the stored value in binary format inside the <div>.
var buffer = new ArrayBuffer(8); var view1 = new DataView(buffer); view1.setInt16(0, 0x2721);
Example
Below is an example of a Javascript ArrayBuffer() Object ?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.sample {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript ArrayBuffer object</h1>
<div class="sample"></div>
<button class="Btn">CLICK HERE</button>
<h3>Click on the above button to see the array buffer object contents in binary</h3>
<script>
let fillEle = document.querySelector(".sample");
var buffer = new ArrayBuffer(8);
var view1 = new DataView(buffer);
view1.setInt16(0, 0x2721);
fillEle.innerHTML = view1.getInt16(0).toString(16);
document.querySelector('.Btn').addEventListener('click',()=>{
fillEle.innerHTML = view1.getInt16(0).toString(2);
})
</script>
</body>
</html>
Output
On clicking the "CLICK HERE" button ?
Conclusion
The ArrayBuffer object is a powerful tool for managing binary data in JavaScript. When combined with TypedArray and DataView, developers can efficiently read, write, and manipulate binary data. Whether working with file operations, network communications, or WebAssembly, ArrayBuffer offers a solid foundation for high-performance applications.
699 Views
