[JS] 동기, 비동기

들어가기 전...

자바스크립트 엔진은 하나의 메인 스레드로 구성된다. 메인 스레드는 코드를 읽어 한 줄씩 차례대로 실행한다. (1차선 도로와 같음)

스레드 : 하나의 프로세스 안에서 독립적으로 실행되는 실행 단위.
프로세스 : 시스템에서 실행 중인 프로그램

 

 

 

자바스크립트 제어 흐름

 

동기적(Synchronous) 제어 흐름

 - 현재 실행 중인 코드가 종료되기 전까지 다음 줄의 코드를 실행하지 않는다.

 - 코드의 흐름과 실제 제어 흐름이 동일하다.

 - 싱글스레드 환경에서 메인 스레드를 긴 시간동안 점유하면 프로그램을 멈춘다.  ex) 무한 루프

 

비동기적(Asynchronous) 제어 흐름

 - 현재 실행 중인 코드가 종료되기 전에 다음 라인의 코드를 실행한다.

 - 코드 흐름과 실제 제어 흐름이 다르다

 - 비동기 작업을 실행하는 동안 메인 스레드는 다른 작업을 처리한다.

 - JS엔진은 비동기 처리를 제공하지 않아서 비동기 API(setTimeout, setInterval,...)를 활용해 비동기 처리를 할 수 있다.

 

동기적 코드 vs 비동기적 코드

 

동기적 코드 : 대부분의 코드

비동기적 코드 : setTimeout, setInterval, Promise, ...

 

setTimeout(func, ms) : n밀리초 후 코드를 실행한다. 코드가 동작할 때 대기번호를 부여받고 n밀리초를 기다린다. clearTimeout으로 타이머 기능을 해제할 수 있으며 대기번호를 인자로 받는다.

setInterval(func, ms) : n밀리초 마다 코드를 반복 실행한다. clearInterval로 타이머 기능을 해제 할 수 있다.

 

(34, 35는 코드의 대기번호를 의미한다.)

** setInterval()은 연속적인 호출 시 시간 간격을 보장하지 않아 사용 시 유의해야한다. **
setInterval()은 함수를 실행하기 시작하는 지점을 기준으로 타이머가 동작하는데 해당 함수를 실행하는 데에 걸리는 시간이 입력한 ms 시간보다 오래 걸릴 경우 문제가 발생한다.
setTimeout()은 함수 실행이 끝난 지점을 기준으로 타이머가 동작하기 때문에 연속적인 호출 시에도 시간 간격을 보장할 수 있다. setTimeout()의 실행과 그 내부의 동작은 동기적으로 실행되기 때문이다. 비동기적으로 동작하는 것은 setTimeout()에서 실행할 함수 부분!

 

 

 

참고

동기와 비동기 개념과 차이 — Koras02코딩웹 (tistory.com)