[개념 정리] 자바스크립트에서 동기 / 비동기란 무엇일까?
자바스크립트에서 동기(synchronous)와 비동기(asynchronous)는 코드의 실행 방식을 설명하는 용어이다.
코드의 실행 방식의 두 종류
| 동기 | 비동기 |
| 코드 순차 실행 | 코드가 순차적으로 실행되지 않음 기다리지 않고 다른 작업을 수행할 수 있도록 비동기적으로 처리 작업이 완료되면, 결과를 처리하기 위한 콜백 함수 호출 |
동기적으로 코드를 실행하면, 코드는 순차적으로 실행된다.
코드 라인을 읽고 그 다음 라인을 실행하며, 한 라인이 실행될 때까지 다음 라인으로 넘어가지 않는다.
반면에 비동기적으로 코드를 실행하면, 코드는 순차적으로 실행되지 않는다.
코드가 실행되는 동안 이벤트 루프(event loop)가 다음 코드를 실행하도록 대기한다.
동기와 비동기의 차이점을 이해하기 위해서는 콜백 함수(callback function)와 이벤트 루프(event loop)의 개념도 알아야 한다.
자바스크립트에서는 대부분의 I/O(입출력, Input/Output) 작업과 네트워크 작업이 비동기적으로 처리된다.
이런 작업들은 완료되기까지 시간이 걸리기 때문에, 기다리지 않고 다른 작업을 수행할 수 있도록 비동기적으로 처리된다.
이런 작업이 완료되면, 결과를 처리하기 위해 콜백 함수가 호출된다.
이벤트 루프는 이 콜백 함수를 처리하고 다음 작업을 처리하기 위해 대기한다.
동기적인 코드의 실행 방식과 비동기적인 코드의 실행 방식을 비교하면 다음과 같다.
동기적인 실행 방식
console.log('1');
console.log('2');
console.log('3');위의 코드는 순차적으로 실행되며, 한 라인이 실행되기 전에 다음 라인으로 넘어가지 않습니다. 따라서, 콘솔에는 다음과 같이 출력됩니다.
1
2
3비동기적인 실행 방식
console.log('1');
setTimeout(() => { console.log('2'); }, 1000);
console.log('3');위의 코드에서 setTimeout 함수는 1초 후에 실행되도록 예약되어 있다.
따라서, setTimeout 함수를 만나면 이벤트 루프가 대기하고, 다음 라인인 console.log('3')이 실행된다.
1초 후에는 setTimeout 함수가 실행되며, console.log('2')이 출력된다.
콘솔에는 다음과 같이 출력된다.
1
3
2위와 같이, 비동기적으로 실행되는 코드는 예측하기 어려울 수 있으며, 콜백 함수를 사용해야 하기 때문에 코드가 복잡해질 수 있다.
그러나, 비동기적인 실행 방식은 I/O 작업과 네트워크 작업을 포함한 작업에서 매우 유용하다.