TIL 22 JavsScript -async/await

async

async는 function 앞에 위치한다. function 앞에 즉, 함수 앞에 async가 있으면 그 함수가 반환하는 값은 프로미스 객체를 반환한다. 프로미스가 아닌 값을 반환하더라도 이행 상태의 프로미스(resolved promise)로 값을 감싸 이행(fulfiled)된 프로미스가 반환되도록 한다.

async function p() {
	return ‘promiseObject’;
}

p.then(promise)

명시적으로 프로미스를 반환하면 아래와 같은 형태이다.

async function p() {
	return Promise.resolve(1);
}

p.then(promise)

간단하게 async가 함수 앞에 있으면 무조건 리턴되는 값은 프로미스 객체이다.

await

awiat는 async 안에서만 작동한다.await는 영어 뜻 그대로 기다리라는 뜻으로 await 프로미스가 처리될 때 까지 다음 task가 실행되지 않는다.

또한 await는 일반함수에서 실행하면 에러가 난다. 그 이유는 앞서 언급했듯이 async 안에서만 작동하기 때문이다.

function p() {
  let promise = Promise.resolve(1);
  let result = await promise; // Syntax error
}

Promise VS async/await

Promise와 asyns/await를 사용하여 비동기 처리 방식을 구현할 수 있다. 두 방법 모두 목적은 같지만 어떠한 방법이 더 좋을 지에 대한 고민을 해봤다. 개인적으로는 당연히 async/await 방식을 더 선호한다. 이유는 아래의 예시를 보면 될 것 같다.

function p(ms) {
  return new Promise(resolve, reject) => {
	setTimeout(() => {
	  resolve(ms);
    }, ms)
  };
}

// Promise 방식
p(1000)
  .then(() => p(1000))
  .then(() => p(1000))
  .then(() => {
  console.log(‘3000 ms 후에 실행’);
});


// async/await 방식
(async function main(){
  await p(1000);
  await p(1000);
  await p(1000);
  console.log(‘3000 ms 후에 실행’);
})();

같은 값을 reslove하는 코드 이다. 하지만 명시적으로 보기에 .then을 계속하여 사용하면 코드가 위에서 아래로 향하지 않고 함수안에 함수, 또 그 함수 안에 함수가 작동되는 것처럼 보인다.

하지만 보통 코딩을 처음 접했을 때 모든 코드는 위에서 아래로 실행된다고 배운다. 그리고 개인적으로도 위에서 아래로 내려오는 것이 더 명시적이지, 함수 안에 함수가 있고 또 그 함수 안에 함수가 있는 콜백지옥과 같은 방식은 일반적으로 사람들이 좋아하지 않는 방식이라고 생각한다.

그래서 두 방식 모두 비동기 처리 방식을 구현하기 위한 방법이지만 가독성이나, 명시적인 성격을 생각한다면 async/await를 사용하는 것이 좋다고 생각한다.