자바스크립트 콜백(callback)함수에 대해 알아보자~~

안뇽하세여 오늘은 자바스크립트 콜백함수에 대해 자세히 파헤쳐봅시당 ^^!

 

자바스크립트 콜백(callback) 함수

일단 콜백함수가 무엇인지 한 번 살펴보죠😎

 

🔙콜백 함수

콜백 함수는 다른 함수에 인자로 전달되어, 그 함수의 작업이 끝난 후에 호출되는 함수를 말합니다.
콜백 함수는 자바스크립트에서 비동기 처리를 구현하는 가장 일반적인 방법 중 하나입니다. 아래의 주석부분을 콜백 함수로 표현한 것입니다.

 

// function func1(){
//     document.write("1.함수 실행");
// }
// function func2(){
//     document.write("2.함수 실행");
// }
// func1();
// func2();

function func(){
    document.write("2.함수 실행");
}
function callback(str){
    document.write("1.함수 실행");
    str();
}
callback(func);

결과 : 1. 함수 실행 2. 함수 실행

 

추가 설명

콜백 함수는 비동기 처리뿐만 아니라, 이벤트 처리(event handling) 등에서도 사용됩니다. 콜백 함수를 사용하면 함수 간의 결합도(coupling)를 낮출 수 있으며, 코드의 재사용성을 높일 수 있습니다.
하지만, 콜백 함수가 중첩(nesting)되는 경우에는 코드의 가독성이 떨어지고, 콜백 지옥(callback hell)이라는 문제가 발생할 수 있습니다

🔙콜백 함수(반복문)

콜백 함수는 다른 함수에 인자로 전달되어, 그 함수의 작업이 끝난 후에 호출되는 함수를 말합니다.
callback() 함수는 num이라는 매개변수를 받아서 1부터 10까지 반복하면서 num에 전달된 함수를 호출하고 있습니다.

function func(index){
    console.log("함수가 실행되었습니다." + index);
}
function callback(num){
    for(let i=1; i<;=10; i++){
        num(i);
    }
}
callback(func);

결과 :

함수가 실행되었습니다.1
함수가 실행되었습니다.2
함수가 실행되었습니다.3
함수가 실행되었습니다.4
함수가 실행되었습니다.5
함수가 실행되었습니다.6
함수가 실행되었습니다.7
함수가 실행되었습니다.8
함수가 실행되었습니다.9
함수가 실행되었습니다.10

 

🔙콜백 함수(동기/비동기)

동기적으로 콜백 함수를 호출하면, 해당 함수의 실행이 끝날 때까지 다음 코드의 실행을 멈춥니다. 이는 즉시 값을 반환하는 함수와 달리, 콜백 함수를 실행하는 함수가 값을 반환할 때까지 기다리는 것을 의미합니다.

비동기적인 콜백 함수는 비동기 작업이 완료되면 즉시 실행되지 않을 수 있으며, 따라서 다른 작업을 수행할 수 있습니다. 비동기 작업이 완료되면 콜백 함수가 실행되고, 결과를 처리합니다. 이러한 비동기 작업은 대개 콜백 함수를 인수로 사용하는 함수로 처리됩니다.

//01
function funcA(){
    console.log("funcA가 실행되었습니다.");
}
function funcB(){
    console.log("funcB가 실행되었습니다.");
}

funcA();
funcB();

//02
function funcA(){
    setTimeout(() => {
        console.log("funcA가 실행되었습니다.");
    }, 1000)
}
function funcB(){
    console.log("funcB가 실행되었습니다.");
}
funcA();
funcB();

//03
function funcA(callback){
    setTimeout(() => {
        console.log("funcA가 실행되었습니다.");
        callback();
    }, 1000);
}
function funcB(){
    console.log("funcB가 실행되었습니다.");
}
funcA(function(){
    funcB();
});

결과: 

//01
funcA가 실행되었습니다.
funB가 실행되었습니다.

//02
funcB가 실행되었습니다.
funcA가 실행되었습니다.

//03
funcA가 실행되었습니다.
funB가 실행되었습니다.

 

콜백 지옥😈

function funcA(callback){
    setTimeout(() => {
        console.log("funcA가 실행되었습니다.");
        callback();
    }, 1000);
}
function funcB(callback){
    setTimeout(() => {
        console.log("funcB가 실행되었습니다.");
        callback();
    }, 1000);
}
function funcC(callback){
    setTimeout(() => {
        console.log("funcC가 실행되었습니다.");
        callback();
    }, 1000);
}
function funcD(){
    setTimeout(() => {
        console.log("funcD가 실행되었습니다.");
    }, 1000);
}
funcA(function(){
    funcB(function(){
        funcC(function(){
            funcD();
        });
    });
});

콜백 지옥(Callback Hell)은 비동기 처리를 위해 콜백 함수를 연속해서 사용할 때 발생하는 코드의 복잡도가 증가하여 가독성이 저하되는 현상입니다.

 

결과 : funcA가 실행되었습니다.

funcB가 실행되었습니다.

funcC가 실행되었습니다.

funcD가 실행되었습니다.

 

추가 내용

동기적인 콜백 함수를 사용하면 코드의 실행 순서를 보장할 수 있으므로, 복잡한 작업을 수행할 때 유용합니다. 그러나 동기적인 콜백 함수를 사용하면 실행 속도가 느려질 수 있으므로, 비동기적인 콜백 함수를 사용하여 코드의 실행 속도를 높일 수 있습니다.

비동기적인 콜백 함수를 사용하면 대규모 애플리케이션에서 코드의 실행 속도를 높일 수 있으며, 애플리케이션의 응답성을 향상시킬 수 있습니다. 그러나 비동기적인 코드는 보다 복잡하며, 코드의 실행 순서를 파악하기 어려울 수 있습니다.