DEV Community: Davi Silva

Entendendo Javascript

Davi Silva — Sun, 08 Jun 2025 18:45:41 +0000

Davi Silva

Jun 8 '25

[Javascript] Call Stack e Memory Heap

#programming #javascript #beginners #webdev

Comments

8 min read

[Javascript] Call Stack e Memory Heap

Davi Silva — Sun, 08 Jun 2025 18:30:41 +0000

É muito comum quando se trabalha com Objetos e Arrays no Javascript, passar por problemas de referências em memória, no qual mudar um objeto altera outro magicamente, e às vezes você encontra muitas soluções em bibliotecas que realizam cópia de objetos e mágicamente os problemas somem.

Mas quantas vezes você teve que na mão mesmo invocar o spread operator para clonar um objeto mas não funcionava em objetos encadeados? Isso é um problema meio bobo mas que causa muitos problemas se não for prevenido com cuidado.

Call Stack

Pilhas de operações que armazenam sequências de ações que o programa vai executar. Essas operações irão ser adicionadas na estrutura de dados STACK (pilha) e irão removê-las à medida em que o código for sendo executado. Ou seja, de forma mais curta podemos dizer que Call Stack é uma pilha de execuções de funções.

Essa pilha é basicamente uma estrutura que armazena a chave como endereço da memória e possui como valor uma referência para um tipo primitivo ou um apontamento para outro endereço da memória.

🤔 Call stack guarda dados somente do tipo primitivo (int,bigint,string...), organiza a ordem de chamada das funções e armazena valores.

⚠️ No javascript tipos primitivos são imutáveis (string, number, bigint, boolean, undefined, and symbol).

Vamos pensar um pouco 🤔

O que será impresso abaixo será 2 ou 1?

let n1=1
let n2=n1 
n1=n1+1
console.log(n2) //???

No exemplo acima, quando cria uma variável do tipo primitivo - lembrando que no Javascript todos os tipos primitivos são imutáveis - ao adicionar o valor da soma na variável n1, ao invés de substituir o valor na memória irá criar uma nova referência com o valor da soma (2) e como n2 recebia a referência da memória de n1 e como vimos que ela irá ter outra nova referência, então n2 não irá ser atualizado. Ou seja:

let n1=1
let n2=n1 // n2 não irá ser 2 e sim 1 pois tipos primitivos são imutáveis
n1=n1+1
console.log(n2) //Não irá ser igual a 2

Esse comportamento já é diferente quando trabalhamos com objetos.

No exemplo abaixo, foi criado um objeto p2 que recebe outro objeto p1 , ao modificar p1 irá ocasionar na mudança também na variável p2. Esse é um problema que é muito fácil de replicar quando se trabalha com objetos, e a dor de cabeça que isso pode dar é grande.

let p1 = {
    id:1,
    name:'Davi'
}

let p2 = p1

p1.name = 'John Wick'

console.log("P1 =>> ",p1)
console.log("P2 =>> ",p2)

/*
    [LOG]: "P1 =>> ",  {
      "id": 1,
      "name": "John Wick"
    } 
    [LOG]: "P2 =>> ",  {
      "id": 1,
      "name": "John Wick"
    }
*/

Para quem já trabalhou com desenvolvimento web usando tecnologias como React ou Vue, já está familiarizado com conceitos de Reatividade, bem, acima meio que fizemos uma abordagem de reatividade sem querer no qual ao mudar qualquer um dos objetos irá alterar todas as variáveis. 😎

Umas das diversas alternativas para contornar esse problema é realizar Deep Copy que é o processo de clonar um objeto por completo, criando uma nova referência na memória e assim evitando a reatividade.

let p1 = {
    id:1,
    name:'Davi'
}
let p2 = Object.assign({},p1)

p1.name = 'John Wick'

console.log("P1 =>> ",p1)
console.log("P2 =>> ",p2)

p2.name="Bruce Dickinson"

console.log("P1 =>> ",p1)
console.log("P2 =>> ",p2)

Outra alternativa é usar o spread operator para realizar uma Shallow Copy que resumidamente é copiar os atributos principais do objeto. Muito eficiente quando se trabalha com objetos simples, ou seja, não possuem encadeamento de dados dentro de uma mesma estrutura.

let p1 = {
    id:1,
    name:'Davi',
    log(){
        console.log(this.name)
    }
}
let p2 = {...p1}
p1.name = 'John Wick'

p1.log() // [LOG]: "John Wick"
p2.log() // [LOG]: "Davi"

