동기(Synchronous)와 비동기(Asynchronous)

동기(Synchronous)란?

---

하나의 연산이 끝나야 그 다음 코드가 실행되는 방식이다. 모든 작업이 순차적으로 진행되고, 어떤 작업이 실행중이라면 다음 작업은 대기를 해야한다. (요청을 보낸 후 응답을 받음)

동기식 처리 모델은 직렬적으로 Task를 수행한다. 즉, Task는 순차적으로 실행이 되면서 어떤 작업이 수행 중이면 다음 작업은 대기한다.

예를 들어 서버에서 데이터를 가져와서 화면에 표시하는 작업을 수행할 때, 서버에 데이터를 요청하고 데이터가 응답될 때까지 이후 Task들은 Blocking(작업 중단) 된다.

동기적으로 동작하는 코드 예시

function func1() {
	console.log('func1');
  	func2();
}

function func2() {
	console.log('func2');
  	func3();
}

function func3() {
	console.log('func3');
}

func1();

비동기(Asynchronous)?

---

비동기 처리 모델은 병렬적으로 Task를 수행한다. 즉, Task가 종료되지 않은 상태라도 대기하지 않고 다음 Task를 실행한다.

예를 들어 서버에서 데이터를 가져와서 화면에 표시하는 Task를 수행할 때, 서버에 데이터를 요청한 후 서버에서 데이터가 응답될 때까지 대기하지 않고 즉시 다음 Task를 수행한다. (Non-Blocking)

이후 서버에서 데이터가 응답되면 이벤트가 발생하고 이벤트 핸들러가 데이터를 가지고 수행할 Task를 계속해서 수행한다.

function func1() {
	console.log('func1');
  	func2();
}

function func2() {
	setTimeout(() => {
    	console.log('func2');
    }, 0);
  
  	func3();
}

function func3() {
	console.log('func3');
}

func1();

위 코드를 실행하면 setTimeout 메소드에 두번째 은수 인터벌 0초를 설정해도 콘솔에 func1, func2, func3의 순서대로 로그가 출력되지 않는다.

그 이유는 setTimeout 메소드가 비동기 함수이기 때문이다.

함수 func1이 호출되면 함수 func1은 Call Stack에 쌓인다. 그리고 func1은 함수 func2을 호출하므로 함수 func2가 Call Stack에 쌓이고 setTimeout이 호출된다.

setTimeout의 콜백 함수는 즉시 실행되지 않고, 지정 대기 시간만큼 기다리다가 tick 이벤트가 발생하면 이벤트 큐로 이동한 후 Call Stack이 비워지면 Call Stack으로 이동되어 실행된다.