Callback function - MDN Web Docs Glossary: Definitions of Web-related terms | MDN

콜백

• JavaScript에서 비동기 동작을 처리하기 위한 가장 기본적인 방식은 콜백 함수를 이용하는 것이다.

콜백 함수의 정의

• 프로그래밍에서, callback이란 데이터나 reference로 저장되어, 다른 함수에 의해 실행되도록 설계된 함수를 말한다.
  • 즉 함수를 만들었는데 내가 이 함수를 지금 직접 실행하는게 아니라, 다른 함수의 argument로 넘기거나 객체의 프로퍼티/메소드로 저장해서 필요할때 알아서 실행되게 하는 경우, 우리는 콜백이라고 한다.
  • 인자로 넘길때 뿐 아니라 예를들어 event handling 시에 element.onclick = myFunc; 이런식으로 이벤트 프로퍼티에 할당하는 함수도 콜백 함수이다. 즉 중요한 것은 다른 함수/주체에 의해 실행되는 함수가 바로 콜백이라는 것이다.

문제 상황 ~ 비동기 동작을 처리하지 못하는 경우

function loadScript(src) {
  // <script> 태그를 만들고 페이지에 태그를 추가합니다.
  // 태그가 페이지에 추가되면 src에 있는 스크립트를 로딩하고 실행합니다.
  let script = document.createElement('script');
  script.src = src;
  document.head.append(script);
}

• 위와 같은 loadScript 함수가 있다고 해보자.

loadScript('/my/script.js'); // script.js엔 "function newFunction() {…}"이 있습니다.

newFunction(); // 함수가 존재하지 않는다는 에러가 발생합니다!

• ‘/my/script.js’ 파일에는 newFunction 함수가 정의되어 있다고 가정하자. 위 코드는 이 newFunction 함수를 loadScript 함수를 통해 로딩하여 실행시키고자 한다.
• 하지만 문제가 있다. JS 코드는 스크립트의 로딩이 완료되는 것을 기다리지 않는다는 것이다.
  • JS에서 스크립트나 모듈을 로딩하는 것은 non-blocking/asynchronous 동작이기 때문이다.
• 따라서 newFunction(); 부분은 스크립트 로딩이 완료되기 전에 실행되고, 이는 아직 정의되지 않은 함수이기 때문에, 오류가 발생하게 된다.

콜백으로 해결

• 우리는 “스크립트 로딩이 완료 되면” newFunction 함수 호출을 하도록 코드를 작성하고 싶다.

• 이런 경우 콜백 함수를 이용해 비동기적으로 동작을 처리할 수 있다.

  • 자바스크립트에서 콜백 함수는 다른 함수에 의해 호출되도록 설계된 함수를 뜻한다고 한다. (보통 함수의 인자 형태로 넘겨지는 경우가 많기 때문에 이런 함수를 콜백의 정의라고 설명하는 경우도 있지만, 예를들면 element.onclick = myFunc; 이런 식으로 다른 객체의 프로퍼티/메소드에 함수를 저장하는 경우도 콜백함수라고 한다. 즉 “다른 함수에 의해 실행되는 함수”가 핵심 개념이라고 볼 수 있다)
    • 그럼 일급 함수를 사용하는 프로그래밍 언어만 콜백 함수를 만들 수 있다고 볼 수 있으려나?
  • 콜백은 동기적으로 호출될 수도 있고 비동기적으로 호출될 수도 있다. 즉 콜백이라고 해서 무조건 비동기적인게 아니라는 것을 알아두자.
    • 콜백을 넘겨받은 함수가 다른 비동기적인 작업의 간섭 없이 콜백을 바로(return statement 전에) 호출하도록 설계된 경우에는 동기적으로 작동하는 것이고,
    • 콜백을 나중에(return statement 이후에) 호출하도록 설계된 경우에는 비동기적으로 작동하는 것이다.
  • 아무튼 우리는 loadScript에 콜백을 전달하여 콜백이 비동기적으로 호출되도록 해볼 것이다.

  function loadScript(src, **callback**) {
    let script = document.createElement('script');
    script.src = src;
  
    **script.onload = () => callback();**
  
    document.head.append(script);
  }
  

  • 두번째 매개변수로 콜백 함수를 받는 것을 확인할 수 있다.
  • 그리고 함수 내부에서 script.onload메소드에 ‘콜백 함수를 실행하는 익명함수’를 할당함으로써 “스크립트 로딩이 완료되면 콜백 함수를 실행하도록” 코드를 작성하였다.
  • 콜백 함수는 이런 식으로 구현된다는 것을 알 수 있었다.

  loadScript('/my/script.js', function() {
    // 콜백 함수는 스크립트 로드가 끝나면 실행됩니다.
    newFunction(); // 이제 함수 호출이 제대로 동작합니다.
    ...
  });
  

  • 그리고 이런 식으로 loadScript 함수를 호출하면 된다. 두번째 매개변수인 콜백함수 자리에 newFunction을 호출하고 있는 익명 함수를 넘겨주는 모습이다.

실제로 작동하는 외부 스크립트 로딩 예시

function loadScript(src, callback) {
  let script = document.createElement('script');
  script.src = src;
  script.onload = () => callback(**script**); // 이번에는 인자를 받는 모습
  document.head.append(script);
}

loadScript('<https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js>', 
	**script** => {
	  alert(`${script.src}가 로드되었습니다.`);
	  alert( _ ); // 스크립트에 정의된 함수
});

• 유명한 lodash 라이브러리를 스크립트로 로딩하고 있다.
• 이번에는 arrow function 형태로, script 매개변수를 받는 콜백 함수를 정의하여 넘겨주고 있는 모습이다.
  • 콜백함수 내부에서 _라는 함수를 사용하고 있는데, 해당 함수가 lodash 스크립트 내부에 정의가 되어 있는 함수이기 때문에, 로딩이 완료되고 나서 해당 함수를 정상적으로 호출할 수 있는 것이다.

에러 핸들링