Sequential vs parallel execution in Javascript - Hands-On Comparison

Sequential vs Parallel Execution in JavaScript

📖 Scenario: Imagine you are cooking breakfast. You can either cook each item one after another (sequentially) or cook some items at the same time (in parallel) to save time.

🎯 Goal: You will write JavaScript code to see how sequential and parallel execution works using simple timers. You will create two functions: one that runs tasks one after another, and one that runs tasks at the same time.

📋 What You'll Learn

Create an array of tasks with names and durations

Create a function to run tasks sequentially using async/await

Create a function to run tasks in parallel using Promise.all

Print the order and timing of task completions

💡 Why This Matters

🌍 Real World

Understanding sequential and parallel execution helps you write faster and more efficient programs, like loading images or data on websites.

💼 Career

Many programming jobs require knowledge of asynchronous code and how to manage tasks that take time, such as network requests or file operations.

1

Create the tasks array

Create an array called tasks with these exact objects: {name: 'Toast', duration: 1000}, {name: 'Eggs', duration: 2000}, and {name: 'Coffee', duration: 1500}.

Javascript

// Create the tasks array with the given objects
// Your code here

Need a hint?

Use const tasks = [ ... ] with objects inside curly braces.

2

Create a helper function to simulate a task

Create an async function called runTask that takes a task object and returns a Promise that resolves after task.duration milliseconds with the message `Finished ${task.name}`.

Javascript

const tasks = [
  {name: 'Toast', duration: 1000},
  {name: 'Eggs', duration: 2000},
  {name: 'Coffee', duration: 1500}
];

// Create async function runTask(task) that returns a Promise resolving after task.duration
// Your code here

Need a hint?

Use setTimeout inside a Promise to wait for task.duration milliseconds.

3

Create a function to run tasks sequentially

Create an async function called runSequential that loops over tasks using for (const task of tasks), awaits runTask(task), and logs the result with console.log.

Javascript

const tasks = [
  {name: 'Toast', duration: 1000},
  {name: 'Eggs', duration: 2000},
  {name: 'Coffee', duration: 1500}
];

async function runTask(task) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(`Finished ${task.name}`);
    }, task.duration);
  });
}

// Create async function runSequential() that loops over tasks and logs each finished message
// Your code here

Need a hint?

Use a for...of loop and await inside the loop to run tasks one by one.

4

Run tasks sequentially and in parallel, then print results

Add code to call runSequential() and wait for it to finish. Then create an async function runParallel that uses Promise.all on tasks.map(task => runTask(task)) and logs each result. Finally, call runParallel().

Javascript

const tasks = [
  {name: 'Toast', duration: 1000},
  {name: 'Eggs', duration: 2000},
  {name: 'Coffee', duration: 1500}
];

async function runTask(task) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(`Finished ${task.name}`);
    }, task.duration);
  });
}

async function runSequential() {
  for (const task of tasks) {
    const result = await runTask(task);
    console.log(result);
  }
}

// Call runSequential(), then create async function runParallel() using Promise.all and log results
// Call runParallel() after
// Your code here

Need a hint?

Use an async IIFE to run runSequential() then runParallel(). Use Promise.all with tasks.map for parallel execution.