자바스크립트를 공부하다 보면 “함수를 인자로 넘긴다”는 말을 자주 듣게 됩니다. 처음에는 생소할 수 있지만, 이는 자바스크립트가 함수를 **일급 객체**로 취급하기 때문에 가능한 아주 강력한 기법입니다. 특정 작업이 끝난 뒤에 실행되어야 하는 로직을 담은 **콜백 함수(Callback Function)**의 세계로 안내합니다! 😊
1. 콜백 함수(Callback)란 무엇인가? 🏗️
콜백 함수는 다른 함수에 인자로 전달되어, 특정 시점에 호출되는 함수를 말합니다. 쉽게 말해 “일단 이 작업을 하고, 다 끝나면 내가 준 이 함수를 실행해줘!”라고 부탁하는 것과 같습니다.
콜백의 핵심 성격
- 제어권 위임: 콜백 함수를 받은 함수는 그 함수를 ‘언제’, ‘어떻게’ 실행할지에 대한 제어권을 갖습니다.
- 비동기 처리의 핵심: 서버에서 데이터를 가져오거나 타이머가 종료된 후의 동작을 정의할 때 필수적입니다.
- 가독성과 재사용성: 로직을 분리하여 코드의 구조를 깔끔하게 유지할 수 있습니다.
2. 동기적 콜백 vs 비동기적 콜백 📑
모든 콜백이 비동기로 동작하는 것은 아닙니다. 실행 시점에 따라 두 가지로 나뉩니다.
| 유형 | 특징 및 예시 |
|---|---|
| 동기적 콜백 | 호출 즉시 실행됩니다. 예: Array.prototype.map(), forEach() |
| 비동기적 콜백 | 조건이 충족되거나 이벤트가 발생할 때 실행됩니다. 예: setTimeout, addEventListener |
3. 실무 예제와 주의사항 💻
function finishTask(callback) {
console.log(“작업 완료!”);
callback(); // 인자로 받은 함수 호출
}
finishTask(() => console.log(“후속 조치 실행”));
// 2. 콜백 지옥(Callback Hell)의 예
getData(user => {
getProfile(user, profile => {
getFriends(profile, friends => {
// 코드가 오른쪽으로 점점 밀려나며 가독성 파괴
});
});
});
🚀 Callback Summary Checklist
Why Use?
함수 실행 순서를 제어하고, 비동기 작업의 결과를 안전하게 처리하기 위해 사용합니다.
This Binding
콜백 내부의 this는 전역 객체를 가리킬 수 있으므로 화살표 함수나 bind를 사용해야 합니다.
궁금한 점 Q&A ❓
callback()처럼 괄호를 붙이면 함수를 **즉시 실행**하라는 뜻이 됩니다. 함수 자체를 넘기려면 괄호 없이 이름만 넘겨야 합니다.콜백 함수는 자바스크립트의 유연함을 상징하는 아주 중요한 개념입니다. 제어권의 위임이라는 본질을 이해한다면, 향후 배우게 될 Promise나 async/await도 훨씬 쉽게 습득하실 수 있을 것입니다. 오늘 배운 내용을 토대로 작은 비동기 로직부터 직접 구현해 보세요! 궁금한 점은 언제든 환영합니다! 😊