자바스크립트의 콜백(Callback)과 비동기

자바스크립트의 콜백(Callback)과 비동기

콜백함수는 주로 함수 내부의 처리결과값을 함수 외부로 내보낼 때 사용한다.

function 함수명(callback) {
    callback(결과)
}

콜백 함수를 사용하는 구조를 보면 위의 문법처럼 특정 함수의 매개변수 값으로 콜백 함수를 넘긴 후 처리 결과를 콜백 함수의 매개변수에 담아 콜백 함수를 호출하는 구조를 가지고 있다. 이 구조를 사용하면 로직 구현부분과 로직 처리부분을 나누어 코딩할 수 있게 된다. 일반적으로 두 수를 더하는 함수를 만들려고 한다면 아래와 같다.

function plus(num1, num2) {

    return num1 + num2;
}
console.log(plus(1,2));

하지만 로직 구현부분(더하기)와 로직 처리부분(출력)을 나누기 위해 콜백을 사용할 경우 아래와 같이 사용할 수 있다.

function callBack_plus(num1, num2, callback) {

    callback(num1 + num2);
}

function result(result) {
    console.log("두 수의 합은 " + result + " 입니다.");
}

callBack_plus(3, 3, result);

위의 예제는 설명을 위한 예시이다. 두 예제는 실행 결과는 동일하지만 단순한 처리는 콜백보단 리턴을 이용하는게 효율이다. 

콜백 함수를 사용해야 하는 경우는 처리 부분이 구현 부분과 분리되어야 하는 경우나 구현 부분은 하나로 하고 처리 부분을 다양하게 만든 후 실행 시에 연결해서 사용하는 경우에 적합하다.

---

콜백함수와 비동기

콜백 함수를 확실히 이해하기 위해서는 동기와 비동기에 대한 개념을 알아둬야 한다.

여기서 비동기를 알아야 하는 이유는 콜백 함수가 주로 비동기 함수의 결과값을 처리하기 위한 도구로 많이 사용된다.

비동기 처리의 사례

//이벤트 리스너로 사용
$("#btn").click(function() {
    alert("click");
});

//타이머 실행 함수로 사용
setInterval(function() {
    alert("1초마다 실행");
}, 1000)

//ajax 결과 값을 받을 때 사용
$.get('http://ktko.tistory.com/test.jsp', function() {
    alert('테스트 성공');
})

//jQuery 애니메이션 사용
$("ani").animate({
    left : 200,
    opacity : 1
}, 2000, "easeOutQuint", function() {
    alert("애니메이션 성공");
});

비동기 처리 시 문제가 있다.

아래 예제에서 aJax를 이용하여 서버에서 응답 받아온 결과를 result 변수에 저장하여 return한다. 

하지만 return한 결과는 undefined이다. 왜 undefined일까.?

서버에서 응답 받아온 결과를 기다려 주지 않고 함수에서 return해 버리기 때문에 undefined가 발생한다. 

function requestServer() {
    var result;

    $.get("http://ktko.tistory.com/test.jsp?name=ktko&age=30", function(response) {
        result = response;
    });

    return result;
}
console.log(requestServer()); //undefined

콜백을 이용하여 비동기 처리 해결

서버에서 받아온 응답 결과를 콜백함수에 넘겨주어 실행한다.

function requestServer(callback) {
    $.get("http://ktko.tistory.com/test.jsp?name=ktko&age=30", function(response) {

        callback(response);
    });
}

requestServer(function(result) {
    console.log(result);
});

예제와 설명 출처

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