JavaScript Callback 이해하는 방법

2023-03-03

자바스크립트에서 많은 함수들은 비동기 코드를 지원해서 해당 함수가 지금 시점에 시작하더라도 나중에 끝날 수 있도록 지원합니다.

먼저 웹사이트의 head 태그에 script 태그를 넣고 로드할 수 있는 loadscript를 살펴 보겠습니다.

// javascript
function loadScript(src) {
  let script = document.createElement('script')
  script.src = src
  document.head.append(script)
}

loadScript('/my/script.js')

loadScript('/my/script.js') 바로 다음에 newFunction 함수를 호출한다면 에러가 납니다.

그 이유는 함수가 로딩과 동시에 실행되는 것이 아니기 때문입니다.

// javascript
loadScript('/my/script.js')
newFunction();

그래서 loadScript가 로드가 끝나면 loadScript로 로드한 script의 함수 newFunction()을 호출할 수 있도록 callback을 사용합니다.

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

그리고 함수를 호출할 때는 다음과 같이 사용합니다.

// javascript  
loadScript('/my/script.js', function () {newFunction()})

전체 코드를 보면 다음과 같습니다.

// javascript
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(`Cool, the script ${script.src} is loaded`);
})

이렇게 JavaScript의 Callback 함수에 대해서 알아봤습니다.

감사합니다.