coding AtoZ

async & await

- 자바스크립트의 비동기 처리 패턴 중 가장 최근에 나온 문법입니다.

- 다른 비동기 처리로는 callback, promise, setTimeout 이 있습니다.

JavaScript의 동작 방식

- JavaScript(줄여서 JS)는 비동기적 성질을 가지고 있습니다. 즉, 선행되는 코드의 연산이 다 끝나지 않더라도

  기다리지 않고 다음 코드를 실행합니다.

 - 위와 같은 성질 때문에 변수에 담긴 값이 undefinded 가 되는 오류가 종종 발생합니다.

async & await의 사용과 동작 방식

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: "resolved"
}

asyncCall();

(위 코드는 MDN Web Docs에서 발췌한 것입니다.developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/async_function)

비동기적 처리의 동작을 확인하기 위해 setTimeout 즉 시간적 딜레이를 넣어줬습니다.

asyncCall() 함수 앞에 async를 기입하고,

그 아래 await을 적용할 resolveAfter2Seconds() 함수 앞에 await을 선언해 줬습니다.

함수의 동작 결과는 

(1) 'calling' 출력, 2초 후 'resolved' 출력이다.

만약 await이 없다고 한다면 동작 결과는

(2) 'calling' 출력, [object Promise] 출력이다. 즉 두 번째 값은 오류 값이다.

(1)과 (2)의 결과 값이 다르게 나오는 이유는 (1)은 await의 선언으로  resolveAfter2Seconds() 함수가

실행 완료될 때까지 기다린 후 다음 코드를 실행하기 때문입니다.

그에 반해 (2)는 resolveAfter2Seconds() 함수에서 2초의 딜레이를 기다리지 않고 바로 다음 코드를 

실행하기 때문에 두 번째 값이 오류 값이 출력되는 것입니다.

 ※ 쉽게 요약하면 JS는 코드의 연산을 기다리지 않고 다음 코드를 실행하려는 성격을 가지지만,

async & await 비동기 처리를 만나면 단어 뜻 그대로 잠깐 wait(기다림) 후 다음 코드를 실행합니다.  

코딩을 공부하고 있는 학생입니다.

공부한 것을 정리, 공유하기 위해 블로그를 운영하고 있습니다.

포스팅에 틀린 부분이 있다면 과감한 지적, 수정의 한 마디 부탁드립니다! 감사합니다 :)

github.com/holicAZ