동기 처리와 비동기처리

프로미스를 공부하기전에 동기처리와 비동기처리를 알고 넘어가야할거 같아 남긴돠~~!

이전에 공부했던 실행컨텍스트 얘기를 잠깐 보고 넘어가야할거 같다!

자바스크립트 엔진은 단하나의 실행 컨텍스트 스택을 갖는다!
이말은 함수를 실행할수 있는 창구가 하나밖에 없다!
최상위 요소인 실행 중인 실행 컨텍스트를 제외한 모든 실행 컨텍스트는 모두 실행 대기 중인 태스크들이다. 대기 중인 태스크들은 현재 실행중인 컨텍스트가 스택에서 제거되면 다음 대기중인 태스크가 실행된다.
자바스크립트 엔진은 한 번에 하나의 태스크만 실행할 수 있는 싱글 스레드 방식으로 동작한다.

sleep 함수는 일정시간이 경과한 이후에 골백함수를 호출한다.

function sleep(func, delay) {
  //Date.now() 현재 시간을 숫자(ms)로 반환한다.
  
  const delayUntill = Date.now() + delay;
  
  //현재 시간에 delay 를 더한 delayUntill이 현재 시간보다 작으면 계속 반복한다.
  
  while (Date.now() < delayUntill);
  
  // 일정시간이 경과한 이후에 콜백함수를 호출한다
  
  func();
}

function foo() {
  console.log("first");
}

function bar() {
  console.log("second");
}

//3초 이상 실행
sleep(foo, 3 * 1000);
//foo호출 => bar 호출
bar();

현재 실행중인 태스크가 종료할 때까지 다음에 실행될 태스크가 대기하는 방식을 동기처리 라고 한다. 동기 처리 방식은 태스크를 순서대로 하나씩 처리하므로 실행 순서가 보장된다는 장점이 있지만, 앞선 태스크가 종료할 때까지 이후 태스크들이 블로킹 되는 단점이 있다.

//sleep 함수는 일정시간이 경과한 이후에 골백함수를 호출한다.
function sleep(func, delay) {
  //Date.now() 현재 시간을 숫자(ms)로 반환한다.
  const delayUntill = Date.now() + delay;
  //현재 시간에 delay 를 더한 delayUntill이 현재 시간보다 작으면 계속 반복한다.
  while (Date.now() < delayUntill);
  // 일정시간이 경과한 이후에 콜백함수를 호출한다
  func();
}

function foo() {
  console.log("first");
}

function bar() {
  console.log("second");
}

//비동기
setTimeout(foo, 3 * 1000);
bar();

위 함수는 setTime 함수 이후의 태스크를 블로킹 하지 않고 곧바로 실행한다. 이처럼 현재 실행중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하는 방식을 비동기 처리 라고 한다.

동기와 비동기 처리의 대해 장점과 단점을 보자면 동기처리는 순서대로 하나씩 처리하므로 실행 순서가 보장되지만 앞선 태스크가 종료할 때 까지 이후 태스크들이 블로킹 되는 단점이 있었고 비동기처리는 실행중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 곧바로 실행하므로 블로킹이 발생하지 않는다는 장점이 있지만 태스크의 실행 순서가 보장되지 않는 단점이 있다.