[javascript] 자바스크립트의 동기와 비동기 처리 방식

자바스크립트는 동기적으로 실행되는 단일 스레드 언어입니다. 이는 한 번에 한 작업만 처리할 수 있다는 의미입니다. 그러나 자바스크립트에서는 이러한 제한을 극복하기 위해 비동기 처리 방식을 지원합니다.

동기 처리

동기 처리 방식은 작업을 순차적으로 실행하고, 이전 작업이 완료될 때까지 다음 작업을 실행하지 않는 방식을 의미합니다. 이는 setTimeout이나 XMLHttpRequest 등의 비동기 함수를 사용하지 않을 때의 기본 동작 방식입니다.

console.log('첫 번째 작업');
console.log('두 번째 작업');

위의 예제는 두 개의 console.log 문이 순차적으로 실행되는 동기 처리 방식을 보여줍니다.

비동기 처리

비동기 처리 방식은 작업을 순차적으로 실행하지 않고, 이전 작업이 완료되지 않아도 다음 작업을 실행할 수 있는 방식을 의미합니다. 이를 통해 네트워크 호출이나 파일 시스템 액세스와 같은 I/O 작업을 효율적으로 처리할 수 있습니다.

console.log('첫 번째 작업');
setTimeout(function() {
  console.log('두 번째 작업');
}, 1000);

위의 예제는 setTimeout 함수를 사용하여 두 번째 작업을 1초 후에 실행하는 비동기 처리 방식을 보여줍니다.

콜백 함수

비동기 처리에서는 종종 콜백 함수를 사용하여 작업이 완료되면 수행할 작업을 지정합니다. 이를 통해 비동기 작업의 결과를 처리하거나 다음 작업을 실행할 수 있습니다.

function getData(callback) {
  setTimeout(function() {
    const result = '데이터';
    callback(result);
  }, 1000);
}

getData(function(data) {
  console.log(data);
});

위의 예제는 콜백 함수를 사용하여 비동기적으로 데이터를 가져와 출력하는 방법을 보여줍니다.

자바스크립트의 동기와 비동기 처리 방식을 이해하면 비동기적인 작업을 효과적으로 다루고, 웹 애플리케이션을 더욱 빠르고 반응적으로 만들 수 있습니다.

참고 자료