동기와 비동기 개념과 블로킹과 논블로킹의 개념은 서로 다른 개념입니다.

동기와 비동기의 차이

동기와 비동기의 차이는 작업 완료 여부에 대하여 신경을 쓰냐,안쓰냐 여부의 차이입니다.

동기 처리

function a() {
  let result = 0;
  for (let i = 0; i < 100; i++) {
    result += i;
  }
}

function b() {
  let result = 0;
  for (let i = 0; i < 100000; i++) {
    result += i;
  }
}

function c() {
  let result = 0;
  for (let i = 0; i < 100; i++) {
    result += i;
  }
}

a()
b()
c()

a,b,c라는 함수가 차례대로 호출되고 있다고 가정했다고 해봅시다.

동기 처리 같은 경우에는 a,b,c가 차례로 실행되야합니다.
b 함수가 오랜 작업 시간이 걸린다 해도 말이죠.
때문에 c 함수는 b 함수의 작업이 끝난 뒤 작업을 시작할 수 있기 때문에 계속해서 b함수의 작업 완료 여부에 대하여 신경을 써야합니다.

비동기 처리

function a() {
  let result = 0;
  for (let i = 0; i < 100; i++) {
    result += i;
  }
  console.log("a 함수 실행 완료");
}

function b() {
  let result = 0;
  for (let i = 0; i < 100000; i++) {
    result += i;
  }
  console.log("b 함수 실행 완료");
}

function c() {
  let result = 0;
  for (let i = 0; i < 100; i++) {
    result += i;
  }
  console.log("c 함수 실행 완료");
}

a();
setTimeout(() => {
  b();
}, 1000);
c();

비동기 처리 같은 경우에는 a,b,c가 실행되었을 때, 동기 처리와 달리 c함수는 b함수의 작업 완료 여부를 기다리지 않습니다.

c함수는 b 함수의 작업 완료 여부를 신경쓰지않고 바로 실행됩니다.
그리고 b 함수는 작업에 대한 처리 결과를 콜백 함수를 넘겨받습니다.

이처럼 동기와 비동기의 차이는 다른 작업 완료 여부에 신경을 쓰냐 안쓰냐의 차이입니다.

블로킹과 논블로킹의 차이

블로킹과 논블로킹의 차이는 제어권을 넘겨주는 시기의 차이에 있습니다.

  console.log("Exeuting b function..");
}

function a() {
  console.log("Exeuting a function..");
  b();
  console.log("Keep exeuting a function..");
}

블로킹

a,b 함수라는 두 함수가 있다고 가정해봅시다.
b함수는 a 함수 내부에서 호출되고 있습니다.

블로킹의 경우 이 때 a함수는 제어권을 가지고 있다가 b 함수가 호출되면 제어권 b함수에 넘겨줍니다. 그리고 b 함수가 완료되었을 때 a 함수는 제어권을 다시 돌려받습니다.

논블로킹

이와 달리 논블로킹의 경우는 b 함수가 호출된다하여도 a 함수는 제어권을 바로 돌려받고 자신의 코드를 계속 실행합니다.

이렇게 블로킹과 논블로킹의 차이는 제어권을 언제 넘겨주는냐의 차이에 있습니다.