[javascript] 콜백 함수란 ?

프로그래밍언어를 공부하다보면 필연적으로 등장하는 개념인 콜백 함수를 만나게 된다. 나 또한 콜백함수에 대한 개념이 제대로 정리되지 않은 채 그저 동기와 비동기처리를 위해 사용되는 기법이라고만 단순히 알고 있었다. 그렇기에 이참에 콜백함수에 대해서 정리해보려 한다. 

 

콜백함수란 ? 

 

콜백함수는 한 줄로 요약해서 "함수의 인자로 전달되는 함수입니다. " 라고 할 수 있겠다. 무슨 말인가 함은 우리가 함수를 더욱 잘게 쪼개어 함수가 이 기능도 저 기능도 되는 복잡한 괴물이 될 수 있는 것을 방지 할 수 있고  함수의 로직 실행시기를 조정 할 수 있다는 것이다. 

 

콜백함수가 될 수 있는 조건

 

1. 변수나 데이터 구조 안에 담을 수 있어야 한다. //자바스크립트는 변수나 구조체 , 객체등에 함수를 담을 수 있다. 

2. 파라메터로 전달 할 수 있다. 

3. 반환값으로 사용 될 수 있다. 

4. 런타임에 생성 될 수 있다. 

 

콜백함수의 예제 buble_sort

function bubleSort(array,anything){
    if(anything == null){
        for(var i = 0; i < array.length; i++){
            for(var j = 0; j < array.length-(i+1); j++){
                if(array[j] < array[j+1]){
                    let temp = array[j];
                    array[j] = array[j+1];
                    array[j+1] = temp;
                }
            }
        }
        console.log(array);
    }else{
        for(var i = 0; i < array.length; i++){
            for(var j = 0; j < array.length-(i+1); j++){
                if(array[j] > array[j+1]){
                    let temp = array[j];
                    array[j] = array[j+1];
                    array[j+1] = temp;
                }
            }
        }
        console.log(array);
    }
}

let array = [32,52,64,13,62,55,86];

bubleSort(array);

 

 

 

그래서 함수에서 비교하는 부분과 정리하는 부분을 분리시켜 생산성을 높이고, 코드를 깔끔하게 변신시켜보겠다. 

 

function ascd(a,b){
    if(a < b){
        return true;
    }else{
        return false;
    }
}

function desc(a,b){
    if(a>b){
        return true;
    }else{
        return false;
    }
}

function buble(array,func){
    for(i=0; i < array.length; i++ ){
        for(j = 0; j < array.length - (i+1); j++) {
            if(func(array[j] , array[j+1])){
                temp = array[j];
                array[j]=array[j +1];
                array[j+1]= temp;
            }
        }
        console.log(array);
    }
    
}

let array = [1,43,3,45,36,7,2,8]

buble(array,ascd) //[ 45, 43, 36, 8, 7, 3, 2, 1 ]
buble(array,desc) //[ 1, 2, 3, 7, 8, 36, 43, 45 ]

 

어떠한가 buble함수는 이제 받는 함수에 따라 같은 일을 수행만 하는 함수로 훨씬 코드가 간결해졌다. 

 

콜백 함수의 스코프

콜백함수의 특징으로는 인자로 전달 받은 함수의 스코프는 본래 가지고 있었던 스코프를 참조 한다는 것이다. 

 

var good = "hello";

function callback(){
    console.log(good);
}

function func(callback){
    var good = "good";
    callback();
} 
func(callback); // 결과는 hello 출력