Streaming with ReadableStream and WritableStream in Deno - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this ReadableStream output when read?

Consider this Deno code creating a ReadableStream that enqueues numbers 1 to 3. What will be the output when reading all chunks?

Deno

const stream = new ReadableStream({
  start(controller) {
    controller.enqueue(1);
    controller.enqueue(2);
    controller.enqueue(3);
    controller.close();
  }
});

const reader = stream.getReader();

async function readAll() {
  const results = [];
  while (true) {
    const { done, value } = await reader.read();
    if (done) break;
    results.push(value);
  }
  return results;
}

readAll().then(console.log);

A []

B [1, 2, 3]

C [1, 2]

D [3]

💡 Hint

Think about what the controller.enqueue method does and when the stream closes.

The stream enqueues 1, 2, and 3 in order, then closes. The reader reads all chunks until done is true, so the output is [1, 2, 3].

📝 Syntax

intermediate

Which option correctly creates a WritableStream that logs each chunk?

You want to create a WritableStream in Deno that logs every chunk it receives. Which code snippet is correct?

A

const writable = new WritableStream({
  write: async function(chunk) {
    console.log(chunk);
  }
});

B

const writable = new WritableStream({
  write(chunk) {
    console.log(chunk);
  }
});

C

const writable = new WritableStream({
  write(chunk) {
    await console.log(chunk);
  }
});

D

const writable = new WritableStream({
  write: (chunk) => {
    console.log(chunk);
  }
});

💡 Hint

WritableStream write method can be async and must be a function property.

Option A correctly defines an async write function. Option A is missing async keyword (allowed but less common). Option A uses await incorrectly on console.log (which is not a promise). Option A uses arrow function but write expects a method, not arrow function.

❓ state_output

advanced

What is the final value of 'count' after piping a ReadableStream to a WritableStream?

Given this code, what is the value of count after the pipe operation completes?

Deno

let count = 0;

const readable = new ReadableStream({
  start(controller) {
    for (let i = 0; i < 5; i++) {
      controller.enqueue(i);
    }
    controller.close();
  }
});

const writable = new WritableStream({
  write(chunk) {
    count += chunk;
  }
});

await readable.pipeTo(writable);
console.log(count);

A 10

B 15

C 0

D 5

💡 Hint

Sum numbers from 0 to 4.

The readable stream enqueues 0,1,2,3,4. The writable stream adds each chunk to count. Sum 0+1+2+3+4 = 10.

🔧 Debug

advanced

Why does this WritableStream code cause a runtime error?

This WritableStream code throws an error when writing chunks. What is the cause?

Deno

const writable = new WritableStream({
  write(chunk) {
    this.total += chunk;
  },
  total: 0
});

const writer = writable.getWriter();
await writer.write(5);

A SyntaxError: Unexpected token"

B ReferenceError: total is not defined

C TypeError: Cannot read property 'total' of undefined

D No error, total is updated correctly

💡 Hint

Check what 'this' refers to inside the write method.

Inside the write method, 'this' is undefined because the method is called without binding. The property 'total' is not accessible, causing a TypeError.

🧠 Conceptual

expert

Which statement about backpressure in streams is correct?

In the context of ReadableStream and WritableStream in Deno, which statement about backpressure is true?

A Backpressure happens only if the readable stream closes before the writable stream.

B Backpressure means the readable stream forces the writable stream to speed up processing.

C Backpressure is a feature that automatically drops chunks when the writable stream is busy.

D Backpressure occurs when the writable stream is slower than the readable stream, causing the readable stream to pause.

💡 Hint

Think about how streams coordinate data flow to avoid overload.

Backpressure is a mechanism where the writable stream signals it is busy, causing the readable stream to slow or pause to avoid overwhelming the writable stream.

Practice

1. What is the main purpose of a ReadableStream in Deno?

easy

A. To accept data chunks that can be written

B. To produce data chunks that can be read

C. To store data permanently

D. To convert data into JSON format

Solution

1. Step 1: Understand the role of ReadableStream

   A ReadableStream is designed to produce data chunks that can be read by consumers.

2. Step 2: Differentiate from WritableStream

   A WritableStream accepts data chunks to be written, which is the opposite role.

3. Final Answer:

   To produce data chunks that can be read -> Option B

4. Quick Check:

   ReadableStream produces data = A [OK]

Hint: ReadableStream produces data; WritableStream consumes data [OK]

Common Mistakes:

• Confusing ReadableStream with WritableStream
• Thinking streams store data permanently
• Assuming streams convert data formats automatically

