JavaScript 오답노트 : 1. async - await

JavaScript의 async/await 구문을 사용하면 비동기적으로 작업을 처리할 수 있습니다. await 키워드를 사용하면 JavaScript 엔진은 해당 프로미스가 완료될 때까지 기다립니다. 하지만 이것은 JavaScript의 전체 실행을 차단하는 것이 아니라, 오직 await를 사용하는 특정 함수의 실행만을 일시 중지합니다.

JavaScript는 싱글 스레드 기반의 언어이지만, 이벤트 루프와 비동기 프로그래밍 모델 덕분에 비동기 작업을 효율적으로 처리할 수 있습니다. await를 사용하면 비동기 작업을 동기적으로 작성할 수 있어 코드의 가독성이 향상됩니다.

예를 들어, 다음과 같은 코드를 살펴보겠습니다:

async function fetchData() {
  console.log('Fetching data...');
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();
  console.log('Data fetched:', json);
}

console.log('Before fetchData');
fetchData();
console.log('After fetchData');

위 코드에서 fetchData 함수 내의 await 키워드는 fetch 함수와 data.json() 함수가 완료될 때까지 기다립니다. 그러나 이 동안 JavaScript 엔진은 다른 코드를 계속 실행할 수 있습니다. 따라서 위 예제의 출력은 다음과 같이 될 것입니다:

Before fetchData
Fetching data...
After fetchData
Data fetched: { ...데이터... }

fetchData 함수 내에서 await를 사용하더라도, Before fetchData와 After fetchData 로그는 즉시 출력됩니다. 이는 JavaScript 엔진이 await 동안 다른 코드의 실행을 계속할 수 있기 때문입니다. 이로 인해 리소스 낭비가 발생하지 않으며, 비동기 작업을 효율적으로 처리할 수 있습니다.

다음은 async 함수 두 개와 동기 함수 한 개가 있는 코드 예시입니다. 이 예시를 통해 async/await를 사용하더라도 JavaScript가 여전히 비동기적으로 작동하며 다른 코드의 실행을 차단하지 않음을 보여드리겠습니다.

async function asyncFunction1() {
  console.log('asyncFunction1: 시작');
  await new Promise(resolve => setTimeout(resolve, 2000)); // 2초 동안 대기
  console.log('asyncFunction1: 완료');
}

async function asyncFunction2() {
  console.log('asyncFunction2: 시작');
  await new Promise(resolve => setTimeout(resolve, 1000)); // 1초 동안 대기
  console.log('asyncFunction2: 완료');
}

function syncFunction() {
  console.log('syncFunction: 시작');
  for (let i = 0; i < 1000000000; i++) {} // 시간이 걸리는 동기 작업 시뮬레이션
  console.log('syncFunction: 완료');
}

console.log('전체 작업 시작');
asyncFunction1();
asyncFunction2();
syncFunction();
console.log('전체 작업 완료');

위 코드를 실행하면 다음과 같은 출력을 볼 수 있습니다:

전체 작업 시작
asyncFunction1: 시작
asyncFunction2: 시작
syncFunction: 시작
syncFunction: 완료
asyncFunction2: 완료
asyncFunction1: 완료
전체 작업 완료

여기서 주목할 점은 asyncFunction1과 asyncFunction2가 비동기 함수임에도 불구하고, syncFunction (동기 함수)이 실행되기 전에 시작된다는 것입니다. 그리고 asyncFunction1과 asyncFunction2는 await로 인해 일시 중지되었다가 syncFunction이 완료된 후에 다시 실행됩니다.

이 예시는 async/await를 사용하더라도 JavaScript 엔진이 다른 작업을 차단하지 않고 효율적으로 코드를 실행할 수 있음을 보여줍니다. 비동기 함수 내에서 await를 사용하면 해당 함수의 실행만 일시 중지되며, JavaScript 엔진은 다른 코드의 실행을 계속 진행할 수 있습니다. 이로 인해 리소스 낭비가 최소화되고, 애플리케이션의 성능이 향상됩니다.