
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 함수에 대해서 알아봤습니다.
감사합니다.
< 목록으로 돌아가기