Web Workers for parallel processing in Deno - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What does this Web Worker code output?

Consider this Deno Web Worker code that sends a message to the worker and receives a response. What will be printed in the main thread console?

Deno

const worker = new Worker(new URL('./worker.ts', import.meta.url).href, { type: 'module' });
worker.onmessage = (e) => {
  console.log('Main thread received:', e.data);
  worker.terminate();
};
worker.postMessage('hello');

// worker.ts content:
// self.onmessage = (e) => {
//   self.postMessage(e.data.toUpperCase());
// };

A SyntaxError due to import.meta.url usage

B Main thread received: HELLO

C Main thread received: hello

D TypeError: worker.postMessage is not a function

💡 Hint

Remember that the worker converts the message to uppercase before sending it back.

The worker receives 'hello', converts it to uppercase 'HELLO', and sends it back. The main thread logs this result.

📝 Syntax

intermediate

Which option correctly creates a Deno Web Worker with inline code?

In Deno, you want to create a Web Worker using inline code (a Blob URL). Which option correctly creates the worker?

A const worker = new Worker(new URL('blob:self.onmessage = e => self.postMessage(e.data * 2);'), { type: 'module' });

B const worker = new Worker(new Blob([`self.onmessage = e => self.postMessage(e.data * 2);`], { type: 'application/javascript' }), { type: 'module' });

C const worker = new Worker(URL.createObjectURL(new Blob([`self.onmessage = e => self.postMessage(e.data * 2);`], { type: 'application/javascript' })), { type: 'module' });

D const worker = new Worker('data:text/javascript,self.onmessage = e => self.postMessage(e.data * 2);', { type: 'module' });

💡 Hint

Creating a Blob URL requires using URL.createObjectURL with a Blob object.

Option C correctly creates a Blob with JavaScript code and then creates a URL for the worker. Other options misuse Blob or URL constructors.

🔧 Debug

advanced

Why does this Deno Web Worker code throw an error?

This code tries to create a worker but throws an error. What is the cause?

Deno

const worker = new Worker('./worker.ts', { type: 'module' });
worker.postMessage('test');

// Error: Uncaught TypeError: Failed to construct 'Worker': Script at './worker.ts' cannot be accessed from origin 'null'.

A Workers cannot be created in Deno.

B The worker script must be a JavaScript file, not TypeScript.

C The worker option 'type' must be 'classic', not 'module'.

D The worker script path must be an absolute URL, not a relative path.

💡 Hint

Check how Deno resolves worker script URLs.

Deno requires an absolute URL for the worker script, often using new URL('./worker.ts', import.meta.url).href. Relative paths cause origin errors.

❓ state_output

advanced

What is the value of 'count' after this worker communication?

A main thread sends numbers to a worker that sums them. After sending 3 numbers, what is the final 'count' value received?

Deno

// main.ts
const worker = new Worker(new URL('./sumWorker.ts', import.meta.url).href, { type: 'module' });
let count = 0;
worker.onmessage = (e) => {
  count = e.data;
};
worker.postMessage(5);
worker.postMessage(10);
worker.postMessage(3);

// sumWorker.ts
let total = 0;
self.onmessage = (e) => {
  total += e.data;
  self.postMessage(total);
};

A 18

B 3

C 5

D 10

💡 Hint

The worker adds each number to total and sends the updated sum back.

The worker sums 5 + 10 + 3 = 18 and sends this back after each message. The main thread's 'count' ends at 18.

🧠 Conceptual

expert

Which statement about Deno Web Workers is TRUE?

Choose the correct statement about Web Workers in Deno.

A Deno Web Workers run in separate threads and can import modules using ES module syntax.

B Deno Web Workers must be created with the 'classic' type option, not 'module'.

C Deno Web Workers cannot use async/await because they run synchronously.

D Deno Web Workers share the same global state as the main thread for faster communication.

💡 Hint

Think about how modern JavaScript modules work in workers.

Deno Web Workers run in separate threads and support ES modules with 'type: module'. They do not share global state and support async/await.

Practice

1. What is the main purpose of using Web Workers in Deno?

easy

A. To create a new HTTP server

B. To run tasks in parallel without blocking the main thread

C. To manage file system permissions

D. To handle database connections

Solution

