[JavaScript] Callback, Promise, async await

학습목표

자바스크립트의 대표적인 비동기 처리를 해결하기 위해 Callback, Promise, async await 등을 사용하는 것으로 알고 있습니다.

하지만, 콜백 지옥에서 벗어나기 위해 Promise와 async await을 사용한다는 개념이 정확히 무엇인지 알지 못하고 있었습니다.

위의 3가지 기법을 하나씩 살펴보아 각각의 개념과 함께 비동기처리에 대한 이해를 높여보도록 하겠습니다.🔥

 

 

---

 

 

Callback

콜백은 우리가 함수를 작성하면서 한 번쯤은 들어봤을만한 키워드입니다.

콜백이란 함수가 실행이 끝난 뒤에 실행되는 함수를 의미합니다.

쉽게 말해서, 함수에 파라미터로 함수를 포함하여 사용하는 형태를 떠올리면 됩니다.

function Hello(item, callback) {
	console.log("Hello");
	callback(item);
}

Hello('World!', function(v){
	console.log(v);
})

위 코드를 실행하면,

Hello
World!

라는 결과를 얻을 수 있습니다.

 

 

그렇다면, 콜백을 왜 사용할까요? 이유는 매우 간단합니다.

 

자바스크립트의 비동기적 특성에 의해 다음 명령어가 실행되기 전, 다른 이벤트를 실행할 수 있습니다.

즉, 원치 않는 결과를 산출할 수도 있는 것입니다.

예를 들어, 월급을 받은 후 노트북을 결제하고 싶은데 월급을 받기 전 노트북을 결제해야하는 상황을 떠올리면 이해하기 쉽습니다.

 

따라서, 콜백을 사용하면 비동기적인 특성을 동기적으로 사용할 수 있도록 제어가 가능합니다.

하지만, 콜백안에 콜백이 삽입되는 코드가 많아져 흔히 말하는 콜백지옥을 경험할 수 있고, 이는 코드의 가독성과 디버깅을 어렵게 만드는 요인이 될 수 있음을 알아야 합니다.

 

 

---

 

Promise

Promise는 콜백의 단점을 보완하기 위해 ES6 이후 도입된 비동기 처리에 사용되는 객체입니다.

단어 뜻에서 유추할 수 있듯이 어떠한 것을 반환하겠다는 약속을 하는 객체로 이해할 수 있습니다.

 

Promise는 크게 3가지의 상태를 가집니다.

 

1. Pending (대기) : Promise 객체가 생성되고, 이행 혹은 실패 이전까지의 상태
2. Fulfilled (이행) : 처리가 성공하여 결과를 반환한 상태
3. Rejected (실패) : 처리가 실패하여 결과를 반환하지 못한 상태

Promise의 파라미터로 resolve와 reject를 활용할 수 있는데 resolve는 fullfilled 상태가 될 시, reject는 rejected 상태가 될 시에 실행됩니다.

각각 then()과 catch()를 사용하여 실행하고자 하는 코드를 활용할 수 있습니다.

 

다음으로, Promise.all() 이라는 구문을 통해 파라미터로 포함되는 모든 함수가 이행되는 것을 체크할 수 있습니다.

Promise.all([promise1, promise2, promise3]).then().catch()

이와같이 all() 구문 안에 비동기 처리 코드를 삽입하여, 모두가 정상적으로 이행된 후 다음 코드를 실행할 수 있도록 제어할 수 있습니다.\

 

 

---

 

 

async await

async await은 앞서 언급한 비동기 처리 패턴 중 가장 최신의 문법입니다.

가장 많이 언급되는 장점으로는 가독성의 향상과 직관성으로 평가되고 있습니다.

await은 비동기 처리 코드에서 결과값을 뒤에서 사용하기 위해 대기시킨다는 개념으로 이해할 수 있습니다.

쉽게 말해, 비동기 코드 앞에 await 키워드를 붙여 결과 변환을 보장하고 이후 반환값을 사용하는데에 사용한다고 이해할 수 있습니다.

function checkLogin(info) {
  let isLogined = fetchUser(info); // 로그인 결과를 true 또는 false로 반환하는 비동기 코드로 가정 
  if (isLogined === true) {
  	console.log('로그인이 완료되었습니다.');
  } else {
  	console.log('로그인이 실패하였습니다.');
  }
}

(위의 코드는 정상적인 코드 X)

해당 코드의 의도가 정상적으로 로그인이 되면 '로그인이 완료되었습니다' 로그를 반환하는것이라면, 다음과 같이 수정할 수 있습니다.

async function checkLogin(info) {
  let isLogined = await fetchUser(info); // 로그인 결과를 true 또는 false로 반환하는 비동기 코드로 가정
  if (isLogined === true) {
  	console.log('로그인이 완료되었습니다.');
  } else {
  	console.log('로그인이 실패하였습니다.');
  }
}

함수 앞에 async 라는 예약어를 붙이고, Promise 객체를 반환하는 함수에 await을 붙인다는 개념으로 이해할 수 있습니다.

즉, checkLogin() 함수를 실행하면 fetchUser()의 반환값을 받고 나서 로그인 여부를 판단하도록 제어가 가능합니다.

 

async await을 사용시 주의할 점은 await 키워드를 붙인 함수가 Promise 객체를 반환하는 함수라는 조건을 인지해야 합니다.👍

 

async awiat 구문에서는 Promise 객체 반환 후의 코드를 정의할 때 각각 try()와 catch()를 사용할 수 있습니다.

 

 

---

리뷰

• Ajax 및 Web API 학습 필요