부족했던 점 공부하기

콜백함수

콜백 함수(callback function)는 다른 함수에게 인자로 전달되어 특정 이벤트가 발생하거나 작업이 완료될 때 호출되는 함수를 말합니다.

예를 들어, 웹 브라우저에서 사용자가 버튼을 클릭하면 클릭 이벤트가 발생하고, 이벤트 핸들러 함수를 호출합니다. 이때 이벤트 핸들러 함수가 콜백 함수가 될 수 있습니다. 즉, 클릭 이벤트가 발생하면 브라우저는 인자로 전달된 콜백 함수를 호출합니다.

또 다른 예로는 비동기적인 작업을 수행하는 함수에서 콜백 함수를 사용하는 경우가 있습니다. 이 경우, 비동기 작업이 완료될 때까지 기다리지 않고 다른 코드를 실행할 수 있으며, 비동기 작업이 완료되면 인자로 전달된 콜백 함수를 호출하여 작업 결과를 처리합니다.

콜백 함수는 자바스크립트에서 널리 사용되며, 비동기적인 작업을 수행하는 함수나 이벤트 핸들러 등에서 자주 활용됩니다.

 

콜백함수(반복문)

콜백 함수를 사용하여 반복문을 구현할 수 있습니다. 일반적으로 콜백 함수를 사용하여 비동기적으로 작업을 수행하는 함수를 호출하고, 작업이 완료될 때마다 콜백 함수를 호출하여 결과를 처리합니다. 이를 이용하여 반복문을 구현할 수 있습니다.

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

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

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

 

콜백 지옥

콜백 지옥(Callback Hell)은 콜백 함수를 중첩해서 사용하면서 코드가 복잡해지고 가독성이 떨어지는 현상을 말합니다. 비동기적으로 수행되는 작업이 많아지면서 콜백 함수가 중첩되어 사용되면서 코드가 복잡해지고, 디버깅이 어려워지고, 유지보수가 어려워지는 문제점이 발생합니다.

    function funcA(callback){
        setTimeout(()=> {
            console.log("funcA가 실행되었습니다.");
            callback();
        }, 1000)
    }
    function funcA(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();
            })
        })
    });