# ArrayBuffer

> Learn how JavaScript ArrayBuffer stores raw binary data, how to read it through typed arrays or DataView, slice it, resize it, and fetch binary data.

Author: [Flavio Copes](https://flaviocopes.com/about/) | Published: 2019-05-12 | Updated: 2026-07-18 | Topics: [Web Platform](https://flaviocopes.com/tags/platform/) | Canonical: https://flaviocopes.com/arraybuffer/

An **ArrayBuffer** represents a region of memory containing raw bytes.

You cannot read or write those bytes directly through the buffer. Create a typed array or `DataView` that views the same memory.

See the [MDN ArrayBuffer reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer) for every property and method.

Create a fixed-length buffer by passing its size in bytes:

```js
const buffer = new ArrayBuffer(64)
```

New bytes are initialized to zero. `byteLength` reports the current size:

```js
buffer.byteLength //64
```

## Read and write the bytes

Use a typed array when all values have the same numeric type:

```js
const buffer = new ArrayBuffer(4)
const bytes = new Uint8Array(buffer)

bytes[0] = 255
bytes[0] //255
```

Use `DataView` when you need to read and write different numeric types or control byte order:

```js
const buffer = new ArrayBuffer(4)
const view = new DataView(buffer)
view.setUint16(0, 500, true)
view.getUint16(0, true) //500
```

The buffer and its views share the same memory.

## Copy part of a buffer

`slice()` copies bytes from a start index up to, but not including, an end index:

```js
const buffer = new ArrayBuffer(64)
const newBuffer = buffer.slice(8, 32)

newBuffer.byteLength //24
```

The second argument is an end position, not a length. The [MDN `slice()` reference](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/slice) documents negative indexes and omitted arguments.

## Resizable and transferable buffers

You can opt into a resizable buffer by setting a maximum length:

```js
const buffer = new ArrayBuffer(8, {
  maxByteLength: 16
})

buffer.resize(12)
buffer.byteLength //12
```

`transfer()` moves the bytes to a new buffer and detaches the old one:

```js
const moved = buffer.transfer()

moved.byteLength //12
buffer.byteLength //0
```

Resizable and transferable ArrayBuffers were added in ES2024. Check compatibility when supporting older browsers.

## Downloading data from the internet as an ArrayBuffer

Use `fetch()` and `Response.arrayBuffer()` to download binary data:

```js
const downloadBuffer = async url => {
  const response = await fetch(url)

  if (!response.ok) {
    throw new Error(`HTTP error: ${response.status}`)
  }

  return response.arrayBuffer()
}
```

The returned promise fulfills with an `ArrayBuffer`. See the [MDN `arrayBuffer()` reference](https://developer.mozilla.org/en-US/docs/Web/API/Response/arrayBuffer) for response and size errors.