[js] callback, promise, async & await

1. Js 특징 : 동기처리(Synchronous) ( vs 비동기(Asynchronous))

1) 동기처리 와 비동기 처리

 

Js를 예를 들어 설명해보자.

Js는 싱글 스레드 언어로, 코드가 작성된 순서대로 작업을 처리한다.

console.log("a")
console.log("b")
console.log("c")
//a b c

즉, 이와같이 여러개의 작업이 있을 때 앞의 작업이 끝나길 기다린 후, 뒤를 순서대로 실행하는 방식 을 동기적 방식이라고 하는 것이다. 

그리고 이러한 와중에 다른 작업이 불가능하도록 막는 것을 블로킹 이라고 한다.

 

그리고 이와 반대되는 것이 비동기 처리이다. 

즉, 여러개의 작업을 동시에 실행시키는 것이라고 말할 수 있다. 

 

그렇기에 동기처리는 직렬로, 비동기처리는 병렬로 처리가 일어나는 것이라 생각하면 편하다.

 

Js가 동기처리방식이라고는 했지만, 만약 중간에 setTimeout 처럼 잠깐 기다려야하는 함수가 있을 땐 어떨까? 

이럴 때 Js는 잠깐 기다려야하는 함수를 일단 건너뛰고 밑으로 내려간다. 비동기 처리가 일어나는 것이다. 

콜백을 사용할 때 이러한 방식으로 계속 넘기는건데, 이렇게 계속 넘기면 코드를 이해하기도 힘들고 좀 더럽게 작성이 될 가능성이 높다. (콜백지옥)

 

2. Promise

이를 해결하기 위해 Promise 가 나왔다. Promise 객체는 비동기 작업이 얻게될 미래의 완료 / 실패와 그 결과값을 나타낸다. 

즉, Promise를 사용하면 비동기 메세드에서 마치 동기 메서드처럼 반환을 할 수 있는데, 이 때 반환은 최종 결과를 반환하는 것이 아니라 미래의 어떤 시점에 결과를 제공하겠다는 '약속'을 반환하게 되는 것이다. 

 

이런 Promise는 세 가지의 상태를 가질 수 있다.

1) 대기(Pending) : 이행하지도, 거부하지도 않은 초기 상태

2) 이행(fulfilled) : 연산이 성공적으로 완료됨

3) 거부(rejected) : 연산이 실패함

즉, 어떤 함수가 Promise 객체를 반환한다는 말은 그 함수는 비동기적으로 동작을 하며, 반환한 Promise 객체를 통해 비동기 처리 결과를 then과 catch로 이용할 수 있게 만들겠다는 것이다. 

 

이렇게 Promise를 사용할 수도 있지만, 더 편리한 것이 나왔다.

 

3. Async, Await

Async function  선언은 AsyncFunction 객체를 반환하는 하나의 비동기적 함수를 정의하며,

Async를 붙인 함수는 반환값이 자동으로 Promise 가 된다. 

 

이런 Async 함수에는 awit 식이 포함될 수 있으며, 이 식은 async 함수의 실행을 일시 중지하고 전달된 Promise 의 해결을 기다린 다음, async 함수의 실행을 다시 시작하고 완료 후 값을 반환한다. 

 

여기서 주의할 점은, await 키워드는 async 함수에서만 유효하다는 것! async 함수의 본문 외부에서 사용하면 SytaxError 가 발생한다. 

 

4. 참고

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function

async function - JavaScript | MDN

https://tech-monster.tistory.com/180

[javascript] 동기 & 비동기 / promise, async, await 사용하기

https://www.freecodecamp.org/korean/news/https-www-freecodecamp-org-news-javascript-callback-functions-what-are-callbacks-in-js-and-how-to-use-them/

자바스크립의 콜백 함수 – 자바스크립트에서 콜백 함수가 무엇이고 어떻게 사용하는지 알아