본문 바로가기
Javascript

[Javascript] async/await

by mtm1018 2025. 4. 11.

Promise를 사용하다보면 then도 줄줄이 붙어서 코드가 복잡해보입니다.

 

그래서 ES8부터 async와 await이라는 키워드가 등장했는데요. 

 

async/await가 어떤 점에서 유용한지 알아보겠습니다.

 

 

 

async/await는 어떻게 사용할까요?

 

이처럼 함수 선언전에 async를 붙이기만하면 promise처럼 then을 사용 할 수 있습니다.

 

async라는 키워드만 사용해서 promise를 남길 수 있어 코드가 조금 더 줄어들죠.

 

그런데 이렇게만 쓰면 나중에 then이 줄줄이 붙어서 어지러워 보이는 건 똑같겠죠?

 

그래서 await를 사용 할 수 있습니다

 

.

이것도 복잡해보이지만...

 

await는 기다리라는 뜻입니다 .말 그대로 위의 promise가 처리되기를 기다린 후 실행합니다.

 

즉,then과 성질이 똑같죠.

 

await는 async안에서만 쓸수있기때문에, async함수로 우선 덮고 안에다가 새로운 promise를 만들어 사용했습니다.

(굳이 promise안쓰고 안에있는 코드를 함수로 만들고 async를 사용해도 잘 됩니다)

 

 

 

 

async의 단점과 보완법

 

async는 resolve되는 함수만 실행 가능하다는 점이 단점입니다.

 

만약 코드가 실행이 실패되면 await는 기능을 동작하지 않으며 코드가 멈춰버립니다.

 

그렇다면 이럴때 디버깅이 안되는 코드라면 promise로 다시 바꿔서 다시 짜야할까요?

 

그런 곤란함을 덜기위해 try와 catch라는 키워드가 있습니다.

 

 

 

이렇게 try와 catch를 사용해서 코드가 멈추는것을 보완할 수 있습니다.

 

 

/요약

 

1.async는 promise처럼 사용할 수 있습니다 . 단, async는 코드가 성공할 때의 경우만을 실행합니다

 

2. await는 then처럼 사용할 수있습니다. 

 

3. try / catch 키워드를 사용하여 코드가 멈추는것을 보완할 수 있습니다.

'Javascript' 카테고리의 다른 글

[Javascript] Symbol / Map / Set  (0) 2025.04.13
[Javascript] for 반복문 정리  (1) 2025.04.11
[Javascript] Promise  (0) 2025.04.10
[Javascript] setter 와 getter  (0) 2025.04.09
[Javascript] Prototype  (0) 2025.04.07