[JavaScript] blocking / non-blocking, 동기 / 비동기

자바스크립트에서 blocking과 non-blocking, 동기와 비동기는 프로그램의 실행과 관련된 중요한 개념입니다.

1. Blocking vs Non-blocking

Blocking은 특정 코드의 실행이 완료될 때까지 다음 코드의 실행을 중지시키는 것을 의미합니다.

이러한 코드 실행 방식은 호출된 함수가 작업을 수행할 때까지 스크립트의 실행을 차단(block)시키기 때문에, 다른 작업이나 이벤트를 처리하는 것을 방해할 수 있습니다.

Blocking이 발생하는 경우에는 대개 시스템 리소스를 많이 사용하거나 시간이 오래 걸리는 작업을 수행하는 경우입니다.

 

반면, Non-blocking은 호출된 함수가 작업을 수행하는 동안에도 다음 코드의 실행을 계속할 수 있습니다.

이렇게 하면 스크립트의 실행이 차단되지 않기 때문에, 더 빠르고 효율적인 코드를 작성할 수 있습니다.

Non-blocking은 대개 비동기적인 작업을 수행하는 경우에 발생합니다.

2. Synchronous vs Asynchronous

Synchronous(동기)는 코드가 실행되는 순서대로 실행되는 것을 의미합니다.

예를 들어, 함수가 호출되면 그 함수의 작업이 완료될 때까지 스크립트의 실행이 차단되며, 이후에 다음 코드가 실행됩니다. 이러한 코드 실행 방식은 대개 Blocking과 함께 발생합니다.

 

Asynchronous(비동기)는 코드가 실행되는 순서와는 상관없이 실행되는 것을 의미합니다.
예를 들어, 비동기 함수가 호출되면 그 함수의 작업이 완료될 때까지 스크립트의 실행이 차단되지 않습니다.

대신, 비동기 함수가 완료되면 이벤트 루프(event loop)를 통해 콜백 함수가 실행됩니다.

따라서, Blocking/Non-blocking과 Synchronous/Asynchronous는 각각 다른 의미를 가지며, 자바스크립트에서 이들을 효율적으로 사용할 수 있어야 합니다.

 

아래 코드는 Blocking과 Non-blocking, 그리고 Synchronous와 Asynchronous의 차이를 보여주는 간단한 예시입니다.

// Blocking and Synchronous
function blockingSync() {
  console.log("Start blockingSync function");
  const result = 1 + 2;
  console.log("Result: " + result);
  console.log("End blockingSync function");
}
blockingSync();

// Non-blocking and Asynchronous
function nonBlockingAsync() {
  console.log("Start nonBlockingAsync function");
  setTimeout(() => {
    const result = 3 + 4;
    console.log("Result: " + result);
  }, 2000);
  console.log("End nonBlockingAsync function");
}
nonBlockingAsync();

// Non-blocking and Asynchronous with Callback
function nonBlockingAsyncWithCallback(callback) {
  console.log("Start nonBlockingAsyncWithCallback function");
  setTimeout(() => {
    const result = 5 + 6;
    console.log("Result: " + result);
    callback(result);
  }, 2000);
  console.log("End nonBlockingAsyncWithCallback function");
}
nonBlockingAsyncWithCallback((result) => {
  console.log("Callback Result: " + result);
});

위 코드에서 blockingSync() 함수는 Blocking과 Synchronous한 작업을 수행합니다.

함수가 실행되면 1+2의 결과를 계산하고, 그 결과를 출력한 후, 함수의 끝을 알리는 메시지를 출력합니다.

이때 함수의 실행이 완료될 때까지 다음 코드의 실행이 중지되기 때문에, "Start nonBlockingAsync function" 메시지가 출력되기 전까지는 다른 작업을 수행할 수 없습니다.

 

반면, nonBlockingAsync() 함수는 Non-blocking과 Asynchronous한 작업을 수행합니다.

함수가 실행되면, setTimeout() 함수를 호출하여 2초 후에 3+4의 결과를 계산하고 출력하는 작업을 수행합니다.

이때 함수의 실행이 차단되지 않기 때문에, "End nonBlockingAsync function" 메시지가 출력되는 동안에도 다른 작업을 수행할 수 있습니다.

 

마지막으로, nonBlockingAsyncWithCallback() 함수는 Non-blocking과 Asynchronous하면서도 Callback 함수를 사용하여 결과를 처리합니다. 함수가 실행되면, setTimeout() 함수를 호출하여 2초 후에 5+6의 결과를 계산하고, 콜백 함수를 호출하여 결과를 전달합니다.

이때 콜백 함수가 실행되기 전에 "End nonBlockingAsyncWithCallback function" 메시지가 출력되기 때문에, 다른 작업을 수행할 수 있습니다.