1. Step 1: Understand Web Workers role

   Web Workers allow running scripts in background threads separate from the main thread.

2. Step 2: Identify the benefit

   This prevents the main thread from freezing during heavy tasks, enabling parallel processing.

3. Final Answer:

   To run tasks in parallel without blocking the main thread -> Option B

4. Quick Check:

   Web Workers = Parallel tasks without blocking [OK]

Hint: Web Workers run code in background threads [OK]

Common Mistakes:

• Thinking Web Workers handle HTTP or database tasks directly
• Confusing Web Workers with main thread code
• Assuming Web Workers manage permissions

2. Which of the following is the correct way to send a message from the main thread to a Web Worker in Deno?

easy

A. worker.postMessage('Hello')

B. worker.emit('Hello')

C. worker.send('Hello')

D. worker.message('Hello')

Solution

1. Step 1: Recall message sending method

   In Web Workers, the method to send data to the worker is postMessage.

2. Step 2: Match correct syntax

   Among the options, only worker.postMessage('Hello') is valid and recognized.

3. Final Answer:

   worker.postMessage('Hello') -> Option A

4. Quick Check:

   Send message = postMessage [OK]

Hint: Use postMessage to send data to workers [OK]

Common Mistakes:

• Using send() instead of postMessage()
• Confusing emit() with event emitters
• Trying to call message() which doesn't exist

3. Consider this Deno Web Worker code snippet:

const worker = new Worker(new URL('./worker.ts', import.meta.url).href, { type: 'module' });
worker.onmessage = (e) => console.log('Result:', e.data);
worker.postMessage(5);

And the worker.ts contains:

self.onmessage = (e) => {
  const num = e.data;
  self.postMessage(num * 2);
};

What will be printed in the console?

medium

A. Result: 10

B. Result: 5

C. Result: undefined

D. No output, error occurs

Solution

1. Step 1: Understand message flow

   The main thread sends 5 to the worker. The worker receives it as num.

2. Step 2: Calculate worker response

   The worker multiplies 5 by 2 and sends back 10. The main thread logs 'Result: 10'.

3. Final Answer:

   Result: 10 -> Option A

4. Quick Check:

   5 * 2 = 10 output [OK]

Hint: Worker doubles input and sends back result [OK]

Common Mistakes:

• Assuming worker returns original number
• Confusing onmessage event usage
• Expecting error due to URL usage

4. What is wrong with this Deno Web Worker code snippet?

const worker = new Worker('./worker.ts', { type: 'module' });
worker.postMessage('start');
worker.onmessage = (e) => console.log(e.data);
worker.terminate();

medium

A. Worker path './worker.ts' is invalid in Deno

B. postMessage is called before onmessage, causing error

C. Worker is terminated immediately, so no message is received

D. Missing event listener for error events

Solution

1. Step 1: Analyze termination timing

   The worker is terminated right after sending the message, likely before it can respond.

2. Step 2: Effect on message reception

   Because of immediate termination, the onmessage handler never receives data.

3. Final Answer:

   Worker is terminated immediately, so no message is received -> Option C

4. Quick Check:

   Terminate too soon = no response [OK]

Hint: Terminate workers only after receiving messages [OK]

Common Mistakes:

• Thinking postMessage order causes error
• Ignoring worker path resolution rules
• Forgetting to handle errors but not critical here

5. You want to process a large array of numbers in parallel using Deno Web Workers. Which approach correctly splits the work and collects results efficiently?

hard

A. Process the array in the main thread without workers for simplicity

B. Create one worker and send the entire array repeatedly for each number

C. Use a single worker and process numbers sequentially inside it

D. Create multiple workers, send each a slice of the array, collect partial results, then combine them

Solution

1. Step 1: Understand parallel processing strategy

   Splitting the array into parts and assigning each to a separate worker allows true parallelism.

2. Step 2: Collect and combine results

   Each worker returns partial results; the main thread combines them for the final output.

3. Final Answer:

   Create multiple workers, send each a slice of the array, collect partial results, then combine them -> Option D

4. Quick Check:

   Split work + combine results = efficient parallelism [OK]

Hint: Split data among workers, then merge results [OK]

Common Mistakes:

• Sending full array multiple times wastes resources
• Using one worker loses parallel benefit
• Ignoring main thread processing slows app