자바스크립트 콜백함수의 동기와 비동기 실행

동기적 실행

동기 (Synchronous)
: 어떠한 작업을 요청했을 때 그 작업이 종료될때 까지 기다린 후 다음 작업을 수행하는 방식

코드 예시

function fakeSetTimeout(callback, delay) {
  callback();
}

console.log("first");

fakeSetTimeout(function() {
  console.log("second");
}, 0);

console.log("third");

코드 결과

first
second
third

비동기적 실행

비동기 (Asynchronous)
: 어떠한 작업을 요청했을 때 그 작업이 종료될때 까지 기다리지 않고 다른 작업을 하고 있다가 요청했던 작업이 종료되면 다음 작업을 수행하는 방식

코드 예시

console.log("first");

setTimeout(() => {
   console.log("second");
}, 3000);

console.log("third");

코드 결과

first
third
second

setTimeout에 Timer 지정 3000에 의미는

3초뒤에 실행 (X)
3초뒤에 callback queue 삽입 (O)

즉, stack안에 실행주체들이 비워지면 event loop에 의해 callback queue에 대기중인 이벤트나 메서드들이 stack에 삽입된다.