콜백 함수란?

*혼자 내용 정리를 위해 작성하는 글이라 정확하지 않은 정보가 포함되어 있을 수 있습니다.

function getData() {
    $.get('https://domain.com/products/1', function(response) {
        console.log(response);
    });
    console.log("hello!");
}

getData();

위의 코드를 실행했을 때 "hello"가 먼저 출력되고 ajax 통신으로부터 얻은 response가 이후에 출력될 것이다.

코드 순서로만 보면 "hello"가 나중에 출력돼야하지만 먼저 출력되는 이유는  javascript가 코드를 비동기 식으로 처리하기 때문이며 ajax 통신에는 delay가 존재하기 때문이다.

그런데 이미 "hello"가 출력되는 시점에서 "$.get()" 부분은 지나간 코드인데 어떻게 나중에라도 실행이 되는걸까? 이와 관련된 내용이 바로 callback함수이다. 그렇다면 위의 코드에서 callback함수는 무엇일까? 바로 "$.get()"에 parameter로써 존재하는 익명함수가 바로 callback함수이다. callback함수는 특정 함수에 parameter로 전달되는 형식이며 사용자에 의해 호출되지 않고 자신을 parameter로 사용하는 함수가 필요로 할 때 호출된다. 위의 경우는 ajax 통신으로 특정 결과 값을 받아온 시점(아무런 값도 받아오지 않은 경우엔 호출되지 않는다)에 callback함수(response를 출력하는 익명함수)가 호출되는 것이므로 "hello"가 출력되는 이후에 response가 출력되는 것이다.

 

즉, 정리하면 callback함수란 특정 함수의 parameter로 전달되며 개발자에 의해 호출되는 것이 아니라 parameter로 사용하는 함수에서 필요로 할 때 호출되는 함수이다. 일회성으로 사용될 경우 익명함수 형식으로 전달되며 반복되어 사용될 경우는 따로 정의하여 인자로 넘겨준다.

 

 

refs:

joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

자바스크립트 비동기 처리와 콜백 함수

opentutorials.org/course/2136/11861

콜백(callback) 함수 - 생활코딩