[JavaScript] 동기(Synchronous)와 비동기(Asynchronous)

동기[Synchronous]란?

동기는 코드를 실행하면 순차적으로 요청에 대한 응답을 받고 다음 코드를 실행한다.

비동기[Asynchronous]란?

비동기는 코드를 실행하면 요청에 대한 응답을 기다리지 않고 바로 다음 코드를 실행한다.
특정 작업을 다른 작업과 관계없이 독립적으로 동작하는 것을 말한다.

위 두 그림을 비교하게 되면 동기는 이전 코드가 끝나야 다음 코드로 넘어가는 직렬적 구조이고, 비동기는 여러 코드를 한 번에 실행하는 병렬적 구조이다.

function sayHello() {
	console.log("Hello World");
}

console.log("Start");

setTimeout(sayHello, 2000);

console.log("End");

위 코드를 실행한 출력 결과이다.

Hello World가 먼저 출력되지 않고 End가 출력된 후, Hello World가 출력되었다.

그 이유는 setTimeout() 함수에서 2000ms의 대기시간을 주었는데, 그것을 기다리지 않고 다음 코드를 실행시켰기 때문이다.

이를 해결하기 위해 등장한 것이 async/await이다.