Readable Streams
Consume data chunk by chunk.
Readable Streams is a free JavaScript Academy lesson on CoddyKit. This is lesson 1 of 4. Any 3 lessons of this learning path are free to read in full — after that, CoddyKit PRO unlocks every lesson, plus hands-on practice with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, and your progress syncs across the web and the CoddyKit app. The JavaScript Academy course includes 4 lessons in total.
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.
Learn JavaScript with an AI tutor — free
Write and run real code in your browser, get instant help from a 24/7 AI tutor, and pick up where you left off on the web or in the app.
- Courses
- 59
- Lessons
- 200
Frequently Asked Questions
Is the “Readable Streams” lesson free?
Yes — any 3 lessons of the JavaScript Academy learning path, including “Readable Streams”, are free to read in full here on the web. After that, CoddyKit PRO unlocks every lesson, plus interactive practice with a built-in code editor and a 24/7 AI tutor. The JavaScript Academy course includes 4 lessons in total.
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, so you can start here or from the beginning and move at your own pace. This is lesson 1 of 4.
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.