콜백 함수(Call Back)

1. 콜백 함수란?

function 함수이름(calback){
    ...
    callback(결과);
}

• 함수 내부의 처리 결과값을 함수 외부로 내보낼 때 사용
• 일종의 return 문과 비슷한 기능
• 특정 함수의 매개변수로 콜백 함수를 넘긴 후 처리 결과를 콜백 함수의 매개변수에 담아 콜백함수를 호출한다.
• 이 구조를 통해 로직 구현 부분과 로직 처리 부분을 나눠 코딩한다.
• 이에 따라 로직구현부분은 동일하고 로직처리부분을 다양하게 처리해야 하는 경우 유용히 사용 가능하다.

 

콜백 함수 사용 전:

function 함수이름(calback){
    //로직 구현 부분
    //로직 처리 부분
}함수이름();

 

콜백 함수 사용 후

function 함수이름(calback){
    //로직 구현 부분
    //로직 처리 부분
    callback();
}
 
함수이름(선택한 처리 함수);

 

 

2. 예제

<script>
    function calculator1(op, num1, num2){
        var result = "";
 
        switch(op){
            case "+" :
                result = num1 + num2;
                break;
            
            case "-" :
                result = num1 - num2;
                break;
 
            case "*" :
                result = num1 * num2;
                break;
 
            case "/" :
                result = num1 / num2;
                break;
 
            default :
                result = "지원하지 않는 연산자 입니다";
        }
 
        document.write("두 수의 합은" + result + "입니다.", "<br>");
    }
 
    function calculator2(op, num1, num2){
        var result = "";
 
        switch(op){
            case "+" :
                result = num1 + num2;
                break;
            
            case "-" :
                result = num1 - num2;
                break;
 
            case "*" :
                result = num1 * num2;
                break;
 
            case "/" :
                result = num1 / num2;
                break;
 
            default :
                result = "지원하지 않는 연산자 입니다";
        }
 
        document.write("정답은" + result + "입니다.", "<br>");
    }
 
</script>

 

• 위 코드를 콜백 함수를 이용하여 보다 효율적으로 짜보자.
• 로직구현부분과 로직처리부분이 각각 어떻게 나뉘는가?
  
  • 로직구현 : 사칙연산
  • 로직처리 : 출력
• 중복되는 사칙연산은 그대로 두고 출력부분을 콜백함수로 처리한다.

<script>
    function calculator(op, num1, num2, callback){
        var result = "";
 
        switch(op){
            case "+" :
                result = num1 + num2;
                break;
            
            case "-" :
                result = num1 - num2;
                break;
 
            case "*" :
                result = num1 * num2;
                break;
 
            case "/" :
                result = num1 / num2;
                break;
 
            default :
                result = "지원하지 않는 연산자 입니다";
        }
 
        callback(result);
    }
 
    function print1(result){
        document.write("두 수의 합은 = " + result + "입니다.", "<br>");
    }
 
    function print2(result){
        document.write("정답은 = " + result + "입니다.", "<br>");
    }
 
    calculator("+", 10, 20, print1);
    calculator("+", 10, 20, print2);
</script>

• 로직구현부분을 calculator함수내에 작성하고 로직처리는 print1과 print2 함수로 각각 작성했다.

 

3. return vs 콜백 함수

• 콜백함수를 이용하면 리턴값이 있는 함수구문을 대신 사용할 수 있습니다.

라고 책에는 설명되 있는데 return은 함수를 종료시키지만 콜백함수는 서브루틴이 끝나면 다시 돌아온다.

대체 어떤점에서 대신 쓸 수 있다는건지 모르겠다.

 

4. 동기 vs 비동기

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

 

4-1. 동기

• 함수가 호출된 후 끝날때까지 다음 구문을 실행하지 않고 대기하고 있는 경우

alert("안녕하세요");
document.write("alert() 동작이 끝나야 이 내용은 실행됩니다.");

 

4-2. 비동기

• 함수가 호출된 후 끝날때까지 기다리지 않고 바로 다음 구문을 실행하는 경우

var count = 1;
 
setInterval(function(){
    document.write("2. count = " + count);
}, 3000);
 
document.write("1. ajax() 동작이 모두 끝나지 않았어도 바로 실행됩니다.");

• setInterval()은 특정시간마다 첫번째 매개변수로 넘어간 콜백함수를 호출해주는 기능을 가진 자바스크립트 코어 라이브러리 함수 중 하나이다.
• setinterval() 함수가 실행되면 자바스크립트 엔진은 동기 함수와는 달리 3초를 기다리지 않고 바로 다음 구문인 document.write() 구문을 실행해 메시지가 출력된다. 이후 setInterval()로 넘어간 콜백함수는 3초 간격으로 실행된다.
• 콜백함수는 주로 비동기 함수의 결과값을 처리하기 위한 도구로 많이 쓰인다.

 

5. 콜백 함수의 실무 활용

• 실무에서 콜백함수는 아래와 같은 경우에 많이 사용한다.

 

5-1. 이벤트 리스너로 사용

$("#btnStart").click(function(){
    alert("클릭되었습니다.");
});

• jQuery에서 클릭과 같은 이벤트를 처리하기 위해 등록하는 이벤트 리스너로 콜백함수가 쓰인다.

 

5-2. 타이머 실행 함수로 사용

setInterval(function(){
    alert("1초마다 한 번씩 ");
}, 1000);

 

5-3. Ajax 결과값을 받을 때 사용

$.get("http://www.webdongne.com/test.php", function(){
    alert("정상적으로 서버 통신이 이뤄졌습니다.");
})

• 서버와 데이터를 주고받을 때 사용하는 jQuery Ajax 기능들에서 결과물을 받을 때 콜백 함수가 사용됩니다.

 

5-4. jQuery 애니메이션 완료

$("#target").animate({
    left : 100,
    opacity : 1
}, 2000, "easeOutQuint" , function(){
    alert("애니메이션이 완료되었습니다.");
});