[javascript] 자바스크립트 코드 읽기 연습 - 중급 퀴즈3

자바스크립트의 중급 개념을 익히면 비동기 코드와 프로미스(Promise)를 효과적으로 다룰 수 있습니다. 이번에는 async/await과 Promise를 활용한 문제를 준비했습니다. 코드를 분석하고, 문제를 풀어보세요!

---

퀴즈를 위한 코드

function delayedMessage(msg, delay) {
    return new Promise((resolve) => {
        setTimeout(() => resolve(msg), delay);
    });
}

async function showMessages() {
    console.log("Start");
    const msg1 = await delayedMessage("Hello", 1000);
    console.log(msg1);
    const msg2 = await delayedMessage("World", 500);
    console.log(msg2);
    console.log("End");
}

showMessages();

---

퀴즈 문제

1. 위 코드를 실행하면 콘솔에 어떤 출력이 나올까요?
   • a) Start, Hello, World, End
   • b) Start, End, Hello, World
   • c) Start, Hello, End, World
   • d) Hello, World, Start, End
2. await 키워드는 어떤 역할을 하나요?
   • a) 비동기 작업이 끝날 때까지 코드 실행을 일시 정지한다.
   • b) 프로미스를 즉시 해결한다.
   • c) 모든 비동기 작업을 동시에 실행한다.
   • d) 콜백 함수를 자동으로 생성한다.

---

 

 

 

 

 

정답 및 해설

1번 문제 해설 (출력 결과 예상)

// 실행 흐름
console.log("Start");
await delayedMessage("Hello", 1000); // 1초 후 "Hello" 반환
console.log("Hello");
await delayedMessage("World", 500); // 0.5초 후 "World" 반환
console.log("World");
console.log("End");

출력 결과는:

Start
(1초 후)
Hello
(0.5초 후)
World
End

정답: ✅ a) Start, Hello, World, End

2번 문제 해설 (await 키워드의 역할)

• await 키워드는 Promise가 완료될 때까지 코드 실행을 일시 정지하고, 결과 값을 반환합니다.
• 이를 통해 비동기 코드가 동기적으로 실행되는 것처럼 보이도록 만듭니다.

정답: ✅ a) 비동기 작업이 끝날 때까지 코드 실행을 일시 정지한다.

---

 

 

 

 

이 문제를 풀기 위해 필요한 자바스크립트 개념

• Promise와 resolve()
• setTimeout() 함수
• async/await의 동작 방식
• 비동기 코드 실행 흐름

---

끝