1. 틀린코드 고치기
1.1 왜 틀렸지?
챕터 4에서 틀린 코드를 가져와보자.
undefined 만 출력됐다는 것은 await 빵만들기() 등에서 아무런 데이터를 가져오지 못했다는 것이다.
하지만 우리는 호출스택과 이벤트루프, 큐들을 배우면서 왜 잘못됐는지 알 수 있게 됐다.
위의 코드는 그림으로 표현하면 양이 길어질거 같으니 조금 줄여보자.
웹툰이라는 변수를 출력하면 위의 햄버거 제작 코드와 똑같이 undefined 다.
어떤 식으로 위의 코드가 실행되는지 그림으로 살펴보자.
- 먼저 웹툰가져오기를 실행한다.
- 웹툰가져오기에서 랜덤웹툰을 실행한다.
- 랜덤웹툰의 setTimeout 실행한다.
- setTimeout이 브라우저로 이동되어 실행된다.
- 그런데 랜덤웹툰에서 setTimeout 다음 줄을 실행시키려 했는데 아무런 코드도 존재하지 않는다. 그래서 그대로 랜덤웹툰 함수가 종료되어 setTimeout의 종료 여부와 관계없이 곧바로 const 웹툰에 undefined 가 할당된다.
이 코드는 setTimeout에 0초를 전달해줬지만 2초, 3초를 전달해도 setTimeout 아래에 다른 코드가 없기때문에 곧바로 함수가 종료되며 const 웹툰에 undefined가 할당된다.
그리고 위의 코드에서 보면 setTimeout 에 return 을 전달했는데, 이 return 은 setTimeout 에 전달한 콜백함수의 return이기에, 애초에 이 함수에는 return 값도 존재하지 않는다. 내가 초보일 때 한 번 헷갈렸던 부분이었다 ㅠㅠ
애초에 return 값은 없지만 이런식으로 코드가 흘러가 undefined를 반환하게 된다.
맨 위의 햄버거 제작 코드를 보면 똑같이 setTimeout 이후 아무런 코드가 없어 그대로 함수가 종료되며 undefined가 반환되는 것을 알 수 있다.
-
우리가 이전 포스트에서 await, async가 어떻게 마이크로태스크큐에 담기는지 얘기하지 않았는데,
이전에 이미 공부했지만 위의 코드의 const 웹툰 = await 랜덤웹툰();에서 await 을 달고 실행할 수 있는 함수는 Promise를 반환해야한다. 그래서 반환값이 return new Promise 이거나, 함수가 async function 이어야한다.
그래서 위의 코드에서 랜덤웹툰(); 은 프로미스를 반환하고 실행할 때 await을 달았기때문에 이 프로미스의 상태가 rejected 이거나 fulfilled 로 변하는 순간에 해당 await 랜덤웹툰() 을 담고있는 함수를 마이크로태스크큐에 적재한다.
.즉, await 랜덤웹툰을 담고 있는 웹툰가져오기 함수를 마이크로태스크큐에 적재한다.
그리고 5번에서 undefined를 반환하며 fulfilled 로 프로미스 상태가 바뀌었고, 웹툰가져오기가 마이크로태스크큐에 적재되며, 웹툰가져오기 아래의 console.log("외모지상주의")를 실행하게 된다.
- 나머지는 우리가 이전에 공부했던 것 처럼, 마이크로태스크큐의 웹툰가져오기()가 실행되어, console.log(웹툰)이 먼저 실행되며, setTiemout의 console.log("신의 탑") 이 실행되고 마지막으로 return "화산귀환이" 실행되며 종료된다.
1.2 어떻게 고칠까?
내가 아는 방법은 2가지인데 이외에도 방법이 있을 때 알려주시면 매우 감사합니다 (_ _)
다시 맨 위의 햄버거 만드는 코드를 고쳐보자.
맨 위의 코드와 비교해서 빵만들기 함수와 패티만들기 함수 2개가 바뀐 것을 알 수 있다. 양상추만들기는 그대로 두었다.
내가 아는 방법 2가지 중 하나를 빵만들기 함수에 적용했고 나머지 하나를 패티만들기에 적용했다.
빵만들기와 패티만들기가 어떻게 제대로 된 값을 반환했는지는 이전까지 배운 모든 것을 조합한다면 알 수 있을 것 같다.
