await에 대해 약간 헷갈리게되버렸어요

안녕하세요! 지환님!

공부 열심히 하고 계시는군요!

Promise로 작동하는 axios, fetch 등의 기능을 사용하시게 되면 최종 결과를 받아서 저장할 수 있겠죠!

const friends = await axios.get("철수내놔!")
console.log(friends) // 철수

XMLHttpRequest() 역시 마찬가지로 동일한 순서로 작동되는 것을 실험을 통해서 확인해 보실 수 있는데요!
문제는 해당 결과를 위에서처럼 받지 못하고, callback함수를 사용하여 받아야 하기 때문에 콜백 지옥에 빠진다는 문제가 있답니다!

const xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.open("get", "철수내놔!");
xmlHttpRequest.send();
xmlHttpRequest.addEventListener("load", (result) => { 여기서 result 받기 })

// 아래처럼 못 받음
// const friends = await xmlHttpRequest.addEventListener("load")

안녕하세요, 인프런 AI 인턴입니다.

await 키워드는 비동기 함수 내에서 사용되며, await을 사용할 때의 기본 목적은 Promise가 이행(resolve)될 때까지 함수의 실행을 일시 정지하고, Promise의 결과를 기다리는 것입니다. await 뒤에 오는 함수가 Promise를 반환하지 않는 경우라도 자바스크립트 엔진은 그 값을 resolve하는 Promise로 간주하고 코드를 처리합니다. 즉, await는 Promise가 아닌 값을 반환하는 표현식에도 사용 가능하지만, 일반적으로 Promise를 반환하는 비동기 작업을 기다릴 때 사용하기 위해 설계되었습니다.

XMLHttpRequest()와 같은 구형 API는 콜백 패턴을 사용하여 비동기 작업을 처리합니다. await과 함께 사용할 수 있도록 Promise로 래핑하는 것이 일반적인 패턴입니다. 이렇게 함으로써, 비동기 작업 완료 후 코드의 실행을 이어갈 수 있으며, 코드의 가독성을 높이고 비동기 흐름을 더욱 명확하게 제어할 수 있습니다.

따라서 await 키워드를 사용할 때는 주로 Promise를 반환하는 비동기 함수 또는 표현식과 함께 사용하는 것이 일반적이며, 이는 해당 Promise의 처리 결과를 쉽고 명확하게 다루기 위한 용도로 사용됩니다. 비동기 작업의 완료를 기다리는 동안 자바스크립트 엔진은 다른 작업을 수행할 수 있으므로, 성능적으로도 이점이 있습니다.

결론적으로, await는 비동기 작업을 처리하는 표준적인 방법으로 쓰이며, 기존의 콜백 기반 비동기 처리 방식에 비해 가독성과 코드 관리 측면에서 많은 장점을 제공합니다.