본문 바로가기
Language/Javascript

동기(Sync) & 비동기(Async)

by 노믹 2022. 12. 12.

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

일반적으로 "동기로 실행된다"라고 함은, 먼저 실행된 코드의 결과가 나올 때까지 대기하는 것을 말합니다.

  • 놀이기구를 생각하면 쉽습니다.
    정원이 30명인 놀이기구가 있다고 가정합니다.
    놀이기구를 한번 태우는데 약 5분이 걸린다고 가정하면 놀이기구를 막 태우기 시작한 시점에서는 대기자 모두 놀이기구에 탑승했던 사람들이 다 내리기 전까지는 탑승을 할 수 없습니다.
    이것은 놀이기구 탑승/하차동기적으로 관리된다고 볼 수 있습니다.

일반적으로 "비동기로 실행된다" 라고 함은, 실행된 순서와 관계 없이 결과가 나오는 것을 말합니다.

  • 맛집을 생각하면 쉽습니다.
    정원이 최대 30명인 맛집이 있다고 가정합니다.
    입장 순서는 선착순이고 퇴장 순서는 다 먹은 사람이 바로 나올 수 있습니다. 다 먹은 사람이 나오면 나온 사람 수만큼 다시 입장할 수 있습니다. 사람마다 먹는 시간은 모두 다릅니다.
    이것은 입/퇴장이 비동기적으로 처리된다고 볼 수 있습니다.

Blocking Model & Non-Blocking Model

  • Blocking Model이란, 코드의 실행이 끝나기 전까지 실행 제어권을 다른 곳에 넘기지 않아 다른 작업을 하지 못하고 대기하는 것을 말합니다.
  • Non-Blocking Model이란, 코드의 실행이 끝나지 않아도 실행 제어권을 다른곳에 넘겨 다음 코드가 실행될 수 있는 것을 말합니다.
  • 자바스크립트는 Async + Non-Blocking Model을 채용하여 현재 실행 중인 코드의 실행이 끝나지 않아도 다음 코드를 호출합니다.
  • 결론적으로 자바스크립트는 각 명령들이 순서대로 실행될 수 있게 구현되어 있지만, Non-Blocking Model에 의해 동기적 명령이 아닌 모든 함수는 비동기적으로 실행됩니다.

동기, 비동기의 차이

  • 제어권을 넘기면(Non-blocking) 다른 코드도 실행될 수 있으므로 비동기 처리가 가능하지만
  • 제어권을 넘기지 않으면(Blocking) 비동기 처리가 가능한 환경이어도 비동기 처리가 불가능합니다.

예시 ( setTimeout은 특정 시간 뒤에 함수를 실행해주는 역할입니다.)

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

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

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

// Print: Middle
// Last
// First
  • 예시 코드는 아래의 순서대로 실행됩니다.
    1. setTimeout(first, 1000) : 1초 뒤에 first() 함수 → console.log(’First’); 가 실행되도록 명령합니다.
    2. console.log('Middle'); : ‘Middle’ 문자열이 출력됩니다.
    3. console.log('Last'); : ‘Last’ 문자열이 출력됩니다.
    4. 1초가 지난 뒤 ‘First’ 문자열이 출력됩니다.
  • 만약 자바스크립트가 Blocking Model이었다면 위 예시 코드는 1초를 기다린 이후에 first() 함수를 먼저 실행하여 'First'를 출력한 뒤, 'Middle', 'Last' 순서로 출력했을 것입니다.

'Language > Javascript' 카테고리의 다른 글

비동기 함수 (Async Function)  (0) 2022.12.12
프로미스(Promise)  (0) 2022.12.12
JavaScript란?  (0) 2022.12.12
Javascript 기본문법  (0) 2022.11.21
[혼공스] Ch.09 클래스  (0) 2022.11.04