콜백 함수는 다른 함수의 인수로 전달되어, 특정 작업이 완료된 후 호출되는 함수이다.
주로 비동기 작업을 처리할 때 사용되며, 콜백 함수를 통해 코드가 비동기적으로 실행되도록 할 수 있습니다.
function greet(name, callback) {
console.log(`Hello, ${name}!`);
callback();
}
function sayGoodbye() {
console.log("Goodbye!");
}
greet("Alice", sayGoodbye);
위 코드에서 greet 함수는 name과 callback이라는 두 인수를 받습니다. greet 함수는 Hello, Alice!를 출력한 후 callback 함수를 호출합니다. 여기서 callback으로 sayGoodbye 함수를 전달했기 때문에, greet 함수가 실행된 후 sayGoodbye 함수가 호출되어 Goodbye!를 출력합니다.
: 콜백 함수는 비동기 작업, 특히 I/O 작업이나 타이머와 같은 작업에서 자주 사용된다. 예를 들어, 파일을 읽는 작업이나 네트워크 요청 등을 처리할 때 유용하다. 다음은 타이머를 사용한 예제이다.
function fetchData(callback) {
setTimeout(() => {
let data = "some data";
callback(data);
}, 1000);
}
function processData(data) {
console.log(`Processing: ${data}`);
}
fetchData(processData);
위 코드에서 fetchData 함수는 1초 후에 데이터를 가져오고, 그 데이터를 callback 함수로 전달합니다. processData 함수가 callback으로 전달되어 데이터를 처리합니다.
: 복잡한 비동기 작업을 처리할 때 콜백 함수의 중첩이 많아지면, 코드의 가독성이 떨어지고 유지보수가 어려워지는 현상이 발생합니다. 이를 "콜백 지옥"이라고 합니다.
function firstTask(callback) {
setTimeout(() => {
console.log("First task complete");
callback();
}, 1000);
}
function secondTask(callback) {
setTimeout(() => {
console.log("Second task complete");
callback();
}, 1000);
}
function thirdTask(callback) {
setTimeout(() => {
console.log("Third task complete");
callback();
}, 1000);
}
firstTask(() => {
secondTask(() => {
thirdTask(() => {
console.log("All tasks complete");
});
});
});
위 예제에서 콜백 함수들이 중첩되어 코드가 깊어지고 가독성이 떨어진다.
function firstTask() {
return new Promise((resolve) => {
setTimeout(() => {
console.log("First task complete");
resolve();
}, 1000);
});
}
function secondTask() {
return new Promise((resolve) => {
setTimeout(() => {
console.log("Second task complete");
resolve();
}, 1000);
});
}
function thirdTask() {
return new Promise((resolve) => {
setTimeout(() => {
console.log("Third task complete");
resolve();
}, 1000);
});
}
firstTask()
.then(secondTask)
.then(thirdTask)
.then(() => {
console.log("All tasks complete");
});
async/await를 사용하면 더 간결하게 작성할 수 있다.
async function runTasks() {
await firstTask();
await secondTask();
await thirdTask();
console.log("All tasks complete");
}
runTasks();