[ONEBITE-REACT] JS 기본 - 콜백 함수 (Callback Function)

의미

자신이 아닌 다른 함수에 인수로써 전달된 함수를 의미한다.
예시를 봐야 이해가 빠르다.

function main(value) {
    value();
}

function sub() {
    console.log("sub");
}

main(sub); // "sub"

코드해석
처음 function에서 main()이라는 함수를 선언하고 매개변수로 (value)를 담았다.
그리고 main()이라는 함수를 실행하면 value();가 실행되도록 했다.

다음 function에서 sub()라는 함수를 선언하고 매개변수는 아무 것도 없다.
그리고 sub()라는 함수를 실행하면 콘솔에 "sub"가 출력되도록 하였다.

그리고 마지막에 main()이라는 함수를 실행하는데 value라고 만든 파라미터에 sub함수 자체를 아규먼트로 담았다.
sub()함수는 실행하면 콘솔에 "sub"를 출력하기 때문에 main()함수를 실행하면
결과적으로 콘솔에 "sub"가 출력된다.

즉 위 코드를 보면 sub()라는 함수가 마치 다른 함수에 아규먼트(인수)로 전달되었다.
이런 형태를 콜백 함수라 한다.

특징

함수 표현식으로도 콜백 함수 가능

function을 다른 function의 인수로 쓰는 것 외에도 함수 표현식으로 함수를 선언하고,
이것을 콜백함수로 사용하는 것도 가능하다.

function main(value) {
    value();
}

const sub = function sub(){
    console.log("sub");
}

main(sub);

그리고 함수 표현식에서는 함수명을 사용하지 않는 익명함수의 사용도 허용하기 때문에 아래와 같이
함수명을 생략하고 익명으로 사용해도 된다.

function main(value) {
    value();
}

const sub = function() { // 함수명을 넣지 않았음.
    console.log("sub");
}

main(sub);

더 나아가 함수 표현식이 사용이 가능하니 화살표 함수로 축약하는 것도 가능하다.
화살표 함수는 function을 지우고, () 소괄호와 {} 중괄호 사이에 => 화살표를 넣는다.
만약 중괄호 안에서 실행되는 함수가 return이 전부라면 중괄호와 return을 지워도 된다.

const sub = () => {
    console.log("sub");
}

활용

코드를 작성하다 보면 비슷한 기능을 하는 함수를 계속해서 추가해야 하는 경우가 발생한다.
이런 경우 거의 비슷한 기능이고 일부 숫자만 바뀌게 되는데, 그 코드의 양이 길다면 전체적으로 코드가
무거워지고 지저분해지게 된다.
이럴 때 콜백 함수를 사용하면 중복을 제거하고 코드를 간결하게 바꿀 수 있다.

아래와 같은 함수를 만들었다고 가정해보자.

function repeat(count) {
    for (let idx = 1; idx <= count; idx++) {
        console.log(idx);
    }
}

repeat(5); // 1, 2, 3, 4, 5

코드해석*
repeat라는 함수를 선언하고 매개변수로 count를 담도록 했다.
repeat라는 함수를 실행하면 for 반복문을 실행하게 되는데, idx라는 변수를 선언하고 초기값으로 1을 담았다.
그리고 repeat 함수의 매개변수의 인수로 들어오는 숫자와 idx의 값이 같거나 작으면 idx의 값을 한 단계 증가시키도록 하였다.
그리고 콘솔에 idx의 값을 출력하게 하였다.
이후 repeat 함수를 실행시키면서 인수로 5를 넣었고, 위 for 반복문이 idx가 최초 1일 때부터 시작해서 5가 되는 순간까지 작동하고 6이 되는 순간 반복문이 멈추니 콘솔에는 1부터 5까지 출력되게 된다.

그런데 이와 같은 함수와 비슷한 기능을 하지만 콘솔에 출력할 때 idx 값에 * 2를 하는 함수를 하나 더 만들고 싶다고 가정하자.
그러면 코드 전개가 거의 유사한 코드를 하나 만들고 다른 함수명으로 만들어서 거의 복사-붙여넣기 수준의 반복되는 코드를 작성하게 된다.

