There's a special syntax to work with promises in a more comfortable fashion, called "async/await". It's surprisingly easy to understand and use.

'async'와 'await'라는 특별한 문법을 사용하면 프라미스를 좀 더 편하게 사용할 수 있습니다. 'async/await'는 놀라울 정도로 이해하기 쉽고, 사용법도 어렵지 않습니다.

Let's start with the`async` keyword. It can be placed before afunction, like this:

`async` 키워드부터 알아봅시다.`async`는function 앞에 위치합니다.

asyncfunctionf() {

return1;

}

The word "async" before afunctionmeans one simple thing: a function always returns a promise. Other values are wrapped in aresolved promise automatically.

function앞의 단어, 'async'는 해당 함수가 항상 프라미스를 반환한다는 것을 의미합니다. 프라미스가 아닌 값은 이행 상태의 프라미스(resolved promise)가 자동으로 감싸게 됩니다.

For instance, this function returns a resolved promise with theresult of`1`, let's test it:

```js run

asyncfunctionf() {

f().then(alert);// 1

```js run

asyncfunctionf() {

f().then(alert);// 1

So,`async` ensures that the function returns a promise, and wraps non-promises in it. Simple enough, right? But not only that. There's another keyword,`await`, that works only inside`async` functions, and it's pretty cool.

`async`가 붙은 함수는 반드시 프라미스를 반환하고, 프라미스가 아닌 것은 프라미스로 감싸 반환합니다. 굉장히 간단하죠? 그런데`async`가 제공하는 기능은 이뿐만이 아닙니다. 또 다른 키워드`await`는`async` 함수 안에서만 동작합니다.`await`는 아주 멋진 녀석이죠.

let value=await promise;

The keyword`await`makes JavaScript wait until that promise settles and returns its result.

자바스크립트는`await`키워드를 만나면 프라미스가 처리(settled)될 때까지 기다립니다. 결과는 그 이후 반환됩니다.

```js run

asyncfunctionf() {

let promise=newPromise((resolve,reject)=> {

setTimeout(()=>resolve("done!"),1000)

setTimeout(()=>resolve("완료!"),1000)

});

let result=await promise;//wait till the promise resolves (*)

let result=await promise;//프라미스가 이행될 때까지 기다림 (*)

alert(result);// "done!"

alert(result);// "완료!"

}

f();

The function execution "pauses" at the line`(*)` and resumes when the promise settles, with`result`becoming its result. So the code above shows "done!" in one second.

함수 실행은`(*)`로 표시한 줄에서 잠시 '중단'되었다가 프라미스가 처리되면 다시 시작됩니다. 이때 프라미스 객체의`result`값이 변수 result에 할당됩니다. 따라서 위 예시를 실행하면 1초 뒤에 '완료!'가 출력됩니다.

Let's emphasize:`await` literally makes JavaScript wait until the promise settles, and then go on with the result. That doesn't cost any CPU resources, because the engine can do other jobs meanwhile: execute other scripts, handle events etc.

`await`('기다리다'라는 뜻을 가진 영단어 - 옮긴이)는 말 그대로 자바스크립트를 프라미스가 처리될 때까지 기다리게 만들고, 프라미스가 처리되면 그 결과와 함께 실행을 재개합니다. 대기 중에 엔진은 다른 일(다른 스크립트를 실행, 이벤트 처리 등)을 할 수 있기 때문에, CPU 리소스가 낭비되지 않습니다.

It's just a more elegant syntax of getting the promise result than`promise.then`, easier to read and write.

`await`는`promise.then`보다 좀 더 세련되게 프라미스 결과를 얻을 수 있도록 해주는 문법입니다.`promise.then`보다 가독성도 좋고 쓰기도 쉽습니다.

````warn header="Can't use`await` in regular functions"

````warn header="일반 함수에는`await`을 사용할 수 없습니다."

```js run

functionf() {

}

We will get this error if we do not put`async` before a function. As said,`await` only works inside an`async function`.

function 앞에`async`를 붙이지 않으면 이런 에러가 발생합니다. 앞서 설명해 드린 바와 같이`await`은`async function` 안에서만 동작합니다.

````smart header="`await` accepts\"thenables\""

Like`promise.then`,`await` allows to use thenable objects (those with a callable`then` method). The idea is that a 3rd-party object may not be a promise, but promise-compatible: if it supports`.then`, that's enough to use with`await`.

````smart header="`await`는\'thenables\'를 받습니다."

`promise.then`처럼`await`도 thenable 객체(`then` 메서드가 있는 호출 가능한 객체)를 사용할 수 있게 해줍니다. 서드파티 객체는 프라미스가 아니지만 프라미스와 호환 가능한 객체일 수 있다는 점에서 이런 기능이 생겼습니다. 서드파티 객체가`.then`을 지원하면`await`를 충분히 사용할 수 있습니다.

```js run

classThenable {

}

then(resolve,reject) {

alert(resolve);

setTimeout(()=>resolve(this.num*2),1000);// (*)

}

};

asyncfunctionf() {

let result=awaitnewThenable(1);

alert(result);

}

If`await` gets a non-promise object with`.then`, it calls that method providing native functions`resolve`,`reject` as arguments. Then`await` waits until one of them is called (in the example above it happens in the line`(*)`) and then proceeds with the result.

If a promise resolves normally, then`await promise` returns the result. But in case of a rejection, it throws the error, just as if there were a`throw` statement at that line.

프라미스가 정상적으로 이행되면`await promise`는 결과를 반환합니다. 그러나 프라미스가 거부되면 마치`throw`문을 작성한 것처럼 에러가 던져집니다.

This code:

예시:

asyncfunctionf() {

awaitPromise.reject(newError("Whoops!"));

awaitPromise.reject(newError("에러 발생!"));

}

asyncfunctionf() {

thrownewError("Whoops!");

thrownewError("에러 발생!");

}

In real situations, the promise may take some time before it rejects. In that case there will be a delay before`await` throws an error.

실제 상황에선 일정 시간이 지난 후에 프라미스가 거부되곤 합니다. 이럴 땐`await`가 에러를 던지기 전에 지연이 생깁니다.

```js run

asyncfunctionf() {

try {

let response=awaitfetch('http://no-such-url');

let response=awaitfetch('http://유효하지-않은-url');

}catch(err) {

alert(err);// TypeError: failed to fetch

f();

```js run

asyncfunctionf() {

try {

let response=awaitfetch('/no-user-here');

let response=awaitfetch('http://유효하지-않은-url');

let user=awaitresponse.json();

}catch(err) {

alert(err);

}

}

f();

If we don't have`try..catch`, then the promise generated by the call of theasyncfunction`f()` becomes rejected. We can append`.catch` to handle it:

`try..catch`가 없으면async함수`f()`를 호출해 만든 프라미스가 거부됩니다.`.catch`를 추가하면 거부된 프라미스를 처리할 수 있습니다.

```js run

asyncfunctionf() {

let response=awaitfetch('http://no-such-url');

let response=awaitfetch('http://유효하지-않은-url');

}

If we forget to add`.catch` there, then we get an unhandled promise error (viewable in the console).We can catch such errors using a global event handler as described in the chapter<info:promise-error-handling>.

`.catch`를 추가하는 걸 잊으면, 처리되지 않은 프라미스 에러가 발생합니다(콘솔에서 확인).이런 에러는<info:promise-error-handling> 챕터에서 설명한 전역 이벤트 핸들러를 사용해 잡을 수 있습니다.

```smart header="`async/await` and`promise.then/catch`"

When we use`async/await`, we rarely need`.then`, because`await` handles the waiting for us. And we can use a regular`try..catch` instead of`.catch`. That's usually (not always) more convenient.

```smart header="`async/await`와`promise.then/catch`"

`async/await`을 사용하면`await`가 대기를 처리해주기 때문에`.then`이 거의 필요하지 않습니다. 여기에 더하여`.catch` 대신 일반`try..catch`를 사용할 수도 있죠. 항상 그러한 것은 아니지만,`promise.then`을 사용하는 것보다`async/await`를 사용하는 것이 대게는 더 편리합니다.

But at the top level of the code, when we're outside of any`async` function, we're syntactically unable to use`await`, so it's a normal practice to add`.then/catch` to handle the final result or falling-through errors.

그런데 문법 제약 때문에 최상위 레벨 코드에선`await`를 사용할 수 없으므로,`.then/catch`를 추가해 최종 결과나 처리하지 못한 에러를 다루는 것이 관행입니다.

Like in the line`(*)` of the example above.

위 예시의`(*)`이 표시된 줄처럼 말이죠.