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.

Answer from Imdad on Stack Overflow
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

Discussions

ELI5: File, Uint8Array, Buffer, Arraybuffer, BytesArray, Blob…
A digital system, like a computer works on digital data, thus things which can be represented as digits. Or simpler: Computer sees a bit of numbers and works on them. Also a text is just a long number. Some time ago, one decided to have computers work on binary digits and to group 8 out of those as the typical size. That is a byte. (There were computers using other byte sizes, that's why sometimes, especially in network protocols, it is called octet) With a byte of eight bits you can represent 256 values. (From 0 to 255) over multiple decades there were discussions on representing text (actually that was prr-computer already with telegraphs etc) and one found the ASCII rules to map between numeric values and characters. Each letter in the English alphabet got a code. Thus the word Hello becomes the sequence of numbers 72 101 108 108 111 Now decimal system ia nice when counting with fingers, but not so good for a binary machine. As said we have the byte, thus instead ten digits is inconvenient so we use a number system with base 16, thus any digit can not only have ten different values (0 to 9) but 16 (0 to 9 and A to F) Thus the same numbers as above can be written in hex 0x48 0x65 0x6C 0x6C 0x6F Now each byte is represented by two hex digits which gives a nice structure (and if you notice that 0x41 is A and 0x61 is a you start to understand ASCII) Now over time 256 characters wasn't enough for represting text in all languages, so after many years and messing around with different code pages and encodings smart folks came up with Unicode and Utf-8 to encode all characters. Won't go there too deep, but in essence utf-8 uses the ASCII table for the first 128 characters (half a byte, the lower half) and all other characters use multiple bytes. The German letter Ä fornisntance is 0xC3 0x48. In addition the Unicode standard has specific rules on sorting and comparing those values and some fancy transformations. (Sorting rules are even language dependent, so the German Ä can be sorted like AE, behind Z or simply as A) Wenn Browsers and JavaScript were created it was decided that a string in JavaScirpt shall be Unicode data. This is logical as websites are full of human readable text and properties of Unicode are good (well, the story is more complicated there, but good enough) This was good for the time where Web was working with simple websites and JavaScript was doing minor text manipulation. However for lower layers of the compitong stack data is just a sequence of bytes. In memory you have bytes. A file is a sequence of bytes. The meaning of those bytes might be Unicode text, might be an image, might even be bianry program code all are just bytes. The difference is only in the one looking at it. Now treating all data as unicode string will do harm, as they have all the assumptions on top where only specific byte sequences are valid and so on. So something else had to be added. And in fact different groups added different things. Before we can explain that, one step more is needed: as said interpretation depends on who looks at the data. So back to our numbers and from decimal and hex to binary. As said 8 bit are a byte. The number 1 in binary with it 8 bits would look like 0b00000001 Here using 0b as prefix, so you interpret it as binary, not hey, not decimal. The value 127 inn inary looks like this: 0b01111111 all bits, but the first set. Now something fancy happens when we set the first bit to 1 as well: 0b11111111 This can either be 255 or -1. Wait what negative!? You will ask: Yes, there eisna problem with these numbers: Our byte has to represent negative numbers as well. And then the first digit tells us whether it's negative or positive. And whenever we look at the byte we have to make a choice how we look at it. Is it a text character? Is it a positive number? A negative number? The byte doesn't know and doesn't care only we when looking at it. Now the Uint8Array enters! By giving a sequence of bytes (some area in memory) to an Uint8Buffer we tell it "look at those bytes and treat tit like a sequence of bytes, where each byte is a 8 bit unsigned number" and by that we can work with those.bytes and each byte will be a number 0 to 256 and whatever we do with the array decides on what it does with those bytes. Maybe it is a pixel in an image, maybe an frequency on an audio file, maybe ... Now another term there eisnthe Buffer. A buffer is just some area in memory. An arrayBuffer is "this is my area of memory, but I haven't yet decided how i will interpret it" I said Buffer, I said complicazednhsorory ... That tis that Node.js developers Hand this issue before ArrayBuffer d Uint8Array was defined, so they created their own thing, which is similar to an Unit8Array (modern versions of Buffer are built on Uint8Array) but don't be confused, buffer is a generic term for some data stored somewhere, which is distinct from Buffer, which is a type in Node.js. Now there ris a bit more. 256 is a bit low formmany purposes. So you can group multiple bytes and make them digits in a larger number. Quite typical are efor 4 byte, which are 32 bit. Thus a Int32Array takes 4 bytes at once from the underlying data (the ArrayBuffer, the buffer, the memory region) and makes it a 32 bit signed number (- 2147483648 to 2147483647) the Uint32Array (0 to 4294967295) and if that isn't enought there are big(u)int64Array, which look at 8 byte at a time, which is also the number of byte/bit a modern CPU can store in it's register, transfer though bus and process the best, hence 64bit architecture. The key thing is: memory (RAM, disk or any other form) in modern computers is just a sequence of bytes and the way you look at it decides on the meaning. The computer doesn't know and you have to tell it. Uint8Array is the typically representation for low level work. ArrayBuffer is when you haven't decided, yet and all else are more special. More on reddit.com
🌐 r/node
6
12
December 16, 2021
How do I convert an ArrayBuffer to base64url and vice versa?
Somethings are one way hashes and you are not able to reverse them. I don’t know if that is the issue here though. More on reddit.com
🌐 r/learnjavascript
3
3
November 11, 2024
Question about loading MemoryStream in tab and saving to file
https://stackoverflow.com/questions/75072133/blazor-wasm-create-and-download-a-file Probably something along those lines, especially if you don't have access to an API to route to a FileStream. More on reddit.com
🌐 r/Blazor
6
2
September 24, 2024
[AskJS] Suddenly blob creation from large typed array is no longer allowed?
You are trying to create a ~2 GB TypedArray, then create a ~2 GB Blob. Then create a 10 byte Blob, then a 10 byte ArrayBuffer. That's ~4 GB of RAM. In 3 lines of code. You are probably running out of RAM. Blob storage is not contigous in Chrome. See Where is Blob binary data stored? . You really don't need to create the Blob at all, unless you are using stream() method or creating an Blob URL for some programming reasons. Just use subarray() method of TypedArray to get 10 bytes from the ~2 GB underlying ArrayBuffer source of the initial Uint8Array you create. The type "*.*" is not a valid MIME type. You should probably use "application/octet-stream" or just "text/plain" for binary data. 1024 * 1024 * 1024 * 1.8 outputs a float, 1932735283.2. You probably want to use Math.ceil(1024 * 1024 * 1024 * 1.8) to round up. More on reddit.com
🌐 r/javascript
10
4
July 4, 2024
🌐
W3Schools
w3schools.com › js › › js_arraybuffers.asp
W3Schools.com
An ArrayBuffer is fixed a block of memory, often used to store typed arrays.
🌐
Assemblyscript
assemblyscript.org › stdlib › arraybuffer.html
ArrayBuffer | The AssemblyScript Book
new ArrayBuffer(length: i32) Constructs a new buffer of the given length in bytes.
🌐
Bun
bun.com › docs › guides › binary › arraybuffer-to-array
Convert an ArrayBuffer to an array of numbers - Bun
3 weeks ago - const buf = new ArrayBuffer(64); const arr = new Uint8Array(buf); arr.length; // 64 arr[0]; // 0 (instantiated with all zeros)
Find elsewhere
🌐
Telerik
telerik.com › blogs › array-buffers-javascript
Array Buffers in JavaScript
October 22, 2025 - In JavaScript, an ArrayBuffer is defined as an object that represents a generic, fixed-length raw binary data buffer. It allows you to work with binary data directly without worrying about character encoding.
🌐
Scala Programming Language
scala-lang.org › api › 3.x › scala › collection › mutable › ArrayBuffer.html
ArrayBuffer
class ArrayBuffer[A] extends AbstractBuffer[A], IndexedBuffer[A], IndexedSeqOps[A, ArrayBuffer, ArrayBuffer[A]], StrictOptimizedSeqOps[A, ArrayBuffer, ArrayBuffer[A]], IterableFactoryDefaults[A, ArrayBuffer], DefaultSerializable
🌐
DEV Community
dev.to › ollaworld › arraybuffer-in-js-56ja
ArrayBuffer in JS - DEV Community
December 8, 2024 - The ArrayBuffer() constructor creates ArrayBuffer objects.
🌐
Nodesource
v8docs.nodesource.com › node-13.2 › d5 › d6e › classv8_1_1_array_buffer.html
v8: ArrayBuffer Class Reference
Detaches this ArrayBuffer and all its views (typed arrays). Detaching sets the byte length of the buffer and all typed arrays to zero, preventing JavaScript from ever accessing underlying backing store.
🌐
Reddit
reddit.com › r/node › eli5: file, uint8array, buffer, arraybuffer, bytesarray, blob…
r/node on Reddit: ELI5: File, Uint8Array, Buffer, Arraybuffer, BytesArray, Blob…
December 16, 2021 -

I’m always ending up guessing.. I need to somehow understand. I have no idea what I’m doing when working with files. Just trying stuff until it works. Someone plz ELI5..

My current issue is getting a png file from Firebase storage which gives a “file” which I’m trying to add on a pdf, where the library expects a Uint8Array or Arraybuffer. I’ve been doing similar things before. But end up just guessing my way until it works, and this time.. well it doesn’t work. I guessed it all with no success. I don’t know what I’m doing so I guess I need to actually learn ;)

