【Javascript】非同期処理に慣れるための問題集 #1

初めに

自信で非同期処理を学んでいる際に問題を解くと結構なれる感覚があったのでご共有です。

※今後よりリッチな解説や参考記事も追加していきます
いまは簡単な答えと解説しかないですがご了承ください🙇
（まだ解説のない問題もあります）

Q1. Promiseの基本

console.log("A");

const myPromise = new Promise((resolve) => {
  console.log("B");
  resolve("C");
});

myPromise.then((message) => {
  console.log(message);
});

console.log("D"); 

➡ どの順番で表示される？

答えを見る

A
B
D
C

解説:
・console.log("A"); が実行される
・new Promise() の中の console.log("B"); が実行される
.then() の処理は 非同期（マイクロタスク） なので後回し
console.log("D"); が実行される
.then() の中の console.log("C"); が最後に実行される

Q2. Promiseの非同期実行

console.log("X");

setTimeout(() => console.log("Y"), 0);

const myPromise = new Promise((resolve) => {
  resolve();
});

myPromise.then(() => console.log("Z"));

console.log("W");

➡ どの順番で表示される？

答えを見る

X
W
Z
Y

解説:
・setTimeout は マクロタスク（setTimeout の中の処理は一番最後）
・.then() は マイクロタスク（Z は W の後に実行される）

Q3. async/await の基本

async function myAsyncFunction() {
  console.log("1");
  await Promise.resolve();
  
  console.log("2");
}

console.log("3");
myAsyncFunction();
console.log("4");

➡ どの順番で表示される？

答えを見る

3
1
4
2

解説:
・asyncFunction() の console.log("1") までは同期実行
・await で 非同期処理が発生し、一時停止
・console.log("4") が先に実行され、await の後が最後に実行される

Q4. setTimeout と await の違い

async function test() {
  console.log("Start");

  setTimeout(() => console.log("Timeout"), 0);

  await Promise.resolve();
  // ▲await null; でも可
  console.log("After await");
}

test();
console.log("End");

➡ どの順番で表示される？

答えを見る

Start
End
After await
Timeout

解説:
・setTimeout は マクロタスク なので最後
・await の後の処理 (console.log("After await")) は マイクロタスク なので End の後に実行

Q5. await の使い方

async function test() {
  console.log("Begin");

  await new Promise((resolve) => setTimeout(resolve, 1000));

  console.log("After 1s");
}

console.log("Call test");
test();
console.log("Test called");

➡ どの順番で表示される？

答えを見る

Call test
Begin
Test called
(1秒待つ)
After 1s

Q6. Promise.all を使うと？

function delay(time, message) {
  return new Promise((resolve) => setTimeout(() => resolve(message), time));
}

async function test() {
  console.log("Start");

  const results = await Promise.all([
    delay(1000, "1s"),
    delay(500, "0.5s"),
    delay(1500, "1.5s"),
  ]);

  console.log(results);
}

test();
console.log("End");

➡ どの順番で表示される？

答えを見る

Start
End
(1.5秒後)
["1s", "0.5s", "1.5s"]

Q7. Promise.race の動き

function delay(time, message) {
  return new Promise((resolve) => setTimeout(() => resolve(message), time));
}

async function test() {
  console.log("Start");

  const result = await Promise.race([
    delay(1000, "1s"),
    delay(500, "0.5s"),
    delay(1500, "1.5s"),
  ]);

  console.log(result);
}

test();
console.log("End");

➡ どの順番で表示される？

答えを見る

Start
End
(0.5秒後)
"0.5s"

Q8. try/catch のエラーハンドリング

async function test() {
  try {
    console.log("Before error");
    await Promise.reject("Something went wrong!");
    console.log("After error");
  } catch (error) {
    console.log("Caught:", error);
  }
}

test();
console.log("End");

➡ どの順番で表示される？

答えを見る

Before error
End
Caught: Something went wrong!

Q9. await の順番

async function test() {
  console.log("Start");

  await console.log("Inside await");

  console.log("End");
}

test();
console.log("Outside function");

➡ どの順番で表示される？

答えを見る

Start
Inside await
Outside function
End

Q10. finally の動き

async function test() {
  try {
    console.log("Try block");
    throw new Error("Error occurred");
  } catch (error) {
    console.log("Catch block");
  } finally {
    console.log("Finally block");
  }
}

test();
console.log("End");

➡ どの順番で表示される？

答えを見る

Try block
Catch block
Finally block
End