[Javascript] 비동기 처리(3) - async, await

 이전 글에서 return new Promise 구문을 통해 약속된 객체를 생성하고 리턴값을 활용하는 방법에 대해 알아봤다. 

이 방법 외에도 async 키워드를 활용한 비동기 처리 방법이 있다고 한다.

 해당 키워드가 붙는 함수의 경우 결과 값을 Promise 객체에 담아 리턴하는데 똑같이 then 메서드를 이용해 접근할 수 있다.

 

아래 예시를 보자.

function displayText(){
	return "Display Text On Window"
}

async function AsyncDisplayText(){
	return "Display Text On Window"
}

console.log(displayText(), AsyncDisplayText());

둘 다 같은 값을 리턴하는데 콘솔로 출력해 보면 후자의 경우 Promise 객체를 반환할 것이다. async 키워드가 붙은 함수는 별도로 비동기 객체를 할당하거나 콜백 함수를 사용할 필요 없이 단순히 리턴하는 것만으로도 Promise 객체를 반환해 준다.

 

 

이번에는 비동기 함수 내부에서 동기 처리가 필요한 상황을 보자.

 async 키워드를 붙이면 이러한 처리가 가능한데 구조적으로 작성한 함수에서 어떠한 처리를 기다려야 한다면 이 키워드를 사용하면 된다.

아래 예시를 보자.

async function ComplexibleArith(){
	let sum=0;
	for(let i=1; i<=100; i++){
    	sum+=i;
	}
	return sum;
}

function waitForObject(){
	return new Promise((resolve)=>{
		resolve(ComplexibleArith());
	});
}

async function negativePow(){
	let a = -1;
	let result;
	await waitForObject().then((res)=>{result = res**=a;});
	console.log("먼저 실행될까?");

	return result;
}

negativePow().then((res)=>{console.log(res);});

예시가 조금 복잡한데 negativePow 함수를 호출하는 구문부터 보자.

 

negativePow 함수가 호출되고 그 즉시 waitForObject 함수를 실행하는데 이 함수는 ComplexibleArith의 리턴값을 받아 Promise 객체에 담는다.

 

이 과정을 거친 후 다시 negativePow로 돌아왔을 때 해당 객체에 a만큼 제곱한 후  콘솔 출력이 실행되고 연산한 값을 리턴한다.

 

그런데 위 예시에서 await 키워드를 제거한 후에도 제대로 된 값을 반환할 수 있을까?

예시에서 해당 키워드를 제거한 후 결괏값을 확인해 보자.

await 키워드를 붙이지 않으면 waitForObject 함수가 리턴할 때까지 대기하지 않으므로 콘솔 출력 후 즉시 리턴되며 정상적인 계산이 이뤄지지 않고 undefined가 출력될 것이다.

만약 복잡한 연산을 하는 함수가 있고 이 값을 활용해야 한다면 await 키워드를 적극적으로 사용해 보기 바란다.