2. Which of the following is the correct way to create a new WritableStream in Deno?

easy

A. const stream = new WritableStream({ write(chunk) { console.log(chunk); } });

B. const stream = WritableStream.write(chunk => console.log(chunk));

C. const stream = new WritableStream.write(chunk => console.log(chunk));

D. const stream = WritableStream({ write(chunk) { console.log(chunk); } });

Solution

1. Step 1: Recall WritableStream constructor syntax

   WritableStream is created with new WritableStream() and an object with a write method.

2. Step 2: Check each option's syntax

   const stream = new WritableStream({ write(chunk) { console.log(chunk); } }); correctly uses new WritableStream({ write(chunk) { ... } }). Others misuse syntax or omit new.

3. Final Answer:

   const stream = new WritableStream({ write(chunk) { console.log(chunk); } }); -> Option A

4. Quick Check:

   WritableStream needs new + write method object = C [OK]

Hint: Use 'new WritableStream' with an object having a write method [OK]

Common Mistakes:

• Omitting 'new' keyword
• Calling WritableStream as a function
• Passing a function directly instead of an object

3. What will the following code output in Deno?

const readable = new ReadableStream({
  start(controller) {
    controller.enqueue('Hello');
    controller.enqueue('World');
    controller.close();
  }
});

const reader = readable.getReader();

(async () => {
  let result = '';
  while(true) {
    const { done, value } = await reader.read();
    if (done) break;
    result += value + ' ';
  }
  console.log(result.trim());
})();

medium

A. Error: reader.read is not a function

B. HelloWorld

C. Hello World

D. undefined

Solution

1. Step 1: Understand the ReadableStream setup

   The stream enqueues two chunks: 'Hello' and 'World', then closes.

2. Step 2: Analyze the reading loop

   The loop reads each chunk, appends it with a space to result, and stops when done is true.

3. Step 3: Output after trimming

   After reading both chunks, result is 'Hello World ' which trims to 'Hello World'.

4. Final Answer:

   Hello World -> Option C

5. Quick Check:

   Chunks read and concatenated with space = D [OK]

Hint: ReadableStream chunks read sequentially, concatenated with spaces [OK]

Common Mistakes:

• Forgetting to await reader.read()
• Not trimming the final string
• Assuming chunks concatenate without spaces

4. Identify the error in this Deno code using streams:

const writable = new WritableStream({
  write(chunk) {
    console.log(chunk.toUpperCase());
  }
});

const writer = writable.getWriter();

await writer.write(123);
await writer.close();

medium

A. write method must be async

B. Missing await before new WritableStream

C. getWriter() is not a function

D. Cannot call toUpperCase on a number

Solution

1. Step 1: Check the write method usage

   The write method calls chunk.toUpperCase(), which only works on strings.

2. Step 2: Analyze the write call argument

   The code writes the number 123, which has no toUpperCase() method, causing a runtime error.

3. Final Answer:

   Cannot call toUpperCase on a number -> Option D

4. Quick Check:

   toUpperCase on number causes error = A [OK]

Hint: Check data types before calling string methods [OK]

Common Mistakes:

• Assuming write must be async
• Thinking getWriter() is invalid
• Missing await on WritableStream creation

5. You want to transform a ReadableStream of text chunks to uppercase and write them to a WritableStream. Which approach correctly implements this in Deno?

hard

A. Pipe the readable through a TransformStream that uppercases chunks, then pipe to writable

B. Directly write chunks from readable to writable without transformation

C. Use readable.getReader() and writable.getWriter(), but forget to release locks

D. Convert chunks to uppercase after writing to writable

Solution

1. Step 1: Understand stream transformation

   To modify data between readable and writable, use a TransformStream that changes chunks to uppercase.

2. Step 2: Use pipeThrough and pipeTo methods

   Pipe the readable stream through the transform, then pipe the result to the writable stream for correct flow and backpressure handling.

3. Step 3: Evaluate other options

   Directly write chunks from readable to writable without transformation skips transformation, C risks locking issues, and D transforms too late after writing.

4. Final Answer:

   Pipe the readable through a TransformStream that uppercases chunks, then pipe to writable -> Option A

5. Quick Check:

   Use TransformStream + pipeThrough + pipeTo = B [OK]

Hint: Use TransformStream between readable and writable for data changes [OK]

Common Mistakes:

• Skipping TransformStream for data modification
• Not handling stream locks properly
• Transforming data after writing