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

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

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

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

func();

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

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

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

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

javascriptasync function func() {
  
}

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

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

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

func();

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

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

func();

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

javascriptasync 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();

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

func();