동기(Sync)와 비동기(Async)

동기(Sync)와 비동기(Async)에 대한 개념

• 일반적으로 "동기로 실행된다" 라고 함은, 먼저 실행된 코드의 결과가 나올때까지 대기하는것을 말합니다.
• 놀이기구를 생각하면 쉽습니다.
  정원이 30명인 놀이기구가 있다고 가정합니다.
  놀이기구를 한번 태우는데 약 5분이 걸린다고 가정하면 놀이기구를 막 태우기 시작한 시점에서는 대기자 모두 5분이 지나 이미 놀이기구에 탑승했던 사람들이 다 내리기 전까지는 탑승을 할 수 없습니다.
  이것은 놀이기구 탑승/하차가 동기적으로 관리된다고 볼 수 있습니다.
• 일반적으로 "비동기로 실행된다" 라고 함은, 실행된 순서와 관계 없이 결과가 나오는것을 말합니다.
• 정원이 최대 30명인 맛집이 있다고 가정합니다.
  입장 순서는 선착순이고 퇴장 순서는 다 먹은 사람이 바로 나올 수 있습니다. 다 먹은 사람이 나오면 나온 사람 수 만큼 다시 입장 할 수 있습니다. 사람마다 먹는 시간은 모두 다릅니다.
  이것은 입/퇴장이 비동기적으로 처리된다고 볼 수 있습니다.
  

Blocking Model & Non-Blocking Model

• Blocking Model이란, 코드의 실행이 끝나기 전까지 실행 제어권을 다른곳에 넘기지 않아 다른 작업을 하지 못하고 대기하는 것을 말합니다.
• Non-blocking Model이란, 코드의 실행이 끝나지 않아도 실행 제어권을 다른곳에 넘겨 다음 코드가 실행될 수 있는것을 말합니다.
• 동기, 비동기와 뭐가 다른걸까?
  • 제어권을 넘기면(Non-blocking) 다른 코드도 실행될 수 있으므로 비동기 처리가 가능하지만 제어권을 넘기지 않으면(Blocking) 비동기 처리가 가능한 환경이어도 비동기 처리가 불가능합니다.
• 자바스크립트는 Async + Non-blocking Model을 채용하여 현재 실행중인 코드의 실행이 끝나지 않아도 다음 코드를 호출합니다.
• 결론적으로 자바스크립트는 Non-blocking model을 가지며 각 명령이 순서대로 실행될 수 있게 구현되어 있지만, Non-blocking model에 의해 명령이 아닌 모든 함수는 비동기적으로 실행됩니다.
• 예시 (setTimeout은 특정 시간 뒤에 함수를 실행해주는 역할입니다.)
  

function first() {
  console.log('First');
}

setTimeout(first, 1000); // 1000ms(1초) 뒤에 first 함수를 실행해준다.

console.log('Middle');
console.log('Last');

// Print: Middle
// Last
// First

• 만약 자바스크립트가 Non-blocking model이 아니었다면 위 코드는 1초를 기다려서 first 함수를 먼저 호출하여 'First'를 출력한 뒤, 'Middle', 'Last' 순서로 출력해야 합니다.