Top answer
1 of 2
36
A digital system, like a computer works on digital data, thus things which can be represented as digits. Or simpler: Computer sees a bit of numbers and works on them. Also a text is just a long number. Some time ago, one decided to have computers work on binary digits and to group 8 out of those as the typical size. That is a byte. (There were computers using other byte sizes, that's why sometimes, especially in network protocols, it is called octet) With a byte of eight bits you can represent 256 values. (From 0 to 255) over multiple decades there were discussions on representing text (actually that was prr-computer already with telegraphs etc) and one found the ASCII rules to map between numeric values and characters. Each letter in the English alphabet got a code. Thus the word Hello becomes the sequence of numbers 72 101 108 108 111 Now decimal system ia nice when counting with fingers, but not so good for a binary machine. As said we have the byte, thus instead ten digits is inconvenient so we use a number system with base 16, thus any digit can not only have ten different values (0 to 9) but 16 (0 to 9 and A to F) Thus the same numbers as above can be written in hex 0x48 0x65 0x6C 0x6C 0x6F Now each byte is represented by two hex digits which gives a nice structure (and if you notice that 0x41 is A and 0x61 is a you start to understand ASCII) Now over time 256 characters wasn't enough for represting text in all languages, so after many years and messing around with different code pages and encodings smart folks came up with Unicode and Utf-8 to encode all characters. Won't go there too deep, but in essence utf-8 uses the ASCII table for the first 128 characters (half a byte, the lower half) and all other characters use multiple bytes. The German letter Ä fornisntance is 0xC3 0x48. In addition the Unicode standard has specific rules on sorting and comparing those values and some fancy transformations. (Sorting rules are even language dependent, so the German Ä can be sorted like AE, behind Z or simply as A) Wenn Browsers and JavaScript were created it was decided that a string in JavaScirpt shall be Unicode data. This is logical as websites are full of human readable text and properties of Unicode are good (well, the story is more complicated there, but good enough) This was good for the time where Web was working with simple websites and JavaScript was doing minor text manipulation. However for lower layers of the compitong stack data is just a sequence of bytes. In memory you have bytes. A file is a sequence of bytes. The meaning of those bytes might be Unicode text, might be an image, might even be bianry program code all are just bytes. The difference is only in the one looking at it. Now treating all data as unicode string will do harm, as they have all the assumptions on top where only specific byte sequences are valid and so on. So something else had to be added. And in fact different groups added different things. Before we can explain that, one step more is needed: as said interpretation depends on who looks at the data. So back to our numbers and from decimal and hex to binary. As said 8 bit are a byte. The number 1 in binary with it 8 bits would look like 0b00000001 Here using 0b as prefix, so you interpret it as binary, not hey, not decimal. The value 127 inn inary looks like this: 0b01111111 all bits, but the first set. Now something fancy happens when we set the first bit to 1 as well: 0b11111111 This can either be 255 or -1. Wait what negative!? You will ask: Yes, there eisna problem with these numbers: Our byte has to represent negative numbers as well. And then the first digit tells us whether it's negative or positive. And whenever we look at the byte we have to make a choice how we look at it. Is it a text character? Is it a positive number? A negative number? The byte doesn't know and doesn't care only we when looking at it. Now the Uint8Array enters! By giving a sequence of bytes (some area in memory) to an Uint8Buffer we tell it "look at those bytes and treat tit like a sequence of bytes, where each byte is a 8 bit unsigned number" and by that we can work with those.bytes and each byte will be a number 0 to 256 and whatever we do with the array decides on what it does with those bytes. Maybe it is a pixel in an image, maybe an frequency on an audio file, maybe ... Now another term there eisnthe Buffer. A buffer is just some area in memory. An arrayBuffer is "this is my area of memory, but I haven't yet decided how i will interpret it" I said Buffer, I said complicazednhsorory ... That tis that Node.js developers Hand this issue before ArrayBuffer d Uint8Array was defined, so they created their own thing, which is similar to an Unit8Array (modern versions of Buffer are built on Uint8Array) but don't be confused, buffer is a generic term for some data stored somewhere, which is distinct from Buffer, which is a type in Node.js. Now there ris a bit more. 256 is a bit low formmany purposes. So you can group multiple bytes and make them digits in a larger number. Quite typical are efor 4 byte, which are 32 bit. Thus a Int32Array takes 4 bytes at once from the underlying data (the ArrayBuffer, the buffer, the memory region) and makes it a 32 bit signed number (- 2147483648 to 2147483647) the Uint32Array (0 to 4294967295) and if that isn't enought there are big(u)int64Array, which look at 8 byte at a time, which is also the number of byte/bit a modern CPU can store in it's register, transfer though bus and process the best, hence 64bit architecture. The key thing is: memory (RAM, disk or any other form) in modern computers is just a sequence of bytes and the way you look at it decides on the meaning. The computer doesn't know and you have to tell it. Uint8Array is the typically representation for low level work. ArrayBuffer is when you haven't decided, yet and all else are more special.
2 of 2
1
it's a bit of a Pia esp when different libs want diff types. An ArrayBuffer is raw data. Like a big bag of data. You can't do anything with it - but if you convert it to something that can look inside the bag (Uint8Array), you can read / write it. If you just want to read, then Blob is your guy.
🌐
Tampermonkey
tampermonkey.net › changelog.php
Changes | Tampermonkey
Added support for sending ArrayBuffer and UInt8Array objects via GM_xmlhttpRequest · Added the $DATETIME$ variable for use in script templates · Fixed intermittent missing progress events for GM_download and GM_xmlhttpRequest · Fixed response text encoding of fetch-based, non-utf8 GM_xmlhttpRequest ·
🌐
Lena Larsson
designlenalarsson.com › c0g
Ebony male cum shots
April 4, 2026 - Get started by creating an about page · lenalarssonart@gmail.com
🌐
Base64.Guru
base64.guru › converter
Base64 Converter | Base64
Hello! That XMLHttpRequest just sends a request to the Data URI data:application/octet-stream;base64 in order to provide a solution for browsers that cannot handle ArrayBuffer downloads.
🌐
Zhihu
zhihu.com › en › answer › 133686569
How do you understand the ArrayBuffer in JavaScript?
Can you accept that your future child will take the mother's surname · Actually, I still support it. If it's a two-way marriage, the economic burden on families with sons would be reduced by more than a little.Actually, I still support it. If it's a two-way marriage, the economic burden on ...
🌐
DEV Community
dev.to › kshitij978 › arraybuffer-and-typedarray-3ege
ArrayBuffer and TypedArray - DEV Community
January 11, 2024 - The ArrayBuffer acts as the central object, representing raw binary data.
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › API › Response › arrayBuffer
Response: arrayBuffer() method - Web APIs | MDN
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.
🌐
Hugging Face
huggingface.co › docs › inference-providers › en › index
Inference Providers · Hugging Face
1 week ago - import { InferenceClient } from "@huggingface/inference"; import fs from "fs"; const client = new InferenceClient(process.env.HF_TOKEN); const imageBlob = await client.textToImage({ model: "black-forest-labs/FLUX.1-dev", inputs: "A serene lake surrounded by mountains at sunset, photorealistic style", }); // Save the image const buffer = Buffer.from(await imageBlob.arrayBuffer()); fs.writeFileSync("generated_image.png", buffer);
🌐
GitHub
github.com › topics › arraybuffer
arraybuffer · GitHub Topics · GitHub
Base64 for both node.js and browser JavaScript. It supports URL-safe encoding and enabling/disabling padding. Buffers can be implemented using ArrayBuffer, any TypedArray or Buffer