Promise에도 동기인 부분은 있다.
많은 사람들이 착각하는 것은 다음과 같은 코드가 있을 때 setTimeout이 보이면 냅다 비동기라고 생각하는 것인데 사실, 저 부분은 동기이다.
그래서 결과가 저렇게 나옴
파란색으로 칠해진 저 부분은 동기로 처리되기 때문에
"제일 먼저"라는 글이 나가는 것
정리하자면, Promise 부분이 한 번 실행된 후에
const p라는 변수에 promise값이 대입되는 것
setTimeout은 딴짓보다 위에 있지만 비동기 함수기 때문에 동기 함수인 딴짓이 먼저 나간 후 처리되는 것
예
예를 들어,
let a = 1;
setTimeout( () => {
a += 1;
}, 0)
console.log(a)
라는 코드가 있더라도
a값은 여전히 1이 나옴
(0이더라도 0.004초 정도의 시간이 걸림 -> 그 이유는 매크로 큐 다녀오느라)
setTimeout, console 두 가지 모두 콜 스택에 들어가지만
setTimeout은 web API에 의해 매크로 큐에 들렸다와야하는 상황이고
console.log는 그대로 콜 스택에 남아있으니 출력을 먼저함많은 사람들이 묻는 것
그러면 나는 Promise안에 것들을 호출한 적이 없는데 왜 실행 되는 거임요?
그냥 new Promise할 때 알아서 한 번 호출됨
실행순서 정리
'제일 먼저' -> setTimeOut은 콜스택에 쌓이고 -> "딴짓' -> a값 5변경 (setTimeout) -> p.then
Promise는 마이크로 큐에 들어가는데
호출 스택 (call stack)이 안 비어져 있으니까 마이크로 큐에서 호출 스택으로 들어갈 수가 없음 다 비어 있을 때 옮겨간 후
호출스택, 큐, 백그라운드 모두가 비어져있을 때가 진정한 실행 끝 (setInterval은 clear하지 않으면 백그라운드에서 절대 사라지지않음)
async/await을 Promise로 바꾸기
우선 catch는 맨 마지막에만 쓰이는 것이 아닌 중간중간 들어가서 실행됐던 then을 처리해줄 수 있음
이렇게 처리되는 것을 몰랐다는 것은 promise를 async로 바꾸지 못했다는 증거
이렇게 return을 통해 다음 then에 값을 전달할 수 있는데
그렇다면 아무 것도 return하지 않으면 그 다음애는?
당연히 undefined (아무것도 안 줬으니까, return이 없으면 undefined)
만약 이렇게 promise.resolve(1)값이 넘어가면 저 함수가 넘어가는 것이 아닌 1이라는 값이 넘어감
async를 promise로 바꾸기
async를 promise로 바꾸려면 우선 항상 await이 기준
await을 then이라고 생각하기
우선 await의 갯수따라 3개 만들어주고
처음 시작부가 Promise.resolve(1)로 시작하는 이유는 처음 a의 값인 1을 전달하기 위해 프로미스화를 시켜야 then이 붙음
그러면 a가 1이 됨
다음 await을 만나기 전까지를 바로 전달
그래서 null이 갈 거고 두 번쨰 await은 대입 값이 없으므로 그냥 값만을 전달한 후 b에 넣어주면 됨
한 가지 단점
만약 a+b란 값이 필요한데
then으로 받다보면 스코프에 의해 a를 사용할 수 없어짐
그럴 땐 원래 배열로 전달해서 사용을 해야함
많은 사람들의 착각
많은 사람들이 이런 코드를 보면 async는 중괄호가 끝날 때 끝난다고 생각하지만 동기 부분은 사실 첫번째 await을 만나기 직전에 끝남
async를 굳이 promise로 바꿀 필요는 없지만, promise로 바꿔 생각해야 비동기의 분석이 쉬움
*promise는 resolve된 값이 넘어간다는 걸 잊지 말기
결론 및 핵심
가장 중요한 핵심 ★ 은 async라고 해서 "동기 부분이 미존재" 하는 것이 아니다. await을 만나기 전엔 동기부분이기 때문에
이런 코드가 있을 때 다음과 같은 결과가 나오는 것
1, 2, 3 까지 찍히고 await을 만났기에 그 다음 await부터 진행되는 것.
결론적으로 Promise라고, async라고 무조건 비동기가 아니라 동기부분이 코드에 존재한다는 것
