javascript - What is the difference between an ArrayBuffer and a Blob?

Question

I'm reading http://www.html5rocks.com/en/tutorials/file/xhr2/ and trying to figure out the difference between an ArrayBuffer and a Blob.

Aren't both containers comprised of bits? Hence, couldn't both containers be viewed in many ways (as 32-bit chunks, 16-bit chunks, etc.)?

Answer 1

Summary

Unless you need the ability to write/edit (using an ArrayBuffer), then Blob format is probably best.

Detail

I came to this question from a different html5rocks page., and I found @Bart van Heukelom's comments to be helpful, so I wanted to elevate them to an answer here.

I also found helpful resources specific to ArrayBuffer and Blob objects. In summary: despite the emphasis on Blob being immutable/"raw data" Blob objects are easy to work with.

Resources that compare / contrast ArrayBuffer vs Blob:

• Mutability
  • an ArrayBuffer can be changed (e.g. with a DataView)
  • a Blob is immutable
• Source / Availability in Memory
  • Quoting Bart van Heukelom:

  • An ArrayBuffer is in the memory, available for manipulation.
  • A Blob can be on disk, in cache memory, and other places not readily available

• Access Layer
  • ArrayBuffer will require some access layer like typed arrays
  • Blob can be passed directly into other functions like window.URL.createObjectURL, as seen in the example from OP's URL.
    • However, as M?rre points out you may still need File-related interfaces and API's like FileReader to work with a Blob.
• Convert
  • You can convert Blob to ArrayBuffer and vice versa, which addresses the OP's "Aren't both containers comprised of bits?"
  • ArrayBuffer can be generated from a Blob using the FileReader's readAsArrayBuffer method , or the async method const arrayBuffer = await blob.arrayBuffer() (thanks to @Darren G)
  • Blob can be generated from an ArrayBuffer as @user3405291 points out new Blob([new Uint8Array(data)]);, shown in this answer
• Use in Other Libraries
  • jsZip; (new JSZip()).loadAsync(...) accepts both ArrayBuffer and Blob: String/Array of bytes/ArrayBuffer/Uint8Array/Buffer/Blob/Promise
• How does protocol handle ArrayBuffer vs Blob
  • Websocket (aka WS / WSS)
    • Use the webSocket's binaryType property (could have values "arraybuffer" or "blob") to "control the type of binary data being received over the WebSocket connection."
  • XmlHttpRequest (aka XHR)
    • Use the xhr's responseType property to "to change the expected response type from the server" (valid values include "arraybuffer", "blob", and others like "document", "json", and "text")

    • the response property will contain the entity body according to responseType, as an ArrayBuffer, Blob, Document, JSON, or string.

Other helpful documentation:

• ArrayBuffer

The ArrayBuffer object is used to represent a generic, fixed-length raw binary data buffer. 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.

• Blob

A Blob object represents a file-like object of immutable, raw data. Blob represent data that isn't necessarily in a JavaScript-native format. The File interface is based on Blob, inheriting blob functionality and expanding it to support files on the user's system.