동기적 호출 vs 비동기적 호출

출처: 코드스테이츠

 

동기적 호출은 처음 함수를 배우며, 일반적으로 사용했던 함수가 동기적 호출에 해당한다.

 

그리고 비동기적 호출을 배워보자.

실제로 현업에서 JavaScript 코드를 작성하다보면, 코드의 작동이 비동기로 이루어지는 경우가 대부분이다.

 

동기적 호출 (blocking)	비동기적 호출 (non - blocking)
전화 (하던 일을 멈추고 받아야 한다.)	문자 (확인 후, 나중에 답장할 수 있다.)
요청에 대한 결과가 동시에 일어난다.	요청에 대한 결과가 동시에 일어나지 않는다.

 

비동기적 호출이 효율적인 이유?

	동기적 호출	비동기적 호출
장점	설계가 매우 간단하고 직관적	그 시간동안 다른 작업을 할 수 있으므로 자원의 효율적 사용이 가능
단점	결과가 주어질 때까지 아무것도 못하고 대기	코드가 복잡하고 결과가 주어지는데 시간이 걸림

 

비동기적 호출의 대표적인 예

DOM element의 이벤트 핸들러 : 마우스, 키보드 입력(click, keydown 등), 페이지 로딩(DOMContentLoaded 등)

타이머API

애니메이션API

서버에 자원 요청 및 응답

fetch API

AJAX (XHR)

 

비동기 호출 timer API의 예

console.log(1);
setTimeout(function(){console.log(2);}, 1000);
console.log(3);// 1 3 2

console.log(1);
setTimeout(function(){console.log(2);}, 1000);
setTimeout(function(){console.log(3);}, 0);
console.log(4); // 1 4 3 2