JS 비동기 처리, 콜백 이해하기

📖동기와 비동기 (synchronous, asynchronous)

자바스크립트는 동기적인 언어입니다. 호이스팅이 된 이후부터 우리가 작성한 순서에 맞게 하나하나 동기적으로 실행합니다.

📌 호이스팅이란 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유호 범위의 최상단에 선언하는 것을 말합니다.

예를들어보겠습니다. 비동기의 setTimeout()함수는 우리가 지정한 시간이 지나면 callback함수를 호출합니다. TimeHandler함수를 콜백함수로 전달해주고 timeout 이라는 어느정도의 시간이 지나고 호출할건지 정해주는 인자들이 있습니다.

아래 예제와 같이 비동기의 setTimeout의 결과를 보면 1초후에 2라는 숫자를 콜백합니다. 따라서 3이 먼저 출력되고 2가 출력되는걸 확인할수 있습니다.

//동기;
console.log("1");
console.log("2");
console.log("3");

// 1
// 2
// 3

//비동기;
console.log("1");
setTimeout(function () {
  console.log("2");
}, 1000);
console.log("2");

// 1
// 3
// 2

그렇다면 콜백은 항상 비동기일때만 사용할가요? 그렇지 않습니다. 콜백도 두가지의 경우가 있습니다. 즉각적으로 동기적으로 실행하는 synchronous callback과 나중에 언제 실행될지 예츨할수 없는 asynchronous callback 두가지가 있습니다.

// Synchronous callback;
function printImmediately(print) {
  print();
}
printImmediately(() => console.log("hello"));

//Asynchronous callback;
function printWithDelay(print, timeout) {
  setTimeout(print, timeout);
}

printWithDelay(()=> console.log(async callback), 2000)

// 1
// 3
// hello
// 2
// async callback