원본글 : Difference Between Promise and Async/Await
이걸 읽고나면, 넌 아마 execution context 에서 promise와 async/await 의 차이를 알게 될거야!
😝 ExecutionContext? (실행 컨텍스트)
쉽게말해 코드들이 실행되기 위한 환경입니다.
자바스크립트는 동일한 환경에 있는 ExecutionContext를 CallStack (stack ⇒ 순서를보장 FILO) 에 쌓아올린 후 실행하여 환경과 순서를 보장합니다.
자바스크립트 코드를 실행하는 순간 전역 컨텍스트가 콜스택에 담깁니다.
여기서 outerEnvironmentReference 라는 개념이 나오는데 현재 호출된 함수가 선언될 당시의 LexicalEnvironment를 참조하는 것입니다.
그 밖에 실행 컨텍스트 내부엔 variable environment, lexical environment, this binding이 있습니다.
variable : 초기상태
lexival : 최신상태 를 저장하고있습니다.
자바스크립트에서 promise 와 aysnc/await 는 비동기명령의 두가지 방법입니다. 그들은 매우 연관되어 있습니다.
Promise
Promise는 결국에 비동기동작을 완료 또는 실패로 이끌어내는 하나의 객체입니다.
- 3가지 상태: pending, fulfilled, rejected
비동기 동작이 완료되었을때,
- fulfilled + value
- rejected + error
Async/Await
async/await 은 promise의 syntax sugar
이것은 좀 더 간결한 비동기 코드를 쓰도록 해줍니다. 마치 동기코드처럼 쓸 수 있습니다.
이것은 promise 를 알게모르게 사용하고 있습니다. (use under the hood!!)
aysnc 는 비동기 함수를 선언하기 위해 사용하고, await 는 promise의 resolved를 기다리기 위해 사용합니다.
await 키워드는 오직 async function 안에서만 쓸 수 있습니다.
그래서 차이점은?
유일한 차이점은 execution context 입니다.
promise 가 생성될때 그리고 비동기 동작이 시작되어지면, 코드는 계속 동기적으로 실행됩니다. 만약에 resoleved 또는 rejected 되면 callback 이 microtask queue 에 더해집니다. microtask queue는 **현재 작업이 완료된 후 다음 작업이 작업 대기열에서 처리되기 전에 처리됩니다. 이것은 Promise 생성을 따르는 모든 코드가 Promise에 연결된 콜백 함수가 실행되기 전에 실행된다는 것을 의미합니다. 반면에 Async/Await에서는 await 키워드로 인해 JavaScript 엔진이 Promise가 해결되거나 거부될 때까지 비동기 함수의 실행을 일시 중지합니다. 비동기 함수는 Promise가 해결되기를 기다리는 동안 호출 스택을 차단하지 않으며 다른 모든 동기 코드를 실행할 수 있습니다. Promise가 해결되면 비동기 함수의 실행이 재개되고 Promise의 결과가 반환됩니다.** 거부되면 오류 값이 발생합니다.
☺️ 쉽게말해, async/await 의 사용은 해당 함수가 pause 된 채로 micro task queue 에 이도되고, 콜스택이 비길 기다렸다가 micro task queue 에서 실행됩니다. 즉, async내에서 await끼리의 순서는 보장이 됩니다.
async 내에서 await을 만나면 pause된 상태로 micro task queue로 이동되어 지고 실행되고
await을 또 만나면 다시 pause된 상태로 micro task queue로 이동되어지면서 실행 되기 때문입니다.
