[Javascript] Callback에 대한 이해

javascript에서 Callback에 대한 이해

 

javascript는 동기적인(synchronous)언어이다
작업을 실행한 후에 완료가 된 후에 다음 작업을 처리 한다.

즉 코드를 적은 순서대로 작동이 된다.

비동기적인 처리를 위한 방법들이 존재하기는 하지만 ( async, await, promise)
일단 동기/비동기 처리의 이해를 위해 callback function에 대한 이해를 제대로 해보기로 한다.

 

CallBack 함수란 요청을 보내고 돌려받는 함수이다.

 

 

 

 

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

예를들어 위와 같이 ./load.js파일을 js상에서 불러오는 코드를 작성해본다.

 

[load.js 파일의 내부코드]

// load.js

alert('Load completed');

function secondLoad(){
    alert('Second load');
}

load.js파일의 내부에는 기본적으로 alert를 실행하는 코드가 있기때문에 

해당 파일을 불러올 경우 alert창에 Load completed이 나타난다.

 

로드가 완료되면 secondLoad 를 실행하고싶으면 어떻게 하면 될까?

function loadScript(src){
    let script = document.createElement('script');
    script.src= src;
    document.head.append(script);
}
loadScript('./load.js'); //load.js안에는 secondLoad(){...}가 있는 상태

secondLoad(); // 에러 발생 secondLoad is not defined

단순하게 loadScript() 아래에 secondLoad()를 불러오면 될까?

하지만 위 코드를 실행하면 secondLoad is not defined 라는 에러가 발생한다.

 

왜일까? 이때 스크립트는 비 동기적으로 실행되기 때문이다.

로딩은 바로 시작되지만 실행은 함수가 끝난후에 진행된다.

즉 loadScript('./load.js')아래의 코드들은 스크립트의 로딩이 종료될 때 까지 기다려주지 않고 실행된다.

 

 

 

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

loadScript('./load.js', () =>{
    secondLoad(); // 콜백함수로 secondLoad함수 실행
});

스크립트의 로딩이 끝났는지 확인을 하고 실행을 하려면

callback함수를 추가하면 된다.

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

loadScript('./load.js', (script) =>{
    alert('Second' + script.src);
});

callback함수를 이용하여 전달할 인자를 추가할 수 있다.

 

callback으로 에러처리(오류 우선 콜백)

스크립트 로딩이 실패했을 경우 그에 맞는 에러를 표시하고 싶다면?

 

function loadScript(src, callback){
    let script = document.createElement('script');
    script.src= src;
    script.onload = () => callback(null, script); 
    script.onerror = () => callback(new Error("error"));
    document.head.append(script);
}

loadScript('./load.js', (error, script) =>{
    if(error){
        //에러 발생 시 코드
    }else{
       // 정상 작동 시 코드
    }
});

오류 우선 콜백을 사용하여 단일 콜백 함수에서 에러 케이스와 성공 케이스 모두를 처리할 수 있다.