동기식 vs 비동기식 처리

동기식처리(Synchronous)

자바스크립트 언어자체는 동기식 처리이다.
자바스크립트 코드는 동기적으로 한번에 코드한 줄씩 순차적으로 실행되며, 요청에 대한 결과가 동시에 일어난다.

대표특징 / blocking

특정 코드(작업)을 실행하고 있는 동안, 코드의 실행이 멈춰있다. 앞의 특정코드(작업)의 실행이 종료된 후 다음 코드(작업)을 실행 할 수 있다.**

ex) 코드는 위에서 부터 순차적으로 실행되며, 각 코드한줄마다 요청 -> 실행이 동시에 일어난다.

console.log("1번 실행");  // 동기) 1 출력 요청 -> 실행 1출력 
console.log("2번 실행");  // 동기) 위에 코드가 다 실행된 뒤 2 출력 요청 -> 실행 2출력 
console.log("3번 실행");  // 동기) 위에 코드가 다 실행된 뒤 3 출력 요청 -> 실행 3출력

비동기식처리(Asynchronous)

대표특징 / non-blocking

특정코드(작업)의 실행 중인 상태, 즉 코드의 실행이 종료되지 않은 상태에서 코드의 실행을 멈추지 않고, 다음 코드를 먼저 실행한다.

브라우저가 비동기식처리(Asynchronous)이다. 즉, 자바스크립트를 실행하는 브라우저 덕분에 자바스크립트가 비동기식 처리가 가능한 것이다. 브라우저에서 제공하는 Web API와 연관된 특수한 함수들을 사용하면 자바스크립트를 비동기식처리 할 수 있다. 브라우저는 오래 걸리는 코드를 Web API로 보내놓고 실행될 조건이 되었을때 다시 불러와서 실행한다.

대표적인 Web API 비동기 함수 setTimeout

setTimeout()는 지정한 시간(delay: 밀리초 단위 시간)만큼 기다렸다가 함수(function)의 코드를 실행시켜주는 메소드이다.

setTimeout(function, delay);

ex) setTimeout으로 호출한 2는 대기실에서 기다리다가 2초뒤 마지막에 출력된다.

console.log("1번째 실행"); // 동기) 1요청 -> 실행 1출력
setTimeout(() => { console.log("2초동안 기다린 후 실행")}, 2000);// 비동기) 2초 뒤 출력
// 비동기식처리를 도와주는 Web API 함수 -> 요청이 오래걸리는 작업을 대기실에 넣어두었다가 후에 실행
console.log("2번째 실행"); // 동기) 3요청 -> 실행 3출력

비동기식 처리에 대해서는 다음 장에서 자세하게 콜백함수, promise 등 패턴까지 같이 알아보자

참조
코드스테이츠
MDN