동기식 처리 모델?

<aside> 👉🏿 간단히 정리하면 직렬적으로 코드를 실행하는 것.

순차적으로 실행되며 어떤 작업이 수행중이면 다음 작업은 대기.

</aside>

// 동기식 코드의 예시

function func1() {
  console.log('func1');
  func2();
}

function func2() {
  console.log('func2');
  func3();
}

function func3() {
  console.log('func3');
}

func1();

비동기식 처리 모델?

<aside> 👉🏿 간단히 말해 병렬적으로 코드를 실행하는 것.

코드가 종료되지 않은 상태더라도 다음 코드를 실행한다.

서버에서 데이터를 가져올 경우 서버로부터 데이터가 응답 될때까지 대기하지 않고 수행할 태스크를 계속 수행한다.

</aside>

<aside> 👉🏿 비동기식 처리 모델의 대표적 예

• DOM 이벤트 핸들러
• Timer 함수 (setTimeout, setInterval)
• Ajax 요청 </aside>

<aside> 👉🏿 아래 예시를 출력하면 setTimeout의 인터벌을 0 으로 설정해도 순서대로 출력되지 않는다.

비동기 함수이기 때문이다.

</aside>

function func1() {
  console.log('func1');
  func2();
}

function func2() {
  setTimeout(function() {
    console.log('func2');
  }, 0);

  func3();
}

function func3() {
  console.log('func3');
}

func1();

콜백 패턴의 단점