🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Global_Objects › ArrayBuffer
ArrayBuffer - JavaScript - MDN Web Docs
It is an array of bytes, often referred to in other languages as a "byte array". You cannot directly manipulate the contents of an ArrayBuffer; instead, you create one of the typed array objects or a DataView object which represents the buffer in a specific format, and use that to read and write the contents of the buffer.
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › API › Blob › arrayBuffer
Blob: arrayBuffer() method - Web APIs - MDN Web Docs
December 2, 2023 - The arrayBuffer() method of the Blob interface returns a Promise that resolves with the contents of the blob as binary data contained in an ArrayBuffer.
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › API › Response › arrayBuffer
Response: arrayBuffer() method - Web APIs - MDN Web Docs
November 7, 2025 - The arrayBuffer() method of the Response interface takes a Response stream and reads it to completion. It returns a promise that resolves with an ArrayBuffer.
🌐
Node.js
nodejs.org › api › buffer.html
Buffer | Node.js v26.10.0 Documentation
This creates a view of the <ArrayBuffer> without copying the underlying memory. For example, when passed a reference to the .buffer property of a <TypedArray> instance, the newly created Buffer will share the same allocated memory as the <TypedArray>'s underlying ArrayBuffer.
🌐
Mozilla
developer.mozilla.org › en-US › docs › Web › JavaScript › Guide › Typed_arrays
JavaScript typed arrays - JavaScript | MDN
There are two types of buffers: ... don't have much to do with arrays — you cannot read or write to them directly. Instead, buffers are generic objects that just contain raw data....
🌐
GitHub
github.com › mdn › content › blob › main › files › en-us › web › api › blob › arraybuffer › index.md
content/files/en-us/web/api/blob/arraybuffer/index.md at main · mdn/content
The arrayBuffer() method of the {{domxref("Blob")}} interface returns a {{jsxref("Promise")}} that resolves with the contents of the blob as binary data contained in an {{jsxref("ArrayBuffer")}}.
Author: mdn
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Global_Objects › TypedArray › buffer
TypedArray.prototype.buffer - JavaScript - MDN Web Docs
July 10, 2025 - The buffer accessor property of TypedArray instances returns the ArrayBuffer or SharedArrayBuffer referenced by this typed array at construction time.
🌐
Mozilla
mdn.mozilla.org › en › JavaScript_typed_arrays › ArrayBuffer
October 15, 2017 - We cannot provide a description for this page right now
Find elsewhere
🌐
Medium
medium.com › @julienetienne › different-types-of-arrays-in-javascript-and-when-to-use-them-77f7843b71de
Different Types of Arrays in JavaScript + When to Use Them | by Julien Etienne | Medium
February 8, 2024 - An array-buffer is a Generic Raw Binary Data Buffer. Generic: It’s not tied down to a particular data type. It can be used to store any binary data, whether it represents integers, unsigned integers, floats, unsigned floats and strings.
🌐
Can I Use
caniuse.com › mdn-api_blob_arraybuffer
Blob API: `arrayBuffer()` | Can I use... Support tables for HTML5, CSS3, etc
"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers.
🌐
W3Schools
w3schools.com › js › js_arraybuffers.asp
JavaScript Array Buffer
The ArrayBuffer does not have methods to read and write data.
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › JavaScript › Reference › Global_Objects › SharedArrayBuffer
SharedArrayBuffer - JavaScript - MDN Web Docs
February 10, 2026 - The SharedArrayBuffer object is used to represent a generic raw binary data buffer, similar to the ArrayBuffer object, but in a way that they can be used to create views on shared memory. A SharedArrayBuffer is not a Transferable Object, unlike an ArrayBuffer which is transferable.
Author: nodejs
🌐
MDN Web Docs
devdoc.net › web › developer.mozilla.org › en-US › docs › Mozilla › js-ctypes › Using_js-ctypes › Working_with_ArrayBuffers.html
Working with ArrayBuffers - Mozilla | MDN
April 17, 2017 - The following codeblock provides a basic example of getting and setting Uint8ClampedArray and ArrayBuffer of ImageData: // context is a CanvasRenderingContext2D of some canvas var imageData = context.getImageData(x, y, w, h); var array = imageData.data; // array is a Uint8ClampedArray var buffer = imageData.data.buffer; // buffer is a ArrayBuffer // incomingBuffer is a TypedArray var imageData2 = context.createImageData(w, h); imageData2.data.set(incomingBuffer); Further, if you have a byte array pixelBuffer, and you need to create ImageData from it.
🌐
JavaScript.info
javascript.info › tutorial › binary data, files
ArrayBuffer, binary arrays
July 11, 2022 - Let’s eliminate a possible source of confusion. ArrayBuffer has nothing in common with Array: It has a fixed length, we can’t increase or decrease it. It takes exactly that much space in the memory. To access individual bytes, another “view” object is needed, not buffer[index].
Top answer
1 of 4
91

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 a little more 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.

2 of 4
11

An ArrayBuffer is a chunk of binary data in RAM. There are a few ways to "open" an ArrayBuffer for reading and writing:

  • Typed arrays, such as Uint16Array, can read and write the buffer by treating it as an array of integers. They don't let you control endianness; it uses the CPU's preferred endianness. Uint8Array is useful for controlling individual bytes (copying, slicing, etc).

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

More info: https://javascript.info/arraybuffer-binary-arrays

Top answer
1 of 1
41

An ArrayBuffer is more than just a simple array. It contains raw binary data. This is very useful for direct memory manipulation and conserving space.

When you create a normal array, you won't get a proper set of contiguous memory in many cases since arrays can contain any combination of different kinds of objects. This is useful when you have dynamic data and multiple types together (frequently happens in JS) but is not so useful when you know the exact layout of memory that you need.

This also allows you to view the data at the byte level. For example, it's pretty common in binary data formats to have a n byte long identifier number, an m byte long field telling you how many bytes are used for this field, and m' bytes of data that actually makes up the data field.

[ identifier ][ bytes of data ][ data ]

With an ArrayBuffer, you have the option of moving through that data on the byte level by using various Views. A regular array doesn't allow you to move through the data with that level of granularity because no guarantees are made about the memory layout.

Finally, because you are telling the compiler/interpreter exactly how much space you're going to use and exactly how you're going to view it, it can do much more advanced optimizations when working with that data. When iterating through that data, it doesn't have to make calculated leaps through memory. Instead, it knows exactly how far to move ahead in memory to find the next data point.

As for what Uint8Array is, it's a typed array. Essentially, it tells the compiler/interpreter that you will be accessing this data exclusively as 8-bit uints which, again, allows it to make better optimizations. Then you can use standard array indexing on it (arr[0], arr[1], etc.) and you'll be getting back the equivalent uint values out of the array.

TL;DR They take less space when the exact data format is known, allows you to move more exactly through your data and gives the compiler/interpreter greater options for optimization.

🌐
GeeksforGeeks
geeksforgeeks.org › what-is-the-difference-between-an-array-and-an-arraybuffer
What is the Difference Between an Array and an ArrayBuffer? | GeeksforGeeks
July 2, 2024 - An ArrayBuffer is a low-level binary data buffer. It is used to handle raw binary data and is primarily used in the scenarios where you need to work with the streams of binary data such as in WebSockets or when manipulating data from the files.