Readable Streams
Consume data chunk by chunk.
Readable Streams is a free JavaScript Academy lesson on CoddyKit — lesson 1 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
What Are Streams?
The Streams API processes data incrementally as chunks arrive, rather than loading everything into memory. This enables handling huge downloads, video, and live feeds efficiently.
The ReadableStream
A ReadableStream is a source you read from chunk by chunk. Browsers expose them on fetch responses, file blobs, and more.
Creating a Stream
Construct one with an underlying source object whose start(controller) enqueues chunks and signals completion.
const stream = new ReadableStream({
start(controller) {
controller.enqueue("chunk 1");
controller.enqueue("chunk 2");
controller.close();
}
});Getting a Reader
getReader() locks the stream and returns a reader. While locked, no other consumer can read it.
const reader = stream.getReader();Reading Chunks
reader.read() returns a promise resolving to { value, done }. done becomes true when the stream is exhausted.
const { value, done } = await reader.read();
console.log(value, done);The Read Loop
Loop on read() until done is true to consume the entire stream.
const reader = stream.getReader();
while (true) {
const { value, done } = await reader.read();
if (done) break;
console.log("got", value);
}Releasing the Lock
Call reader.releaseLock() to unlock the stream so another reader can take over.
reader.releaseLock();The pull Method
An underlying source can define pull(controller), called when the consumer wants more data — enabling lazy, on-demand generation.
let i = 0;
new ReadableStream({
pull(controller) {
controller.enqueue(i++);
if (i > 5) controller.close();
}
});Async Iteration
In modern environments a ReadableStream is async-iterable, letting you use for await...of instead of a manual loop.
for await (const chunk of stream) {
console.log(chunk);
}Cancelling a Stream
reader.cancel(reason) stops the stream early and releases resources — important for aborting large downloads.
await reader.cancel("user navigated away");Tee: Splitting a Stream
tee() returns two streams that each receive a copy of every chunk — useful to read data twice (e.g. cache and display).
const [a, b] = stream.tee();
// read a and b independentlyQuick Check
Test readable streams.
Recap: Readable Streams
You created a ReadableStream, obtained a reader, consumed chunks with read() in a loop, released the lock, used pull for lazy data, iterated with for await, and split with tee(). Next: streaming fetch responses.
Frequently asked questions
Is the “Readable Streams” lesson free?
Yes — the full text of “Readable Streams” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.
What will I learn in “Readable Streams”?
Consume data chunk by chunk. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start JavaScript Academy?
No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 1 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Readable Streams” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this JavaScript Academy lesson?
Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.