JavaScript 요약정리 - CallBack함수2(promise, then, async, await)

안녕하세요

https://blog.naver.com/sysysy0302 여니입니다 :)

 

 

비동기식은 자신의 함수 시간의 흐름에 따라 작동을 하기 때문에 함수 각자의 실행시간을 갖습니다.
굉장히 복잡해보이지만 비동기식 처리가 실행시간이 단축됩니다. 

 

 

동기식과 비동기식의 차이점을 그림을 통해서 살펴보겠습니다.
- 동기식은 Process A에서 하나의 명령이 끝나면, Process B에서 새로운 명령이 시작되고 그 새로운 명령이 끝날 때까지 기다렸다가 Process A로 돌아옵니다. (즉, 실행 후 아무것도 할 수 없게 실행이 완료되기까지 기다려야합니다.)

- 비동기식은 Process A에서 명령이 실행되고 명령이 실행될 때 일단 예약을 해놓은 상태이고, Process B에서 명령이 실행되어 끝나서 다시 Process A로 갈 때 서로가 합의를 하여 실행되는 것입니다. (즉, 실행 후 다른 일을 하고 있다가 통신이 끝났을 때 콜백이 호출되면서 필요한 작업들을 나중에 실행하게 됩니다.)

 

---

 

우측의 코드는 콜백지옥에서 벗어난 promise가 적용된 코드로 결과값은 똑같다.
하지만 여기서 멈추기엔 너무 코드가 여전히 지저분하고 만족스럽지 못해서 더 개편된 코드가 있다.

 

바로 await 코드인데, await가 붙어있는 promise를 리턴하는 함수는 반드시 다른 함수 안에서 실행되어야합니다.
그리고 그 함수는 async와 함께 붙어서 실행되어야 하는 제약조건이 있습니다.
이렇게 왼쪽과 오른쪽은 같은 값을 출력하게 되는 식이 완성되었습니다.

 

---

 

맨 처음 실행하게되면 start를 출력하고 난 뒤, timer함수는 비동기식이기 때문에 자신의 함수를 실행하고 예약된 상태입니다. 그리고 바로 end가 실행되었기 때문에 위와 같은 출력을 볼 수 있습니다.

 

그렇다면 end를 가장 마지막에 출력하고 싶다면 어떻게 해야할까요?
end가 적힌 콘솔 코드를 마지막 then함수 뒤로 옮겨줍니다.

 

---

 

코드를 좀 더 깔끔하게 await코드를 붙여서 만들어보고 실행해보면 async 함수가 아니라 실행되지 않는 오류를 볼 수 있습니다.

 

물론 그냥 function 함수로 묶어주어도 똑같은 에러가 납니다. async를 붙이지 않았기 때문이죠.

 

async 함수 앞에 붙여준 후 실행해보면 오류없이 정상적으로 작동하는 것을 볼 수 있습니다.

 

.

.

.

 

그럼, async 함수가 동기식 함수인지 비동기식 함수인지 알아보기 위해 좀 더 살펴볼까요?

콘솔창에 출력된 parent start와 parent end가 먼저 나온 뒤에 time 출력된 것을 보니, async 함수는 비동기적 함수였던 것입니다.

 

async 함수로 다시 한 번 묶어주면 parent end가 마지막에 출력되는 것을 확인할 수 있습니다.

 

+

async가 되면 함수는 자동으로 promise값을 가지기 때문에 async를 쓸 수 없을 때 위와 같이 코드를 적을 수 있습니다.

 

+

만약 리턴값으로 time을 준다면, 리턴값에 3000이 들어가 있고 그 리턴값이 var time에서 time의 값이 되었고, 
그 값이 바로 아래 코드의 console.log( 'time' + time);에 time이 되어 출력되게 됩니다.

 

정말.... 다 보면서 몇번을 돌려보면서 이해하는데 어려움이 좀 있었네요 ㅠㅠㅠ
자바스크립트에서 프로젝트하면서 간단하게 작성하던 콜백함수 만만하게 보다가 큰일나기 딱 좋습니다 ㅠㅠ

 

(출처: 생활코딩)