JavaScript에서 동기식 스타일의 프로미스

프로미스 지옥(promise hell) 문제를 해결하기 위해, 비동기 코드를 훨씬 더 쉽게 작성할 수 있게 해주는 특별한 프로미스 구문이 만들어졌습니다 - 바로 동기식 스타일입니다.

이제 그것을 배워보겠습니다. 먼저 이전 강의의 코드를 가져옵니다:

function func() {
	getSmth(2).then(res => {
		console.log(res); // 4를 출력합니다
	});
}

func();

만약 우리의 함수 getSmth가 동기식이었다면, 함수 func의 코드를 다음과 같이 다시 작성할 수 있었을 것입니다:

function func() {
	let res = getSmth(2);
	console.log(res); // 4를 출력합니다
}

하지만 getSmth 함수는 비동기식이므로, 위의 코드는 작동하지 않습니다. 그러나 프로미스의 동기식 스타일을 이용하면, 비슷한 것을 얻을 수 있습니다. 해봅시다.

먼저 우리의 함수 func를 특별한 명령어 async를 사용하여 비동기 함수로 선언해야 합니다:

async function func() {
	
}

그러면 함수 func 내부에서 특별한 명령어 await를 사용할 수 있습니다. 이 명령어는 프로미스 앞에 작성하면, 프로미스가 완료될 때까지 JavaScript가 기다리게 합니다. 그 후 명령어는 프로미스의 결과를 반환하고, 코드 실행이 계속됩니다.

우리의 경우, getSmth 호출 앞에 await를 작성해야 합니다. 이 함수 호출의 결과는 프로미스이므로, 코드 실행은 이 프로미스가 완료된 후에야 계속될 것입니다. 그리고 프로미스의 결과는 변수에 저장할 수 있습니다. 설명한 대로 해봅시다:

async function func() {
	let res = await getSmth(2);
	console.log(res); // 4를 출력합니다
}

func();

getSmth를 여러 번 호출해 봅시다:

async function func() {
	let res1 = await getSmth(2);
	let res2 = await getSmth(3);
	
	console.log(res1 + res2); // 13을 출력합니다
}

func();

이제 루프에서 getSmth를 호출해 보겠습니다:

async function func() {
	let arr = [1, 2, 3, 4, 5];
	let sum = 0;
	
	for (let elem of arr) {
		sum += await getSmth(elem);
	}
	
	console.log(sum);
}

func();

다음 코드를 동기식 구문으로 다시 작성하세요:

function func() {
	getSmth(2).then(res1 => {
		getSmth(3).then(res2 => {
			getSmth(4).then(res3 => {
				console.log(res1 + res2 + res3);
			});
		});
	});
}

func();