Synchronous vs asynchronous execution in Javascript - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to log messages synchronously.

Javascript

console.log('Start');
console.log([1]);
console.log('End');

Drag options to blanks, or click blank then click option'

A'Middle'

BsetTimeout(() => console.log('Middle'), 1000)

CPromise.resolve('Middle')

Dasync function() { console.log('Middle') }

Attempts:

3 left

💡 Hint

Common Mistakes

Using setTimeout or Promise which are asynchronous and delay the message.

The synchronous code logs 'Start', then 'Middle', then 'End' immediately in order.

2fill in blank

medium

Complete the code to log 'Middle' asynchronously after 1 second.

Javascript

console.log('Start');
[1];
console.log('End');

Drag options to blanks, or click blank then click option'

Aasync function log() { console.log('Middle') }

BsetTimeout(() => console.log('Middle'), 1000)

CPromise.resolve().then(() => console.log('Middle'))

Dconsole.log('Middle')

Attempts:

3 left

💡 Hint

Common Mistakes

Using console.log directly which is synchronous.

Using Promise without delay.

setTimeout delays the 'Middle' message by 1 second, making it asynchronous.

3fill in blank

hard

Fix the error in the asynchronous function to log 'Done'.

Javascript

async function task() {
  await [1];
  console.log('Done');
}
task();

Drag options to blanks, or click blank then click option'

Aconsole.log('Done')

BsetTimeout(() => {}, 1000)

CPromise.resolve()

Dnew Promise()

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to await setTimeout which is not a Promise.

Passing console.log inside await.

await expects a Promise. Promise.resolve() returns a resolved Promise immediately.

4fill in blank

hard

Fill both blanks to create a Promise that resolves after 1 second and logs 'Finished'.

Javascript

const wait = () => new Promise(([1], [2]) => {
  setTimeout(resolve, 1000);
});
wait().then(() => console.log('Finished'));

Drag options to blanks, or click blank then click option'

Aresolve

Breject

Cdone

Dfail

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect parameter names that do not match resolve and reject.

Not calling resolve inside setTimeout.

The Promise constructor takes two functions: resolve and reject. We call resolve after 1 second.

5fill in blank

hard

Fill all three blanks to create an async function that waits 2 seconds before logging 'All done!'.

Javascript

function delay(ms) {
  return new Promise(([1], [2]) => {
    setTimeout([3], ms);
  });
}

async function run() {
  await delay(2000);
  console.log('All done!');
}
run();

Drag options to blanks, or click blank then click option'

Aresolve

Breject

Dfail

Attempts:

3 left

💡 Hint

Common Mistakes

Using reject or fail in setTimeout instead of resolve.

Mixing up parameter names.

The Promise constructor uses resolve and reject. setTimeout calls resolve after the delay.

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