Javascript Callback 함수 정보

개요

이전 글에서, 나는 자바스크립트의 동작 절차, 비동기 처리, 동기화 처리를 썼다.
비동기 처리를 이해하기 위해서는 가볍게 읽는 것을 권장합니다.
https://zenn.dev/redpanda/articles/ef719c7e592327
이번에 비동기 처리의 순서를 제어하기 위해 사용된 Callback 함수/Promisse/async와 await는 먼저 Callback 함수를 간단하게 요약하였다.

Callback 함수

Callback 함수는 문자 그대로 뒤에서 호출되는 함수입니다.
즉, 특정한 시간점에서 함수를 호출할 수 있다. 예를 들어 특정한 사건이 끝났다.
다른 함수에 의해 매개 변수로 받아들여져 함수 내부에서 실행됩니다.
Callback 함수를 사용하는 모드는 다음과 같습니다.

사용자 이벤트 처리

사용자가 언제 누를지 모르니까.

const el = document.getElementById("demo");
const onClick = () => {
  console.log("on Click!");
};

// click eventが発生したときに onClick関数を呼ぶ
el.addEventListener("click", onClick);

네트워크 응답 처리

예를 들어 API 처리가 있습니다.API가 언제 나올지 모르니까.

특정 시기의 처리

처리를 규정된 시간 내에 지연시키기 위해

//3秒が過ぎたらdemo要素のhtmlが変わる
setTimeout(myFunction, 3000);
function myFunction() {
  document.getElementById("demo").innerHTML = "Changed!!";
}

Callback hell

Callback 함수는 매개 변수로 받아들여지고 함수 내부에서 실행된다고 하는데 이것을 반복하면 삽입이 깊어진다

Callback hell은 Promise 또는 async/await로 해결합니다.

참고 자료

https://www.w3schools.com/js/js_asynchronous.asp