jQuery 047. callback 함수 (콜백 함수)

콜백함수는 함수내부의 처리 결과 값을 리턴하는데 주로 사용됩니다. 함수에서 사용되는 return문이 하는 기능을 용도에 맞게 바꾸는? 기능이라고 보시면 됩니다. 먼주 콜백함수의 기본적인 구조입니다.

 

#code 1-1

        //콜백 함수 구조.
        function 함수이름(){
            
            ... 함수 구현
            ... 함수 결과처리
            
        }

 함수의 구조는 #code 1-1 같이 생성합니다. 콜백함수는 위 구조에서도 '함수 결과처리' 부분에서 기능을 하게됩니다. 콜백함수를 이해하기 위해서는 return 의 기본적인 기능부터 이해해야 합니다. 

 

 #code 1-2

 	//return 함수
        function fnAdd(num1 ,num2){

            //함수 구현
            var result = num1 + num2;

            //함수 처리
            return result;
        }
        
        alert("fnAdd() 실행 " + fnAdd(5,5));

#code 1-2 는 두 숫자를 매개변수로 받아서 더하고, 결과값을 return 하는 변수입니다. 단순히 결과값을 리턴만 하고 있기 때문에, 함수의 결과값을 알림창으로 보여 주려면 alert() 으로 fnAdd() 함수를 호출하여야 합니다.

 

#code 1-3

        //callback 활용
        function callAlert(result){
            alert("fnAdd() 실행 " + result);
        }
        
        function callConsole(result){
            console.log("fnAdd() 실행 " + result);
        }

        function fnAdd(num1 ,num2 ,callback){

            //함수구현
            var result = num1 + num2;

            //함수 처리
            callback(result);
        }
        
        fnAdd(10,5,callAlert);
        fnAdd(10,5,callConsole);

 #code 1-3에서 fnAdd()는 #code 1-2과는 다르게 매개변수로 숫자 두 값과 함수를 매개변수로 받습니다. 먼저 callback 함수로 사용될 callAlert()을 생성합니다. callAlert()은 결과를 받아서, alert 창을 띄우는 역할을 합니다. 그리고 마찬가지로 callback 함수로 사용될 callConsole()을 생성합니다. callConsole()은 결과값을 받아 결과값을 console에 띄우는 역할을 합니다. 마지막으로 콜백함수를 활용하는 함수인 fnAdd()를 생성합니다. fnAdd()는 결과값을 매개변수로 받은 callback()함수를 활용하게 됩니다. 이렇게 콜백함수는 하나의 함수로, 어떤 콜백함수를 매개변수로 넣어주느냐에 따라 결과가 바뀔 수 있습니다.