CallBack(콜백)함수 이해하기

자바스크립트의 변수에는 숫자나 문자열 같은 데이터, 그리고 중괄호를 이용해 만든 모든 객체뿐 아니라 함수도 할당할수 있다. 이렇게 변수에 함수를 할당할수 있다는 특징은 함수를 호출할 때 다른 함수를 파라미터로 전달하거나 함수 안에서 또 다른 함수를 만들어 반환할 수 있습니다.

함수를 호출했을 때 또 다른 함수를 파라미터로 전달하는 방법

함수를 파라미터로 전달하는 경우는 대부분 비동기 프로그래밍 방식으로 코드를 만들 때 입니다. 예를들어 더하기 함수를 실행한 후 결과 값이 반환될 때 까지 기다리지 않고 그다음 코드를 실행하려면 비동기 방식으로 코드를 만들어야 합니다. 즉, 더하기 함수를 실행하는데 시간이 걸릴 수 있기 때문에 그 다음 코드를 바로 실행합니다. 그리고 나서 연산이 끝났을 때 파라미터로 전 달한 함수가 실행 될 수 있다면 그시점에 결과를 처리할 수있으므로 효율적인 프로그램을 만들 수 있습니다. 이때 파라미터로 전달되는 함수를 콜백함수라고 합니다. 콜백함수는 함수가 실행되는 중간에 호출되어 상태정보를 전달하거나 결과값을 처리하는데 사용됩니다.

ex) 버튼에 마우스 클릭이 발생되었을 때 버튼을 비활성 시키는 예

ex) 버튼을 10번 클릭하면 "완료되었습니다."라는 메시지를 checkCount()에서 처리하지 말고

콜백함수를 이용해 분리해주세요.

$(document).ready(function(){
    checkCount(showMessage);
});
 
function showMessage(){
    alert("완료되었습니다.");
}
 
function checkCount(callback){
    var count=0;
    $("#btnStart").click(function() {
        count++;
        if(count>=10)
            callback();
    })
}

#18.04.04 추가

콜백함수는 주로 함수 내부의 처리 결과값을 함수 외부로 내보낼 때 사용함 / return 문과 비슷