p2.name="Bruce Dickinson"

p1.log() //[LOG]: "John Wick"
p2.log() // [LOG]: "Bruce Dickinson"

Mas Shallow Copy pode ser um problema quando se trabalha com objetos encadeados, como mostrado no exemplo abaixo:

let p1 = {
    id:1,
    name:'Davi',
    getName(){
        return this.name
    },
    parent:{
        id:33,
        name:'Thanos',
        getName(){
            return this.name
        },
    }
}
let p2 = {...p1}
p1.name = 'John Wick'

console.log("[P1] : ",p1.getName() ) // [LOG]: "[P1] : ",  "John Wick"

console.log("[P2] : ",p2.getName()) // [LOG]: "[P2] : ",  "Davi" 

p2.name="Bruce Dickinson"
p2.parent.name = "Marshall Bruce Mathers III"

console.log("[P1] : ", p1.getName() ) // [LOG]: "[P1] : ",  "John Wick" 

console.log("[P2] : ",p2.getName() ) // [LOG]: "[P2] : ",  "Bruce Dickinson" 

console.log("[P1] - PARENT] : ",p1.parent.getName()) // [LOG]: "[P1] - PARENT] : ",  "Marshall Bruce Mathers III"

console.log("[P2] - PARENT] : ",p2.parent.getName()) // [LOG]: "[P2] - PARENT] : ",  "Marshall Bruce Mathers III"

Aí nesses caso, o ideal é usar o Deep Copy que irá copiar todos os métodos e propriedades da variável p1 para uma nova referência, fazendo com que ao mudar p2 não irá alterar p1 e vice-versa.

let p1 = {
    id:1,
    name:'Davi',
    getName(){
        return this.name
    },
    parent:{
        id:33,
        name:'Thanos',
        getName(){
            return this.name
        },
    }
}

// Função recursiva personalizada que irá realizar o deep copy
function deepClone(obj) {
    let newObj = {};

    for (let key in obj) {
        let val = obj[key];

        if (val instanceof Array) {
            newObj[key] = [...val]
        } else if (typeof val === 'object') {
            newObj[key] = deepClone(val)
        } else {
            newObj[key] = val;
        }
    }
    return newObj;
}

let p2 = deepClone(p1)

p1.name = 'John Wick'

console.log("[P1] : ",p1.getName() ) // [LOG]: "[P1] : ",  "John Wick"

console.log("[P2] : ",p2.getName()) // [LOG]: "[P2] : ",  "Davi" 

p2.name="Bruce Dickinson"
p2.parent.name = "Marshall Bruce Mathers III"

console.log("[P1] : ", p1.getName() ) // [LOG]: "[P1] : ",  "John Wick" 

console.log("[P2] : ",p2.getName() ) // [LOG]: "[P2] : ",  "Bruce Dickinson" 

console.log("[P1] - PARENT] : ",p1.parent.getName()) // [LOG]: "[P1] - PARENT] : ",  "Thanos" 

console.log("[P2] - PARENT] : ",p2.parent.getName()) // [LOG]: "[P2] - PARENT] : ",  "Marshall Bruce Mathers III"

Eu poderia fazer o deep clone de diversas maneira, como usando a biblioteca lodash que abstrai muitas coisas e facilita a nossa vida, mas você deve ter já visto por aí pessoas criando cópias profundas de objetos através do JSON.stringify junto com JSON. parse, porém isso só é possível se o objeto for capaz de ser serializado. Como assim?

Usar essa técnica funciona muito ao trabalhar com objetos que só possuem atributos, por exemplo:

let p1 = {
    id:1,
    name:'Davi'
}

let p2 = JSON.parse(JSON.stringify(p1))

p1.name = 'John Wick'

console.log("[P1] - ",p1) 
/*
    [LOG]: "P1 =>> ",  {
    "id": 1,
    "name": "John Wick"
    } 
*/

console.log("[P2] - ",p2)
/*
    [LOG]: "P2 =>> ",  {
    "id": 1,
    "name": "Davi"
    } 
*/

p2.name="Bruce Dickinson"

console.log("[P1] - ",p1)
/*
    [LOG]: "P1 =>> ",  {
    "id": 1,
    "name": "John Wick"
    } 
*/

console.log("[P2] - ",p2)
/*
    [LOG]: "P2 =>> ",  {
    "id": 1,
    "name": "Bruce Dickinson"
    } 
*/

