JavaScript Interview Question: What is a Blob?
By: Heloise Parein
Tags: JavaScript, Interview Questions

If you already enabled a user to download some file from your website, you probably came across the type Blob. You might have checked some example online and adapted them, not thinking twice about what this Blob thing was. As long as it works…

This kind of knowledge can show the difference between a Junior and a Senior developer. Or, as a Junior, would make you stand out as curious and eager to learn. Even if you are not preparing for an interview, having a clear and simple understanding of what a Blob is might help you understand what is going on next time you come across it in a middle of a complex code zipping some PDF files, so here we go:

Usage

To download some simple text you could do something like this:

For more complicated files on the other hand, this won’t be enough. If we want to download a PDF file we generated, we would have to do something like this (this example is using jsPDF):

What is a Blob?

Blobs are not a JavaScript specificity. Originally, Blobs were created to be used in database management systems. The type was created in the 1970s for big files like audio, images or videos that were too big to be stored in normal database fields. The term actually means “Binary Large Object”.

In JavaScript, Blobs are used to represent files as a immutable raw data. In the console, the Blob we created in the previous example looks like this:

As you can see, a Blob has two properties: size and type. The size is the size of the data in Bytes. The type is a string supposed to contain the MIME type. I didn’t give any type when creating my Blob, but I should have done something like this:

const blob = new Blob([doc.output()], { type: 'application/pdf' });

Now my Blob also has a type:

As you can see, returning the Blob in the console doesn’t give us much information. We can’t see the content of the file.

What is there in a Blob?

JavaScript Blobs offer a few methods to access their content. One of them is the text method that returns a Promise resolving to the content of the Blob as text (technically as USVString).

That gives us a pretty unreadable content:

%PDF-1.3

3 0 obj

<</Type /Page

/Parent 1 0 R

/Resources 2 0 R

/MediaBox [0 0 595.28 841.89]

/Contents 4 0 R

>>

endobj

4 0 obj

<</Length 67>>

stream

0.57 w

0 G

BT

/F1 16 Tf

18.4 TL

0 g

NaN NaN Td

(Hello world!) Tj

ET

endstream

endobj

1 0 obj

<</Type /Pages

/Kids [3 0 R ]

/Count 1

>>

endobj

5 0 obj

<</BaseFont/Helvetica/Type/Font

/Encoding/WinAnsiEncoding

/Subtype/Type1>>

endobj

6 0 obj ...

There is not much that can be done with that, but it gives you an idea of how the file looks like internally.

There are two other methods enabling you to access the content of a Blob:

arrayBuffer that will return a Promise resolving to an ArrayBuffer

stream that will return a ReadableStream

Manipulate Blobs

You regularly receive files from HTTP requests. If you use the fetch API, you need to use the blob method on the body to read the Blob out of the response:

In our previous examples, we created a PDF file ourself using a library and created a Blob out of it.

You can also create a Blob from another one. You can only slice the origin Blob, that is to say return only a subpart of its bytes.

That can be useful for really simple Blobs, but for more complex files this could corrupt your file and make the sliced Blob unreadable.