[Q&A] 동기와 비동기

자바스크립트에서 동기(Synchronous)와 비동기(Asynchronous)는 코드의 실행 순서와 관련된 개념입니다.

동기(Synchronous)?

동기적으로 코드를 실행하면, 코드는 순차적으로 실행되며, 이전 코드의 실행이 끝나기 전에는 다음 코드가 실행되지 않습니다. 이 때문에, 코드가 실행되는 동안 다른 작업을 할 수 없습니다. 예를 들어, 다음의 코드는 동기적으로 실행됩니다.

console.log('start');
console.log('middle');
console.log('end');

위 코드를 실행하면, 'start'가 출력된 이후에 'middle'과 'end'가 순차적으로 출력됩니다. 이 때, 'middle'와 'end'는 'start'가 출력된 이후에 실행됩니다.

비동기(Asynchronous)?

비동기적으로 코드를 실행하면, 코드는 순차적으로 실행되지 않고, 먼저 실행된 코드의 결과를 기다리지 않고 바로 다음 코드를 실행합니다. 이 때문에, 코드가 실행되는 동안 다른 작업을 할 수 있습니다. 예를 들어, 다음의 코드는 비동기적으로 실행됩니다.

console.log('start');
setTimeout(() => console.log('middle'), 1000);
console.log('end');

위 코드를 실행하면, 'start'가 출력된 이후에 'end'가 출력됩니다. 그리고 1초 후에 'middle'이 출력됩니다. 이 때, 'middle'은 setTimeout 함수를 호출한 이후에 바로 실행되지 않고, 1초 뒤에 실행됩니다. 따라서, 'end'가 출력된 이후에 'middle'이 출력됩니다.

비동기적인 코드를 실행할 때는 콜백(callback) 함수, Promise 객체, async/await 구문 등을 사용하여 코드의 실행 순서와 결과를 다룰 수 있습니다. 이러한 비동기적인 기술은 웹 애플리케이션에서 서버와의 통신, 파일 업로드/다운로드, 애니메이션 등에서 자주 사용됩니다.