Tudo feito e ok até agora, certo? De fato funcionou muito bem a cópia usando serialização do objeto por meio do JSON.stringify.

💡 Serialização é o processo de traduzir uma estrutura de dados para um formato adequado para ser transferido, manipulado ou armazenado.

Porém vamos ver um caso em que essa técnica não irá funcionar, no caso irei usar um mesmo exemplo já citado acima:

let p1 = {
    id:1,
    name:'Davi',
    getName(){
        return this.name
    },
    parent:{
        id:33,
        name:'Thanos',
        getName(){
            return this.name
        },
    }
}

let p2 = JSON.parse(JSON.stringify(p1))

p1.name = 'John Wick'

console.log("[P1] : ",p1.getName() ) // [LOG]: "[P1] : ",  "John Wick"

console.log("[P2] : ",p2.getName())  // [ERR]: p2.getName is not a function

p2.name="Bruce Dickinson"
p2.parent.name = "Marshall Bruce Mathers III"

console.log("[P1] : ", p1.getName() ) 

console.log("[P2] : ",p2.getName() ) 

console.log("[P1] - PARENT] : ",p1.parent.getName()) 

console.log("[P2] - PARENT] : ",p2.parent.getName())

Perceba que como o meu objeto possui um método, irá causar problemas na serialização, o que mostra que essa estratégia não é boa para trabalhar com funções, null, undefined e entre outros.

Um ponto importante a destacar é que Shallow Copy é muito mais performática do que Deep Copy, sendo ideal para casos em que você deseja fazer uma cópia de um objeto sem ser necessário levar em consideração objetos aninhados dentro do mesmo.

Para evitar correr riscos de atribuir em uma variável um objeto já existente sem fazer algumas das cópias apresentadas, é melhor trabalhar com o const pois não permite você alterar o endereço da memória de uma variável.

Memory Heap

Onde os tipos não primitivos são armazenados
Guarda endereços de memórias que podem serem apontados pela a Call Stack para trabalhar com dados do tipo referências (Objetos, Array, Funções...)

🤔 Pilha para guardar dados de tipos de referências como objetos, funções, arrays, entre outros.

Vamos para exemplos práticos, nada de ficar preso em teoria demais !

const name = "Mr_Spin"
const nick = name 
const items_ids = [1,2]
const items_ids_copy = items_ids

O código acima poderá ser visto de maneira mais ilustrativa, algo semelhante como a imagem abaixo. Notem que items_ids e items_ids_copy possuem referência para o mesmo array na memory heap.

Sempre que cria uma valor do tipo não primitivo, o Javascript irá alocar o valor na Memory Heap com um identificador único da memória e irá ligá-lo com valor na call stack. Ou seja, cria um endereço na memória na call stack e o valor irá ser a referência do endereço da memória da Memory Heap que irá possuir o tipo não primitivo.

Quando fazemos alguma operação push no array, não irá mudar o endereço da memória da call stack, mas o valor na Memory Heap irá ser alterado.

Vamos analisar mais códigos para juntar as peças

const obj1={counter:1}
const obj2=obj1
obj2.counter++
// obj2 => {counter:2}
// obj1 => {counter:2}

Note que como estamos trabalhando com objetos que são tipos não primitivos, estamos criando uma referência na memória na memory heap e o valor será adicionado lá.

Porém, ao adicionarmos em uma nova variável um valor que irá ser a variável já criada, irá acabar criando um novo endereço na memória na call stack e para essa nova variável o valor irá apontar para a mesma referência já criada na memory heap, ou seja, embora sejam variáveis diferentes na call stack a referência na memory heap será a mesma.

O exemplo anterior é muito usado para indicar o compartilhamento de referência na memória (Memory Heap) em endereços de memória diferentes na call stack.

Para evitar ter problemas em duas variáveis diferentes apontarem para o mesmo endereço da memória existe o Object.Create ou outras técnicas de deep copy que criam novo endereço na memory heap, como já foi apresentado já no tópico sobre Call Stack.

Alterar tanto o obj1 como o obj2 irá ocasionar na modificação na mesma referência da memória do objeto na memory heap.

Referências

Javascript Fundamentals - Call Stack and Memory Heap

Understanding Call Stack and Heap Memory in JS

Understanding the size of an object in Chrome/V8

Obrigado por ler até aqui! 🙌

Se esse post te ajudou ou te fez pensar em algo novo, bora continuar esse papo!

[Javascript] Entendendo BLOB

Davi Silva — Sun, 08 Jun 2025 18:06:17 +0000

