콜백 함수

기술 면접 때 받은 질문을 토대로 작성해 보았다. 굉장히 기초적인 기술을 물어보는데 습관적으로 사용하다보니 면접 때 놓치거나 명확히 기억하지 못하는 경우가 있었다.

---

#콜백 함수란 무엇인가?

콜백 함수는 함수를 다른 함수에게 인자로 전달 되어 특정 상황이나 조건에 도달 하면 호출, 실행되는 함수이다. 즉, 콜백 함수는 다른 함수에게 작업을 의존하고, 그 작업이 완료되었을 때 해당 함수에게 결과를 알려줍니다.

## 콜백 함수는 비동기적인 작업을 처리한다.

## 비동기

콜백함수는 비동기적인 작업을 처리하거나 이벤트 처리, 타이머 설정, http 요청 등과 같이 특정한 상황에서 실행되어야 하는 작업을 구현할 때 주로 사용된다.
콜백 함수는 비동기적인 특징을 제어하기 위함이다. 즉, 콜백 함수는 비동기 작업이 완료되면 호출되는 함수이다. 이를 통해 비동기 작업이 완료된 후에 처리할 작업을 지정할 수 있다. 비동기 작업이 완료 되면 즉시 다음 작업을 진행할 수 있다.

## 콜백 함수 예시

// setTimeout을 사용한 콜백 함수
function delayedFunction(callback) {
    console.log("시작");
    setTimeout(function() {
        console.log("3초 후에 실행됨");
        callback(); // 콜백 함수 호출
    }, 3000);
}

// 콜백 함수
function callbackFunction() {
    console.log("콜백 함수가 실행됨");
}

// delayedFunction 호출
delayedFunction(callbackFunction);

callbackFucntion은 delayedFunction을 호출하는 콜백 함수 이다. 그리고 다시 delayedFunction안에는 setTimeout이라는 비동기 함수를 내포하고 있다.setTimeout은 또 다시 인자로 함수를 호출하고 있다. 좀 더 직관적으로 코드를 수정하면 아래와 같다.

// setTimeout을 사용한 콜백 함수
function delayedFunction() {
    console.log("시작");
    setTimeout(function() {
        console.log("3초 후에 실행됨");
        function callbackFunction() { // 함수 호출
          console.log("콜백 함수가 실행됨");
       }
       callbackFucntion();
    }, 3000);
}

// delayedFunction 호출
delayedFunction();

현재 코드를 살펴보면 setTimeout은 익명 함수를 인자로 가지고 있고 해당 함수 내부에 callbackFunction이 있으며 해당 setTimeout 내부에서 호출되고 있다. 즉, 내부에 있는 callbackFunction은 setTimeout의 인자로 정의된 익명함수 안에 조건이 충족 될 때 호출,실행 되기 때문에 콜백함수로 간주가 되는 것이다. 아래코드는 콜백 함수로 간주하기 어렵다.

function test(){
  function call(){
       console.log('Call!');
    }
    call();
}

하지만 아래와 같이 인자로 전달을 하게 된다면 콜백 함수로 간주한다.

function test(fn){
    console.log('true'); 
    call();
}
function call(){
    console.log('Call!');
    }
test(call);