동기 vs 비동기(Synchronous vs Asynchronous)

• 동기는 하나의 요청을 보냈을 때 응답이 돌아와야 다음 요청을 수행한다. A작업이 끝나야 B작업을 할 수 있는 것을 말한다.
• 비동기는 요청을 보냈을 때 응답 결과와 상관없이 다음 동작을 수행할 수 있는 것을 말한다. A 작업을 수행하면서 B 작업을 시작할 수 있으며, A의 결과값은 나오는대로 출력된다.
  예를 들어, 서버에서 데이터를 가져와서 조회를 할 때, 조회할 때까지 기다린 후에 다른 작업을 수행하는 것이 아니라 즉시 다음 다른 작업을 수행한다. JavaScript의 대부분의 DOM 이벤트, Timer 함수(setTimeout, setInterval), Ajax 요청은 비동기적 처리라고 볼 수 있다.
  
  
  
  

동기식 코드

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

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

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

func1()


//결과
//'1st'
//'2nd'
//'3rd'

예상대로 1st, 2nd, 3rd 순으로 찍힌다.
이렇게 위에서 부터 하나의 작업이 끝나면 다음 작업 그 다음 작업으로 순차적으로 이루어지는 것을 동기적 처리라고 한다.

1. 코드가 실행되면 call Stack에 함수가 쌓인다.
2. 실행된 함수는 call Stack에서 사라진다.
   
   
   
   

비동기식코드

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

function func2() {
  	setTimeout(function() {
	console.log('2nd');
    },0);
  	func3();
}

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

func1()


//결과
//'1st'
//'2nd'
//'3rd'

비동기적 코드의 실행 결과는 동기의 코드가 모두 다 실행되고 나서 반환한다.

1. func1이 호출되면, func1은 Call Stack에 쌓인다.
2. func1이 func2를 호출하므로, func2도 Call Stack에 쌓이고, setTimeout란 함수를 호출한다.
3. setTimeout의 콜백함수는 바로 실행되지 않고 Wep API로 이동한다.(해당함수가 등록되면 Call Stack에서 setTimeout는 사라진다.)
4. "tick"이라는 이벤트가 발생하면, setTimeout 콜백함수는 Event Queue로 이동한다.
5. Call Stack이 비워졌을 때, Event Queue에 있던 setTimeout 콜백함수는 Call Stack으로 이동하고 함수가 실행되면 Call Stack에서 사라진다.
   
   
   
   

참고자료

그림 설명 있음 : https://webclub.tistory.com/605