O que é BLOB ?

Blob significa Binary Large Object, ou seja, um objeto binário que é muito usado em aplicações web para trabalhar com representações binárias de sequência de dados.

Geralmente quando usa Blob é mais para trabalhar com Uploads/Downloads de dados binários, ou até mesmo criar um arquivo no lado do cliente (browser) e exibir ele na página sem precisar de um servidor para enviar tal imagem ou arquivo.

É importante ressaltar que Blob é imutável, ou seja, não podemos alterar seus dados diretamente a não ser que crie um novo blob para misturar dados. Uma vez que é criado, ele irá ficar armazenado na memória do browser até for solicitado a sua remoção ou mesmo o documento for "desconstruído".

Blob objects are immutable" We can't change data directly in a Blob, but we can slice parts of a Blob, create new Blob objects from them, mix them into a new Blob and so on.

No meu dia a dia, costumo usar o Blob como se fosse um arquivo binário que possui um tipo específico, assim como um arquivo normal, no qual posso processar, enviar, renderizar no lado do cliente (browser) sem ter que precisar de um servidor mandando para mim um arquivo que talvez o usuário quase não irá visualizar ou interagir. Se eu fosse ter que ficar guardando tal arquivo no servidor provavelmente iria ter mais um certo custo para manter. 😉

BLOB como URL

Assim como nós temos file// para representar a url para um arquivo real em um filesystem real, temos também o blob// que é usado para referenciar o conteúdo de um blob, podendo ser acessado em quase todos os lugares que usa URL's.

Então sempre que criamos uma URL do objeto blob iremos ver a seguinte estrutura:

blob:http://127.0.0.1:5500/cb83b604-ad8c-4759-8d04-37d0f69b6fc7

Para criar um blob URL, basta usar o URL.createObjectURL, que irá retornar um DOMString que contém de fato a string da url que irá representar o objeto.

Entenda a DOMString como uma string UTF-16 que irá ser mapeada diretamente para um String que é usado no Javascript.

   const linkTag = document.createElement("a")
   // Nome da extensão e arquivo que irá ser baixado.
   linkTag.download = "blob.txt"

   const myCustomBlob = new Blob(["Olá, Dev!"],{
    type:"text/plain"
   })

    const url = URL.createObjectURL(myCustomBlob)

    linkTag.href = url
    // Baixa automaticamente o arquivo 
    linkTag.click()

    //Limpar referência do blob na memória do browser, pois como blob
    //é criado no documento ele irá ser imutável e só irá ser limpado da memória quando o documento for desfeito ou quando for solicitado a sua remoção da memória.
    URL.revokeObjectURL(url)

⚠️ Sempre que você chama o createObjectURL irá ser criado uma nova URL do objeto blob.

Vamos visualizar mais um exemplo para ficar mais claro 😁. Abaixo criei um script simples em que irá exibir em uma página html dois links que ao serem clicados pelo o usuário irá baixar duas versões do mesmo conteúdo em formatos diferentes, sendo respectivamente .txt e .html.

    const blobHtml = new Blob(
        [
            '<html><head><title>Hello text</title></head><body><h1 style="color: red">Hello JavaScript!</h1></body></html>',
        ],
        { type: "text/html" }
    );

    const blobLink = URL.createObjectURL(blobHtml);

    // Saída : blob:http://127.0.0.1:5500/cb83b604-ad8c-4759-8d04-37d0f69b6fc7
    console.log(blobLink); //Irá sempre ser uma URL diferente.

    const linkToDownloadTxtFile = document.createElement("a");
    linkToDownloadTxtFile.href = blobLink;
    linkToDownloadTxtFile.download = "myBlob.txt";
    linkToDownloadTxtFile.innerText = "Baixar arquivo em formato txt";

    const linkToDownloadHTMLFile = document.createElement("a");
    linkToDownloadHTMLFile.href = blobLink;
    linkToDownloadHTMLFile.download = "myBlob.html";
    linkToDownloadHTMLFile.innerText = "Baixar arquivo em formato html";

    const app = document.querySelector("#app");

    app.appendChild(linkToDownloadTxtFile);

    app.insertAdjacentHTML("beforeend", "</br>");
    app.insertAdjacentElement("beforeend", linkToDownloadHTMLFile);

É importante notar que a URL gerada só irá ser válida enquanto não for criada outro blob e a aplicação ainda estiver rodando. Percebi pois quando pegava a mesma URL e jogava em outra aba do browser iria exibir normalmente a informação, mas se por acaso eu abrir outro navegador e tentar abrir a url ou até mesmo dar um reload na página dava problemas na exibição.

