O que é um ArrayBuffer e como converter seu conteúdo?
Tags: arraybuffer, javascript, bytearray, typedarray
Published: 2021-09-15 23:14:45

---
title: O que é um ArrayBuffer e como converter seu conteúdo?
published: true
description: o que é, como manipular um ArrayBuffer e o que são Typed Arrays 
tags: arraybuffer, javascript, bytearray, typedarray
cover_image: https://images.unsplash.com/photo-1527427337751-fdca2f128ce5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80
---
Estava analisando uma requisição `POST` em um site e, no [`formData`](https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data) da requisição, me deparei com um _“unable to decode value”_ em uma das chave-valor. O valor sem decodificação acabou gerando um problema na aplicação que ajudo a desenvolver: não era possível serializar a informação para JSON e esse erro estourava no console do browser.

Acontece que o Chrome não estava decodificando um [**ArrayBuffer**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer). O **ArrayBuffer é um objeto _built-in_ do JavaScript usado para representar algum dado binário com tamanho fixo**. O construtor `ArrayBuffer()` cria um novo `ArrayBuffer` com um tamanho de bytes fornecido como argumento. 

Como não dá para manipular o conteúdo do ArrayBuffer diretamente, podemos criar um [_TypedArray_](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray), um **tipo de array para visualizar esses buffers binários e para representá-los num formato específico**.

Por exemplo:

```js
const buffer = new ArrayBuffer(8);
const view = new Int32Array(buffer);
```  

O código acima cria um buffer de 8 bytes e depois cria uma view usando o construtor `Int32Array`, que é um typed array de inteiros com sinal de 32 bits. Só para deixar claro, 8 bytes equivalem a 64 bits.

## Como transformar uma string em ArrayBuffer

Podemos, por exemplo, transformar um array de strings em um array com vários ArrayBuffer utilizando o [`TextEncoder`](https://developer.mozilla.org/en-US/docs/Web/API/TextEncoder). O TextEncoder basicamente pega a informação e emite uma stream de bytes em UTF-8:

```js
const encoder = new TextEncoder();
const stringsArr = ["xpto", "mock", "10"]
const stringsEncoded = stringsArr.map(string => encoder.encode(string));
const stringsBuffers = stringsEncoded.map(uint8 => uint8.buffer);
```

O que fizemos acima:
1. Instanciamos um `TextEncoder` chamado “encoder”
2. Criamos um array de strings
3. Mapeamos o array e chamamos o método `encode` do nosso encoder para cada string
4. Com as strings encodadas em `Uint8Array`, chamamos a propriedade `buffer` de cada uma delas, retornando o ArrayBuffer referenciado pelo typed array

Teste um `console.log(stringsBuffers)` no console do seu browser e veja os array buffers no array.

> _Por que o TextEncoder transforma em Uint8Array?_

Os browsers mais comuns não tem mais suporte a outros encodings que não sejam UTF-8. Você pode ler mais sobre isso [nessa pergunta do StackOverflow](https://stackoverflow.com/questions/6965107/converting-between-strings-and-arraybuffers). 

## Como transformar um ArrayBuffer em uma string

Usando a constante do exemplo anterior:  

 ```js
const decoder = new TextDecoder();
const stringsDecoded = stringsBuffers.map(buffer => decoder.decode(buffer));
```

O que fizemos acima:

1. Instanciamos um [`TextDecoder`](https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder), que consegue decodificar UTF-8, ISO-8859-2, KOI8-R, GBK, entre outros
2. Mapeamos nosso array de array buffers e utilizamos o método `decode` do nosso decoder para cada um

Dê um `console.log` e veja o resultado. 

---
_Fontes_:
[MDN ArrayBuffer](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer)
[MDN TypedArray](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray)
[TextEncoder](https://developer.mozilla.org/en-US/docs/Web/API/TextEncoder)
[TextDecoder](https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder)
[StackOverflow](https://stackoverflow.com/questions/6965107/converting-between-strings-and-arraybuffers)

---
_Esse texto não tem intenção de esgotar o tema. Acrescente nos comentários, e também aponte erros quando os identificar._