[JavaScript] 동기식 vs 비동기식 처리

동기식 처리 모델

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

이를태면 서버에서 데이터를 가져와서 화면에 그려낼 때
데이터를 요청하고 데이터가 응답될 때까지 이후 태스크들은 블로킹 된다.

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

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

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

func1();

위 예시는 동기식으로 동작하는 코드이다.
func1를 실행함으로서 func2,3이 순차적으로 실행된다.

비동기식 처리 모델

비동기식 처리 모델은 병렬적으로 태스크를 수행한다. 즉, 태스크가 종료되지 않은 상태라 하더라도 대기하지 않고 다음 태스크를 수행한다. 이후 서버로부터 데이터가 응답되면 이벤트가 발생하고 이벤트 핸들러가 데이터를 가지고 수행할 태스크를 계속 수행한다.

javascript의 대부분 DOM 이벤트 핸들러와 Timer 함수 setTimeout, setInterval 등 Ajax요청은 비동기식 처리 모델로 동작한다.

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

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

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

func1();

위 예제는 비동기식 처리 모델이다.
func2에 setTimeout함수를 호출함으로서 비동기적으로 실행된다.

func1이 호출되면 func1이 Call Stack에 쌓이고
func2를 호출하게 되는데 그 때 func2가 stack에 쌓이고 setTimeout이 호출되면서 즉시 실행하지 않고 대기 시간만큼 기다리다가 tick이벤트가 발생하면 태스크 큐로 이동한 후 Call Stack이 비었을 때 Call Stack으로 이동되어 실행된다.

---

생각🧠

동기, 비동기를 어느정도 반대로 생각한 부분들이 있어서
개념을 잡을 수 있어서 좋았고.
javascript 작동원리를 좀 더 자세히 공부할 때 한 번 더 들여봐야 할 내용인 것 같아 정리해 보았다.

참고 -https://poiemaweb.com