JavaScript 익히기 #8 Callback Function

반복하는 일은 변하지 않고 공통적으로 수행하지만, 반복하면서 하는 일의 내용은 다르다.

// n번 만큼 어떤 일을 반복한다.
function repeat(n) {
    // i를 0에서 시작해서 n을 넘지 않을때 까지 출력한다.
    for (var i = 0; i < n; i ++) console.log(i);
}

// repeat 함수에 호출하는 console.log에 강하게 의존하고 있어 다른 일을 할 수 없다.

repeat(10)

// 0 1 2 3 4 5 6 7 8 9


// 홀수 만 출력하는 다른 일을 하고 싶어, 새로 함수를 정의한다.
function repeat1(n) {
    for (var i = 0; i< n; i++) {
        // i가 홀수 일때만 출력한다.
        if (i % 2) console.log(i)
    }
}

repeat1(10)

// 1 3 5 7 9

이와 같이 함수의 일부분만이 다르기 때문에 매번 함수를 새롭게 정의해야한다.
다음과 같은 문제를 함수를 합성하는 것으로 해결할 수 있다.
함수의 변하지 않는 공통 로직을 미리 정의해 두고, 경우에 따라서 변경되는 로직을 추상화하여, 함수 외부에서 함수 내부로 전달하면 된다.

function repeat2(n, f) {
    for (var i = 0; i< n; i++) {
        f(i); // i를 전달하면서 f를 호출한다.
    }
}

var logAll = function (i) {
    console.log(i);
}

// 반복 호출할 함수를 인수로 전달한다.
repeat2(5, logAll);

// 1,2,3,4,5

var logOdds = function (i) {
    if (i % 2) console.log(i)
}

// 반복 호출할 함수를 인수로 전달한다.
repeat2(5, logOdds);

// 1, 3

함수 f로 추상화를 하여, 외부에서 전달받도록 해서 repeat함수가 더이상 내부에 강하게 의존하지 않게 되어 외부에서 로직의 일부분을 함수로 전달받아 수행하므로 더욱 유연한 구조를 갖는다.

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수 콜백 함수(callback function) 라고 한다.

document.getElementById('myButton').addEventListener('click', function (){
    console.log('button clicked')
})

// 콜백 함수를 사용한 비동기 처리
// 1초 후에 메세지를 출력한다.
setTimeout(function () {
    console.log('1초 경과!')
}, 1000)

콜백 함수는 비동기처리(이벤트 처리 , Ajax 통신, 타이머 함수)에 활용되기도 한다.

소스코드