[JavaScript] 비동기

많은 프로그램 명령어들이 동기식이며, 우리가 다른 사람과 통화할 때처럼 말을 주고 받아야 하는 것이 동기(synchronous)이다. 하지만 메시지처럼 한 쪽에서 여러개의 문자를 남기고 이후에 수 있는 것이 비동기(asynchronous)이다.

 

전화	문자
blocking	non-blocking
synchronous	asynchronous

 

동기는 태스크들이 순서대로 실행이 되며, 호출한 함수가 작업 완료를 신경 쓴다. 비동기는 태스크들이 동시에 실행될 수 있으며, 호출된 함수가 작업 완료를 신경 쓴다. 즉, 호출되는 함수의 작업 완료를 누가 신경을 쓰느냐의 차이이다.

 

동기와 비동기를 말할때 같이 등장하는 단어가 있다. 바로 blocking과 non-blocking이다.

blocking은 호출한 함수에게 제어권을 주고 결과를 return 받을 때까지 대기를 하는 것을 말하고, non-blocking은 호출 받은 함수가 바로 제어권을 return을 통해서 바로 돌려줘서 결과를 돌려 받기 전에 다른 일을 할 수 있게 하는 것을 말한다. 즉, return을 즉시 호출되는 함수가 return을 해주냐 안해주냐의 차이이다.

 

물론 동기와 비동기, blocking과 non-blocking은 서로 다르지만 이번에는 자세히 구분하지 않고 비동기에 대해서만 다루고자 한다.

 

 

자바스크립트에서 비동기 호출을 하기 위해서는 콜백함수를 사용한다.

function order(request, callback) {
  console.log(`${request} 주문이 접수되었습니다.`);
  setTimeout(() => callback(request), 3000);
}

let request = '아이스 아메리카노';
// callback으로 비동기 함수 전달
order(request, (response) => {
  console.log(`주문하신 ${response} 나왔습니다.`);
});

위의 예시 코드에서와 같이 order 함수는 콜백 함수로 인해서 커피의 주문 접수와 완성된 커피 전달을 따로 할 수 있게 되었다. 즉, 콜백함수를 사용함으로써 주문 접수와 음료 제조를 따로 하게 되어 동시에 여러 개의 주문을 받을 수 있게 되었다.