자바스크립트의 Block/Non-Block, 동기(Sync)와 비동기(async)

블럭(Block)과 논블록(Non-Block)

• Block : 사전적 의미인 '막다'와 같이 프로그램이 실행의 제어를 막는다라는 의미를 가지며, 동시성을 가지고 있지 않아 이전 작업이 끝나기 전까지 다음 작업을 실행하지 않는다. 즉 제어권을 반환받기 전까지 기다린다.

• Non-Block : 제어권이 함수에게 넘어갔다가 제어권을 받은 함수가 실행된 후 즉시 제어권을 줬던 함수로 제어권을 반환하는 블록을 의미한다.

블럭과 논블럭은 제어권이 어디로 가는지에 대해 중점을 둔 개념이다.

동기(Synchronous)와 비동기(Asynchronous)

동기 :

• 제어권을 실행하고 즉시 돌려받는 것을 의미하며, 제어권으로 실행된 함수가 완료될 때까지 결과를 돌려받지 않고 제어권을 준 함수도 실행하지 않는 것을 의미한다.
• 작업 처리 순서가 엄격하게 지켜진다.
• 실행이 완료된 후 결과를 돌려받는다.
• 제어권으로 실행된 함수의 결과값을 기다린다.

비동기 :

• 특정 작업에 대한 진행 상황, 결과 처리를 제어권이 신경 쓰지 않는다.
• 동기와 비슷하지만 제어권이 반환된 함수에서 온 결과를 바로 처리하지 않는다.
• 비동기 함수를 처리해주기 위한 코드 = '콜백 함수'

동기와 비동기는 결과에 초점을 맞춘다.

Block/Non-Block와 동기/비동기 사용

Block/Sync

• Block이므로 제어권을 전달하고 실행을 멈춘다. 그리고 제어권을 받은 함수가 실행된다.
• Sync이기 때문에 제어권을 받고 반환했던 함수가 결과처리에 대한 요청을 보내고. 제어권을 전달 받은 함수가 실행이 끝나면 제어권을 리턴하고 결과 처리 에 대한 요청 또한 제어권을 준 함수로 리턴한다.

Non-Block/Sync

• Non-Block이기 때문에 제어권을 주고 제어권을 받은 함수가 실행이 되면 즉시 제어권을 리턴받는다.
• Sync이기 때문에 결과처리를 지속적으로 언제 오는지 확인하면서 결과에 대해 트래싱을 시도한다.
• 제어권을 받아 실행된 함수가 종료되면 결과값이 리턴되고 결과값이 리턴되면 제어권을 주고 리턴받았던 함수는 해당 결과에 대한 요청을 진행한다.

• 해당 그림에서는 결과처리 신호가 파랑색 선으로 되어있다.

Block/Async

• Block/Sync랑 기능이 똑같다.
• 결과 처리가 나올 때까지 다른 작업을 하지 않는다.
• 그러므로 잘못된 코딩인 경우에 많이 사용된다.

Non-Block/Async

• Non-Block이므로 제어권을 주고 제어권을 받은 함수가 실행이 되면 그 즉시 제어권을 리턴받는다.
• 제어권으로 실행된 함수가 실행이 되고 제어권을 주고 다시 받았던 함수도 실행이 된다.
• 제어권으로 실행된 함수의 결과에 대한 요청을 요청받았더라도 자신의 작업을 마무리한 후에 해당 결과의 요청을 받아 들인다.

• 해당 그림에서는 결과처리신호가 파랑색 선으로 되어있다.

Execution Context와 비동기 처리

• 자바스크립트는 싱글 스레드 방식
• 한번의 하나의 CallStack만 처리 가능하다.

  const a = () => {
    console.log('1'); 
  }
  const b = () => {
    console.log('2'); 
  }
  const c = () => {
    setTimeout( () => {
      console.log('3');
    }, 1000)
  }
  c();
  b();
  a();

// * 결과 *
// 2
// 1
// 3

• Call Stack : 현재 실행 중인 함수의 컨텍스트가 쌓이는 곳
• Web API : 브라우저 환경에서 제공되는 비동기 함수들
• Task Queue : 비동기 작업이 완료되면 해당 작업에 대한 콜백 함수가 여기에 추가되는 곳. Call Stack에 가기 위해 기다리는 곳
• Event Loop : 실행 컨텍스트 스택이 비어있을 때마다 TaskQueue에서 콜백 함수를 꺼내와 실행하기 위한 작업을 하는 곳