Blob para Stream

Se você já trabalha com processamento de dados sobre demanda, ou seja, a medida em que vai recebendo ou criando os dados já vai realizando conjunto de operações contínuas com finalidade de gerar uma saída, deve já ter ouvido falar de Streams.

No NodeJs existe as Streams Nativas ( Readable, Transform, Writable) que oferecem uma alternativa de processamento de dados em Stream, que é uma alternativa ao processamento de dados em Batch. Assim como também no browser foi criado as Web Stream que são uma forma de trabalhar com Streams só que de maneira Universal, em cross-plataforma, ou seja, podendo trabalhar facilmente com Streams no navegador.

No processo de ETL (Extraction, Tranform and Load) é bastante usado esses tipos de processamentos usando estruturas de dados que permitem o processamento contínuo de pedaços (chunks) de uma fonte maior, sendo uma forma mais inteligente pois evita ter que armazenar na memória grande quantidade de dados que provavelmente sua máquina não irá conseguir rodar e com isso irá dar uma séries de bloqueios.

Como o foco dessa discussão não é Stream, inclusive posso até criar um artigo sobre elas. Iremos ir direto ao ponto 😅.

Mas qual a relação de Streams com Blob?

Bom, a interface do Blob possui o método stream() no qual retorna uma ReadableStream (Fonte de dados) que irá ser usada depois em uma pipeline para processamento de cada chunks.

Para simplificar a nossa vida, abaixo criei um exemplo simples em que uso uma Readable Stream no NodeJs para exibir os dados bufferizado em um formato de texto, a medida em que pego cada chunk já peço logo para Decodificar os dados binários para texto.

    const blobHtml = new Blob(
        [
            '<html><head><title>Hello text</title></head><body><h1 style="color: red">Hello JavaScript!</h1></body></html>',
        ],
        { type: "text/html" }
    );

    const readable = blobHtml.stream();
    //Transforma cada chunk que é por padrão um view object Uint8Arra (Representação binária em 8 bits do ArrayString) para uma String Javascript
    const textDecoded = readable.pipeThrough(new TextDecoderStream());

    for await (let myChunk of textDecoded) {
        console.log("chunk: ", myChunk);
    }

    // Saída: chunk:  <html><head><title>Hello text</title></head><body><h1 style="color: red">Hello JavaScript!</h1></body></html>

Note que acima Utilizei o TextDecoderStream, basicamente o que ele faz é só uma conversão dos dados binários de cada chunk em uma String do Javascript, essa técnica é muito usada quando se trabalha com Buffers.

Fiz mais um exemplo para ficar mais claro, só que dessa vez sem usar o TextDecoderStream.

    const blobHtml = new Blob(
    [
        '<html><head><title>Hello text</title></head><body><h1 style="color: red">Hello JavaScript!</h1></body></html>',
    ],
    { type: "text/html" }
    );

    const readable = blobHtml.stream();
    const stream = readable.getReader();


    while (true) {
        const { done, value } = await stream.read();

        if (done) {
            console.log("Terminei tudo meu chapa! :)");
            break;
        }

        console.log("CHUNK >>> ", value);
    }

Note que basicamente as streams usam as mesma lógicas das Generics do Javascript, no qual retorna um objeto que possui o atributo done (se já finalizou a iteração) e value que é de fato o valor lido.

Para usos mais específicos, como Blob trabalha com "dados binários com tipos", podemos transformar um blob também para um ArrayBuffer que é nada mais nada menos do que usado para trabalhar com dados binários na memória de forma crua e genérica, e como ele não permite trabalhar com manipulação aí que surgems os TypedArrays que são formas de representações desses dados binários para poder realizar manipulações, como por exemplo temos o Uint8Array ( 8-bit unsigned integer array), Uint16Array (16-bit unsigned integer array), Uint32Array (32-bit unsigned integer array), Float64Array (64-bit floating point numbers) e entre outros.

Deixar link para essa discussão acima

    const bufferPromise = await blob.arrayBuffer();

    // Ou
    blob.arrayBuffer().then(buffer => {
        // Faz alguma coisa aqui
    });

Blob para base64

