콜백 함수란

💡개념

다른 함수에 인수(Argument)로 전달되어 실행되는 함수이다. 콜백 함수는 비동기 작업을 처리할 때 매우 자주 사용되며, 특히 자바스크립트의 비동기 패턴에서 중요한 역할을 한다.

🖥️ 사용 예시

다음은 콜백 함수를 사용하는 간단한 예이다.

function greet(name, callback) {
    console.log("Hello, " + name);
    callback();
}

function sayGoodbye() {
    console.log("Goodbye!");
}

greet("Alice", sayGoodbye);

이 코드에서는 greet 함수가 name과 callback이라는 두 개의 매개변수를 받는다. sayGoodbye 함수는 콜백 함수로 전달되어 greet 함수 내에서 호출된다.

🧑🏻‍💻비동기 작업과 콜백

자바스크립트에서 콜백 함수는 주로 비동기 작업을 처리할 때 많이 사용된다. 예를 들어, 서버에서 데이터를 가져오는 작업을 할 때, 데이터를 다 가져온 후에 실행되어야 하는 작업을 콜백 함수로 전달 할 수 있다.

// 데이터 패칭 함수
function fetchData(callback) {
    setTimeout(() => {
        console.log("Data fetched");
        callback("Data");
    }, 2000);
}
// 콜백으로 전달할 함수
function processData(data) {
    console.log("Processing " + data);
}

fetchData(processData);

// 결과
console.log("Data fetched");
console.log("Processing Data");

이 코드에서 fetchData 함수는 2초 후에 데이터를 가져오고, 그 데이터를 processData 함수에 전달하여 처리한다. 이처럼 콜백 함수는 비동기 작업이 완료된 후에 실행되도록 설계된다.

🔥 콜백 헬(callback hell)

콜백 함수는 편리하지만, 중첩된 콜백을 계속 사용하다 보면 코드가 복잡해지는 문제가 생길 수 있다. 이를 콜백 헬이라고 부르며, 코드를 읽기 어렵게 만든다. 이를 해결하기 위해 자바스크립트는 Promise, async/await와 같은 새로운 비동기 패턴을 도입했다.