ECMAScript 자바스크립트 await Promise async

자바스크립트에서 비동기식 '함수'를 만드는게 가능하다고 생각하는가? 물론 가능하다. 함수를 만든 뒤에, 그 안에 setTimeout으로 실행내용들을 실행해주는 코드를 작성하면 된다. 하지만, 여기서 return 값 같은 것들은 어떻게 해야 될까? 아마 힘들 것이다.

하지만, 이런 점을 더 편하게 바꾸기 위해 ES2017에 새롭게 추가된 async 함수와 각종 기능들을 이용하면 훨씬 편하고 간단하게 만들 수 있다.

그럼, 이런 함수들 / 키워드들을 알아보자.

async 키워드

async 키워드는 '비동기'라는 뜻을 가지고 있다. function 키워드 앞에 붙어서 사용되며, 비동기적 함수임을 알려준다. 실제로 이 키워드를 붙인 함수는 값이 return되기도 전에 다음 코드가 실행되 버리는걸 볼 수 있다.

async function f() {
  console.log('function - Start');
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('function - End');
}
 
f();
console.log("not function");

console.log 사이에 끼어 있는 코드는 1초를 쉬게 해주는 코드다. 여기서는 이게 중요한 것이 아니라 console.log가 어떻게 작동하냐 이다.

이 코드를 작동시키면, 이런 결과를 볼 수 있다.

여기서 주목해야 할 것은 바로 '함수가 다 끝나지 않았는데도' 다음 코드를 실행 했다는 것이다. 이런 식으로 async는 '비동기'임을 알 수 있다.

그리고 이것과 같이 쓰지 않으면 의미가 없는 두 가지가 있다.

Promise 객체

Promise 객체는 await과 꼭 붙어다니는 특별한 객체다. await 키워드가 없으면 사용 자체를 할 수 없다. Promise는 어떤 역할을 하길래 이런 특이한 특성을 가질까?

Promise는 기다리게 만들 근원을 제공한다. 아래에 표시된 사용법을 보면 무슨 소리인지 알게 될 것이다.

new Promise(resolve => { //코드 })

Promise의 인자에 들어가는 함수에는 resolve라는 매개변수가 들어가게 되는데, 이 resolve는 완료됬다, 즉 이제 그만 기다려도 된다 라는 의미로 해석된다. 작업이 완료되면 resolve(반환값)을 호출해 주면 된다. 여기서 반환값은 await와 같이 쓰일때의 반환값이다.

그리고 이런식으로 생성된 근본을 직접 발휘시키는 키워드가 있다.

await 키워드

await은 직접 뭔가를 하는 키워드다. Promise 객체를 기반으로 async 함수를 '멈출' 수 있게 해 준다. 여기서 보면 알겠지만 이 키워드는 async 함수 내에서만 사용이 가능하다.

await Promize객체;

Promize 객체에서 resolve가 될 때 까지 async 함수의 작동을 멈춰둔다. 그리고 Promize의 작동이 끝나면 resolve 함수를 호출할때 넣었던 인자를 반환한다.

async function f() {
  console.log('function - Start');
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('function - End');
}
 
f();
console.log("not function");

위에서도 나왔던 이 코드는, 아주 간단하다.

f라는 async 함수를 만들어 둔다. 함수에는 콘솔에 로그를 남기고, 1초 기다린 후 다시 콘솔에 로그를 남기는 작업이 등록되어 있다. 그리고 f함수를 호출한 뒤 not function이라는 글을 로그에 남긴다.

아까 봤을 때는 어려웠는데, 지금 보니까 생각보다 쉽지 않은가? 그렇게까지 중요한 기능은 아니지만 모르면 고생하는 기능이기에 잘 익혀 두자.