Uma alternativa muito interessante quando se trabalha com Blob é a possibilidade de converter um arquivo binário para um formato de texto em que irá ser usado na web em arquivos que só suportam dados em formato de texto como HTML ou CSS. Assim, se por acaso quiser pegar alguma imagem e exibir ela em uma previsualização na página, isso será possível se haver uma alternativa de converter dados binários de um conteúdo em um formato de texto que irá representar determinado arquivo e poderá ser embutido em tags do HTML.

No caso do HTML, podemos usar Strings em DataURL para exibir determinado arquivo enviado pelo o usuário na página, ou até mesmo compartilhar essa url na rede para ficar salva no servidor ou banco de dados e ser utilizado em outras aplicações.

Por mais que DataURL sejam extremamentes usada para trabalhar com arquivos de imagem, se por acaso for usado arquivos muitos grandes irá acarretar em problemas relacionados a desempenho e memória devido ao processo de codificação. Logo, seu uso é mais indicado para arquivos menores.

Olha só que legal, no exemplo abaixo fiz uma demostração que irá gerar uma url que representa o arquivo binário que criei usando o blob. Com essa DataURL, posso facilmente jogar ela em qualquer navegador no meu computador e ele irá ler o arquivo em formato de texto.

    let myBlob = new Blob(["Hello, world!"], { type: "text/plain" });

    const reader = new FileReader();

    // Quando terminar irá pegar os dados em formato DataURL acessando reader.result ou this.result.
    reader.onload = function () {
        console.log("DataURL: ", this.result);
    };

    //Inicia o processo de transformar dados binários em string DataURL
    reader.readAsDataURL(myBlob);

    // Saída: data:text/plain;base64,SGVsbG8sIHdvcmxkIQ==

O legal é que consigo também trabalhar com imagens para criar uma representação dela em formato de string e assim eu conseguir compartilhar na web ou renderizar no Frontend.

Há também outras possibilidades de utilização do Blob, como o uso dele para trabalhar junto com o Canvas para transformar dados dele em um formato que poderá ser facilmente enviado para algum lugar. Recomendo visitar o site javascript.info pois há muitos tutoriais e explicações sobre o mundo do Javascript de forma bem detalhas e maravilhosa😉.

File Interface e FileReader

Quando começamos a trabalhar com arquivos no navegador, como por exemplo uploads de arquivos, temos alguns desafios que é pegar um dado que está no filesystem do sistema operacional e exibir ele no navegador para um propósito de pré-visualização.

Como já foi exibido no exemplo anterior, foi realizado a leitura de um Blob e transformado em um DataURL que poderá ser usado para para visualização ou envio de informações. Mas da mesma forma que consigo transformar dados do blob, também é possível codificar dados de um arquivo para base64. Isso é possível devido ao fato de objetos File herdarem do Blob, possiblitando a utilização dos mesmos métodos e propriedades.

Assim, se o usuário passar um arquivo via input do tipo file no html, fica muito fácil pegar o arquivo e realizar alguma operação de leitura nele através do FileReader, seja em formato binário, textual ou até para DataURL.

No exemplo abaixo, fiz uma pequena demonstração desse cenário de envio de arquivo e leitura para um formato base64.

    const fileInput = document.getElementById("photo-1");

    fileInput.addEventListener("change", (element) => {
        const fileReader = new FileReader();
        //Como só quero pegar um único arquivo enviado, então acesso somente ao índice 0 do array.
        const image = fileInput.files[0];

        fileReader.addEventListener("load", (el) => {
            console.log(fileReader.result);
        });

        fileReader.readAsDataURL(image);
    });

    // Saída : data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAB4AAAAQ4CAYAAADoT...

Blob e File ambos possuem o .stream() que retorna uma readable stream e assim fazendo com que você consiga usar pipelines para fazer o processamento sobre demanda de arquivos ou dados a medida em que recebe chunks.

const fileInput = document.getElementById("photo-1");

const customWritableStream = new WritableStream({
  write(chunk) {
    console.log("Chunk >>> ", chunk);
  },
});

fileInput.addEventListener("change", (element) => {
  const readable = fileInput.files[0].stream();

  const textStream = readable.pipeThrough(new TextDecoderStream());

  textStream.pipeTo(customWritableStream);
});

E isso foi tudo pessoal, espero que tenha ficado claro, sinceramente acho esses conceitos muitos interessantes para estudar principalmente quando você começa a trabalhar com processamento de dados binários e tem que exibí-los em algum local na página ou até deixar disponível para baixar.

Referências básicas:

Obrigado por ler até aqui! 🙌

Se esse post te ajudou ou te fez pensar em algo novo, bora continuar esse papo!