콜백(CallBack)함수 이거 보고도 모르면 바보

콜백함수 뭔가 들었을때 어려울거 같지 않아요? 괜히 막 거부감들고 하기싫고..
저는 그랬답니다^^ ㅎㅎ
하지만 후에 필요한 Promise, async/await를 이해하려면 콜백함수를 확실히 이해해야하는데요, 저도 몰랐을때 처럼.. 최대한 쉽게 이해시켜보겠습니다. 가시죠.

---

콜백 함수 개념부터.

JavaScript에서 콜백함수는 다른 함수가 "끝난 후에 실행할 작업"을 담은 함수입니다.

예를 들어, 어떤 함수가 하나의 작업을 하고 있을 때, 그거 끝나고 바로 뭔가 해야해!!!
바로 해야하는 작업을 콜백함수를 이용하여 쉽게 만들 수 있습니다.

 

콜백 함수 예시.

아래는 c라는 함수가 callback이라는 함수 인자를 받아서 실행하는 예시입니다.

const a = () => console.log("A");
const b = () => console.log("B");

const c = (callback) => {
    console.log("C");
    callback();  // 전달받은 callback 함수를 실행합니다.
};

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

c(d);  // 출력: C, D

함수 c부터 보겠습니다.
함수 c는 callback이라는 함수를 매개변수로 받습니다.

그리고 밑에 d라는 함수를 보면 "D"를 출력하는 식이죠.

밑에 c(d)를 보시면, c에 함수 d가 들어가죠?
먼저 "C"를 출력하고 매개변수로 들어간 함수 d()가 실행됩니다.

그러면 함수 d가 실행되어 "D"가 출력되겠죠?
따라서 출력은 C D입니다.

과정은 이해가 되셨죠?

 

비동기 작업의 콜백 함수

javascript는 오래 걸리는 작업을 할 때 setTimeout 같은 비동기(동시에 여러 작업) 함수를 사용합니다. 이 비동기 작업이 끝난 후에 실행할 작업을 정할 때, 콜백 함수를 사용하면 좋습니다!

먼저 잘못된 예시부터 보여드릴게요.
setTimeout에서 콜백 없이 계산하는 코드인데요.

const sum = (a, b) => {
    setTimeout(() => {
        return a + b;
    }, 1000);
};

console.log(sum(1, 2)); // 예상 출력: 3 (실제 출력: undefined)

실행하면 3이 나올 것 같나요?
땡입니다! 실행하면 undefined가 나오게 됩니다.

undefined가 나오는 경우는 3가지가 있는데요, (추후 자세하게 글을 올리겠습니다.)

1. 객체가 빈 객체일 때
2. 변수를 선언했는데 할당되지 않았을 때
3. 함수에 리턴이 없을 때

여기서는 함수에 리턴이 없죠.

어? 있는데요? 싶을수도 있지만 자세히 보시면 sum함수안에 있는 것이 아닌 setTimeout안에 return이 있는 것을 확인하실 수가 있어요. 따라서 비동기 작업 이후에 } 바깥에 return을 작성해주셔야 해요.

 

올바른 예시

const sum2 = (a, b, callback) => {
    setTimeout(() => {
        callback(a + b);  // 콜백 함수로 결과 전달
    }, 1000);
};

sum2(1, 2, (result) => {
    console.log(result);  // 출력: 3
});

이 코드에서는 setTimeout(비동기) 함수 이후에 다시 sum2를 콜백하여 console.log(result)를 return 함으로 올바른 결과값 3이 출력됩니다.