JavaScript - 비동기 1.

비동기는 JavaScript에서 코드가 동작할 때 코드가 끝날 때까지 기다리는게 아니라 다음 코드가 동작하는 JavaScript특성을 말합니다. 비동기와 대조되는 것이 동기입니다. 동기는 어떻게 동작하는 걸까요? 동기의 동작을 먼저 살펴보겠습니다.
지금부터 상상력이 필요합니다. 우리는 지금 커피숍에 있습니다. 커피를 주문해야하는데 앞에 손님들이 대기하고 있네요. 근데 점원이 손님이 주문을 하면 바로 다음 손님에게 주문을 받는게 아니라 주문을 받고 손님이 받아간 다음에 주문을 받고 있습니다. 우리 앞에 기다리는 사람이 4명 이상이 있는데 저까지 주문이 오는데 30분 이상이 걸렸습니다.
보는 거와 같이 주문을 받고, 손님에게 커피를 건넨 뒤에 주문을 받는 방식이 동기 방식과 같습니다.

function order () {
	console.log('Order');
}
function receiveCoffee() {
	console.log('Coffee');
}

function orderProcessSync(){
	order();
  	receiveCoffee();
	order();
  	receiveCoffee();
}
console.log(orderProcess__Sync());

예를 들어서 표현한 것입니다. 그렇다면 만약에 손님이 한 두명이 아니라 10명, 20명, ... 이라고 생각해보면 오래기달려야 커피를 주문하고 받을 수 있습니다.

그럼 이번엔 비동기의 동작과정을 알아보겠습니다.
자 다시 상상해봅시다. 이번 커피숍의 점원은 주문만 받고, 다음 손님을 받고 있습니다. 주문을 받고 있는 동안 커피가 만들어지고 있습니다.그리고 먼저 주문한 손님은 테이블에서 기다리고 있네요.

function order () {
	console.log('Order');
}
function receiveCoffee() {
	console.log('Coffee');
}

function orderProcessAsync(){
    order(); // 1
    setTimeout(receiveCoffee, 0); // 2
    order(); // 3
    setTimeout(receiveCoffee, 2000); // 4
    order(); // 5
}
console.log(orderProcess__Sync());

위에 코드를 보면 order함수들이 먼저 실행되고, 나머지 setTimeout이 동작합니다. setTimeout 함수는 javascript에서 제공하는 비동기 함수입니다. setTimeout 함수는 첫 매개변수로 함수를 받고(callback), 두번째는 숫자를 매개변수로 받습니다. 초를 나타내고, 초단위로 밀리초를 사용합니다. orderProcessAsync 함수가 실행되면 차례대로 실행될거라고 생각하겠지만, 매개변수로 받은 receiveCoffee 함수는 어딘가에서 대기하고 있다가 0초 뒤에 receiveCoffee가 실행, 2초 뒤에 receiveCoffee가 실행됩니다.
JavaScript는 단방향으로 실행됩니다. 근데 차례대로 처리하면 앞에서 실행되는 함수가 오래걸린다고 생각됐을 때 뒤에 있는 함수는 앞의 함수가 끝날 때까지 기다려야합니다. 이렇게 하지 않기 위해서 비동기 함수가 있는 건데요, javascript는 동기함수가 먼저 실행되고, 비동기함수가 실행됐을 때 비동기 함수로 실행된 함수는 어딘가(event loop)로 보내져서 그 곳에서 비동기 간에 실행 순서를 정해진 뒤에 다시 또 다른 곳에서 순서대로 쌓인 다음에 들어온 순서대로 다시 Javascript에 보내져서 실행됩니다.

마무리
이번 블로깅을 통해서 비동기가 어떻게 동작하는지 정리할 수 있어서 좋았습니다. 댓글은 대환영입니다. 우리같이 공부합시다.

참고
https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/