[면접] async/await에 대해 설명해보세요. + promise란

기다려!

0. 개요

async/await는 비동기 코드를 동기적으로 처리할 때 사용하는 방법이라는 것만 알고 있습니다. 주로 api연결을 할 때 많이 사용했는데 구체적으로 공부해 본 적이 없어서 정리하게 되었습니다.

 

1. async 함수

 

• async 키워드를 함수 앞에 붙여 사용합니다. 이 키워드가 붙은 함수는 항상 프로미스를 반환합니다. 함수 내에서 직접 값을 반환하더라도, JavaScript는 그 값을 자동으로 프로미스로 감싸 반환합니다.
• 만약 함수가 프로미스를 반환한다면, 해당 프로미스는 async 함수의 반환값을 그대로 갖게 됩니다.

 

async function f() {
  return 1;
}

f().then(alert); // 1

 

명시적으로 프라미스를 반환하는 것도 가능한데, 결과는 동일합니다.

async function f() {
  return Promise.resolve(1);
}

f().then(alert); // 1

 

2. await 연산자

 

• await 키워드는 async 함수 내에서만 사용할 수 있으며, 프로미스의 실행이 완료될 때까지 함수의 실행을 일시적으로 중지시킵니다. 프로미스가 이행(resolve)되면, 함수 실행이 재개되며, await 표현식은 프로미스의 결과 값으로 평가됩니다.
• await를 사용하면, 프로미스의 완료를 기다리는 동안 함수의 실행이 멈추기 때문에, 비동기 코드를 마치 동기 코드처럼 읽고 쓸 수 있게 됩니다. 이는 코드의 가독성과 유지보수성을 크게 향상시킵니다.

 

async function fetchData() {
  try {
    // API 호출을 통해 데이터를 가져옵니다. fetch() 함수는 프로미스를 반환합니다.
    const response = await fetch('https://api.example.com/data');
    // 응답 본문을 JSON으로 변환합니다. response.json() 역시 프로미스를 반환합니다.
    const data = await response.json();
    console.log(data);
  } catch (error) {
    // 에러가 발생하면 catch 블록이 실행됩니다.
    console.error('데이터를 가져오는 중 에러가 발생했습니다:', error);
  }
}

 

3. Promise란?

Promise는 JavaScript에서 비동기 연산의 최종 완료(또는 실패) 및 그 결과값을 대표하는 객체입니다. 프로미스는 비동기 작업의 처리를 더 쉽고 효율적으로 할 수 있도록 도와줍니다. 프로미스는 세 가지 상태 중 하나를 가집니다:

 

• 대기(Pending): 비동기 처리 로직이 아직 완료되지 않은 상태.
• 이행(Fulfilled): 비동기 처리가 성공적으로 완료되어 프로미스가 결과값을 반환한 상태.
• 거부(Rejected): 비동기 처리가 실패하거나 오류가 발생한 상태.

 

프로미스의 중요한 특징은 비동기 작업을 마치 동기 작업처럼, 즉 순차적으로 처리할 수 있게 해준다는 점입니다. 이는 코드의 복잡성을 줄이고 가독성을 향상시킵니다.

 

Promise 사용

프로미스는 new Promise() 생성자로 생성되며, 이 생성자는 비동기 작업을 수행할 실행 함수를 인자로 받습니다. 이 실행 함수는 다시 두 개의 함수를 인자로 받는데, 이는 resolve와 reject 함수입니다.

 

• resolve(value) 함수는 프로미스를 이행(fulfill) 상태로 변경하고, 결과값 value를 반환합니다.
• reject(error) 함수는 프로미스를 거부(reject) 상태로 변경하고, 오류 error를 반환합니다.

 

condition 변수의 값에 따라 resolve 또는 reject 함수를 호출하여 프로미스의 상태를 변경합니다. .then() 메서드는 프로미스가 이행(fulfill)됐을 때 실행될 콜백 함수를 등록하며, .catch() 메서드는 프로미스가 거부(reject)됐을 때 실행될 콜백 함수를 등록합니다.

 

프로미스는 비동기 코드를 더 쉽게 작성하고 관리할 수 있게 해주며, 콜백 지옥(callback hell)을 피하는 데 도움을 줍니다. 또한, Promise.all() 같은 메서드를 사용하여 여러 비동기 작업을 병렬로 처리하고 그 결과를 취합할 수도 있습니다.

 

const myPromise = new Promise((resolve, reject) => {
  const condition = true;
  
  if (condition) {
    resolve('프로미스가 성공적으로 이행되었습니다.');
  } else {
    reject('프로미스가 실패하였습니다.');
  }
});

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

 

4. 동기(Synchronous)와 비동기(Asynchronous)

aync와 await의 가장 핵심적인 개념 또는 연관 질문으로 나올만한 동기와 비동기에 대해서 알아보겠습니다.

 

동기

동기 방식에서는 작업들이 순차적으로 실행됩니다. 즉, 하나의 작업이 완료된 후에 다음 작업이 시작됩니다.

동기 방식은 예측하기 쉽고 이해하기 쉬운 코드 흐름을 제공하지만, 어떤 작업이 긴 시간을 요구할 경우, 시스템의 전체적인 반응성이 떨어질 수 있습니다.

 

비동기

비동기 방식에서는 작업들이 독립적으로 실행됩니다. 즉, 한 작업이 완료되기를 기다리지 않고, 다음 작업을 바로 시작할 수 있습니다.

비동기 방식은 시스템의 전체적인 반응성을 개선할 수 있지만, 코드의 흐름이 복잡해질 수 있으며, 콜백 지옥(Callback Hell)과 같은 문제를 유발할 수 있습니다.

 

카페 직원이 주문을 받아 커피를 만들 때의 상황을 들어 설명하면

동기적 처리: 주문을 받고 기다렸다가 커피를 다 만들면 다음 주문을 받는다.

비동기적 처리: 한번에 주문을 받고 진동벨이 울리면 손님이 커피를 가져간다.

 

5. 면접 답변

async/await는 JavaScript에서 비동기 코드를 작성하는 방법입니다. async가 붙은 함수는 항상 프로미스를 반환합니다. 이 함수에서 await를 사용하면 비동기 코드를 동기 코드처럼 읽고 쓸 수 있게 해줍니다. 이로인해 코드의 가독성과 유지보수성을 크게 향상시킵니다.