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.