Synchronous vs asynchronous execution in Javascript - When to Use Which

The Big Idea

What if your program could do many things at once without getting stuck waiting?

The Scenario

Imagine you are cooking dinner and you have to wait by the stove doing nothing until the water boils before you can start the next step.

The Problem

Waiting for each task to finish before starting the next one wastes time and makes everything slower. If one step takes a long time, everything else just stops and waits.

The Solution

Asynchronous execution lets you start a task and move on to others without waiting. It's like putting the water to boil and chopping vegetables while you wait, so you use your time better.

Before vs After

✗ Before

const data = fetchData(); console.log(data); // waits until fetchData finishes

✓ After

fetchData().then(data => console.log(data)); console.log('Doing other things while waiting');

What It Enables

It allows programs to handle many tasks at once, making apps faster and more responsive.

Real Life Example

When you click a button on a website, asynchronous code lets the page keep working while it fetches new data from the internet.

Key Takeaways

Synchronous code waits for each step to finish before moving on.

Asynchronous code lets multiple tasks happen at the same time.

This makes programs faster and smoother for users.

Practice

1. Which statement best describes synchronous execution in JavaScript?

easy

A. Tasks run only when the user clicks a button.

B. Tasks run in the background without waiting for others to finish.

C. Tasks run randomly without any order.

D. Tasks run one after another, waiting for each to finish before starting the next.

Solution

1. Step 1: Understand synchronous execution

   Synchronous means tasks happen one by one, each waiting for the previous to finish.

2. Step 2: Match description to options

   Tasks run one after another, waiting for each to finish before starting the next. clearly states tasks run one after another, which matches synchronous behavior.

3. Final Answer:

   Tasks run one after another, waiting for each to finish before starting the next. -> Option D

4. Quick Check:

   Synchronous = sequential task execution [OK]

Hint: Synchronous means wait for each task to finish before next [OK]

Common Mistakes:

• Confusing synchronous with asynchronous execution
• Thinking tasks run at the same time in synchronous
• Believing synchronous tasks run randomly

2. Which of the following is the correct syntax to create a simple asynchronous function in JavaScript?

easy

A. function async myFunction() {}

B. async function myFunction() {}

C. function myFunction async() {}

D. function myFunction() async {}

Solution

1. Step 1: Recall async function syntax

   In JavaScript, the keyword 'async' comes before the function keyword to declare an asynchronous function.

2. Step 2: Check each option

   async function myFunction() {} uses 'async function myFunction() {}' which is correct syntax.

3. Final Answer:

   async function myFunction() {} -> Option B

4. Quick Check:

   Async keyword before function = correct syntax [OK]

Hint: Async keyword goes before function keyword [OK]

Common Mistakes:

• Placing async after function name
• Putting async inside parentheses
• Using invalid order of keywords

3. What will be the output of the following code?

console.log('Start');
setTimeout(() => console.log('Middle'), 0);
console.log('End');

medium

A. Start\nEnd\nMiddle

B. Start\nMiddle\nEnd

C. Middle\nStart\nEnd

D. End\nStart\nMiddle

Solution

1. Step 1: Understand synchronous and asynchronous parts

   'console.log("Start")' runs immediately (synchronous). 'setTimeout' schedules 'Middle' to run later (asynchronous). 'console.log("End")' runs immediately after 'Start'.

2. Step 2: Determine order of output

   Output order is 'Start', then 'End', then 'Middle' because 'setTimeout' callback runs after current code finishes.

3. Final Answer:

   Start End Middle -> Option A

4. Quick Check:

   setTimeout delays callback, so logs after synchronous code [OK]

Hint: setTimeout callback runs after current code finishes [OK]

Common Mistakes:

• Assuming setTimeout runs immediately
• Thinking output order matches code order exactly
• Ignoring asynchronous delay even if zero

4. Identify the error in this code snippet that tries to use asynchronous execution:

function fetchData() {
  let data;
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(json => data = json);
  return data;
}
console.log(fetchData());

medium

A. Syntax error in arrow functions

B. fetch is not a function

C. fetchData returns before data is assigned, so returns undefined

D. Missing async keyword on fetchData

Solution

1. Step 1: Analyze asynchronous fetch behavior

   fetch returns a promise and .then callbacks run later, but fetchData returns immediately before data is set.

2. Step 2: Understand return value timing

   Since data is assigned asynchronously, fetchData returns undefined because data is not ready yet.

3. Final Answer:

   fetchData returns before data is assigned, so returns undefined -> Option C

4. Quick Check:

   Async assignment happens after return, so undefined returned [OK]

Hint: Return happens before async data arrives, so returns undefined [OK]

Common Mistakes:

• Thinking fetchData waits for fetch to finish
• Assuming data is ready immediately
• Confusing syntax errors with logic errors

5. You want to run three tasks: A, B, and C. Task B depends on A finishing, but C can run anytime. Which approach correctly uses asynchronous execution to run tasks efficiently?

hard

A. Run A asynchronously, then run B in A's callback, and run C asynchronously at the same time as A.

B. Run B and C asynchronously first, then run A synchronously after both finish.

C. Run A synchronously, then B synchronously, then C synchronously after both.

D. Run all tasks synchronously one after another.

Solution

1. Step 1: Understand task dependencies

   Task B depends on A finishing, so B must wait for A. Task C can run anytime, so it can run in parallel.

2. Step 2: Choose asynchronous approach respecting dependencies

   Run A asynchronously, then run B in A's callback, and run C asynchronously at the same time as A. runs A asynchronously, then runs B in A's callback (after A finishes), and runs C asynchronously at the same time as A, maximizing efficiency.

3. Final Answer:

   Run A asynchronously, then run B in A's callback, and run C asynchronously at the same time as A. -> Option A

4. Quick Check:

   Respect dependencies and run independent tasks in parallel [OK]

Hint: Run dependent tasks in callbacks, independent tasks in parallel [OK]

Common Mistakes:

• Running dependent tasks in parallel ignoring order
• Running all tasks synchronously wasting time
• Running independent tasks sequentially unnecessarily