Async/Await와 Promise의 차이

JavaScript에서 async/await와 Promise는 비동기 프로그래밍 패턴으로 모두 사용됩니다. 각각의 특성과 차이점은 다음과 같습니다:

Promise

• Promise는 비동기 연산이 완료되거나 실패할 때 값을 나타내는 객체입니다.
• Promise는 then, catch, finally와 같은 메서드를 사용해 연속적인 연산을 수행합니다.
• Promise 체인은 중첩이 되기 쉽고, 복잡한 구조의 비동기 로직을 만드는 경우 가독성이 떨어질 수 있습니다.

Async/Await

• async/await는 Promise를 더 깔끔하고 동기식 코드처럼 보이게 만드는 구문 설탕(syntactic sugar)입니다.
• async 함수 내에서 await 키워드를 사용하면 Promise가 완료될 때까지 기다립니다.
• try/catch 블록을 사용하여 에러를 잡을 수 있어서 더 직관적인 에러 처리가 가능합니다.
• 코드가 동기적으로 보이기 때문에 가독성이 높고 이해하기 쉽습니다.

비교 예제

Promise 사용 예제

function fetchData() {
  return fetch('url')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));
}

Async/Await 사용 예제

async function fetchData() {
  try {
    const response = await fetch('url');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

정리

• Promise는 then, catch, finally 등을 사용하여 비동기 처리를 수행합니다.
• Async/Await는 Promise를 기반으로 하면서 좀 더 깔끔하고 가독성 높은 코드를 작성할 수 있게 해줍니다.
• 복잡한 비동기 로직의 경우, async/await 구문을 사용하면 코드의 복잡성을 줄일 수 있습니다.

포인트

둘다 비동기처리의 동기적인 움직임을 위해 탄생하였으며 , 콜백지옥에서 벗어난 가독성 있는 코드를 위한 객체이다.

promise를 효율적으로 다루기 위해 탄생한 것이 async/await라고 생각하자.

면접에서 할 대답

promise는 비동기로직을 동기적으로 구성하여 연산의 완료를 기다리기 위해 사용하며,

기존의 콜백지옥에서 벗어나 효율적인 코드를 작성하기 위해 태어난 객체입니다.

그러나 이 역시 로직이 중첩되면 가독성이 떨어지기에 promise를 기반으로 한 async/await가 탄생하였고,

await로 비동기함수의 반환을 기다리고 이에대한 result를 받은 이후 움직이도록 구성된 메서드에

async 함수를 사용하고 있습니다.