function repeat(count) {
    for (let idx = 1; idx <= count; idx++) {
        console.log(idx);
    }
}

function repeatDouble(count) {
    for (let idx = 1; idx <= count; idx++) {
        console.log(idx * 2); // *2를 추가함
    }
}

repeat(5); // 1, 2, 3, 4, 5
repeatDouble(5); // 2, 4, 6, 8, 10

이렇게 구조가 거의 흡사한 코드를 반복해서 추가로 선언해야 할 때 콜백 함수를 사용한다.
콜백 함수를 사용하는 방법은 아래와 같다.

1. 매개변수 안에 새로운 매개변수를 추가한다.
2. 콘솔에 idx를 바로 출력하는 것이 아니라 콜백함수를 호출하고 콜백함수의 인수로 idx값이 들어가게 해준다.
3. repeat 함수를 실행하면서 repeat 함수의 매개변수가 2개가 되었으니, 5라고 되어 있는 인수를 하나 더 추가해준다.
   • 추가하는 인수는 함수를 바로 선언해주는데, 함수의 내용은 idx를 인수로 받고, 콘솔에서도 idx를 출력하도록 해준다.
4. 필요하다면 화살표 함수로 코드를 간결하게 수정해준다.
   위에서 구조가 흡사한 함수 선언이 반복 되었던 것을 위 과정으로 수정해보도록 하자.

function repeat(count, callback) {
    for (let idx = 1; idx <= count; idx++) {
        callback(idx);
    }
}

repeat(5, function myFunction(idx) {  
    console.log(idx);  
}) // 1, 2, 3, 4, 5 출력

코드해석
repeat라는 함수를 선언하고 count라는 매개변수와 callback이라는 매개변수를 설정했다.
repeat 함수가 실행되면 for 반복문이 실행되는데 반복문의 내용은 idx라는 변수를 선언하고,
idx의 값이 count에 할당되는 인수의 값과 같거나 작아질 때까지 idx의 값을 한 단계 증가시키고,
callback 함수를 실행한다. 그런데 이 callback 함수는 idx의 값을 받는다.

repeat라는 함수를 실행시키는데 count의 인수로 5를 할당했고, 다른 인수로는 myFunction이라는 함수를 선언하고
이 함수의 매개변수로 idx의 값을 받도록 했다. 그리고 이 함수가 실행되면 콘솔에 idx 값을 출력하도록 했다.
count에 5를 넣었으니, 위 repeat라는 함수에서 count는 5, idx 초기값은 1로 설정되어 함수가 반복되어 실행된다.

위 코드에서 myFunction()은 익명 함수로 생략 가능하니 아래와 같이 함수명을 생략해서 간결하게 만들 수 있다.

function repeat(count, callback) {  
    for (let idx = 1; idx <= count; idx++) {  
        callback(idx);  
    }  
}

repeat(5, function (idx) {  
    console.log(idx);  
}) // 1, 2, 3, 4, 5 출력

그리고 더 간단하게 만들기 위해 function을 지우고 소괄호와 중괄호 사이에 화살표를 넣어 화살표 함수로 표현할 수 있다.

function repeat(count, callback) {
    for (let idx = 1; idx <= count; idx++) {
        callback(idx);
    }
}

repeat(5, (idx) => {
    console.log(idx);
}) // 1, 2, 3, 4, 5 출력

이 상황에서 idx값에 * 를 한 더블 값이 필요하다면, repeat를 또 실행시켜주고 콘솔에 출력되는 repeat의 idx값에 * 2를 해주면 된다.

function repeat(count, callback) {
    for (let idx = 1; idx <= count; idx++) {
        callback(idx);
    }
}

repeat(5, (idx) => {
    console.log(idx);
}) // 1, 2, 3, 4, 5 출력

repeat(5, (idx) => {
    console.log(idx * 2);
}) // 2, 4, 6, 8, 10 출력