[JavaScript] 콜백 함수

Byeonghyeon·2025년 1월 26일

공부

목록 보기
13/21

콜백 함수

콜백 함수(Callback Function)은 다른 함수의 인수로 전달되어 특정 작업이 완료된 후 호출되는 함수이다.

매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말한다.

function greet(name, callback) {
  console.log(`안녕하세요, ${name}님!`);
  callback(); // 전달받은 함수 호출
}

function farewell() {
  console.log("잘 가세요!");
}

greet("홍길동", farewell);
// 출력:
// 안녕하세요, 홍길동님!
// 잘 가세요!

greet() 함수를 호출할 때 입력 매개변수로 namefarewell() 함수를 전달했다.

greet() 가 실행되면 실행문 안에서 두 번째 매개변수인 callback을 괄호 ()를 붙여 호출한다.

콜백 함수는 보통 함수의 이름이 없는 익명 함수 형태로 넘겨준다.

간결하고 동작을 바로 정의할 수 있으며, 콜백 함수가 한 번만 사용될 때, 익명 함수를 사용하면 불필요한 함수 정의를 피할 수 있기 때문이다.

function greet(name, callback) {
  console.log(`안녕하세요, ${name}님!`);
  callback(); // 전달받은 함수 호출
}

greet("홍길동", function () {
	console.log("잘 가세요!");
});
// 출력:
// 안녕하세요, 홍길동님!
// 잘 가세요!

콜백 함수를 익명 함수로 정의하면 코드의 간결성을 얻을 수 있지만, 한차례 더 간결하게 표시하기 위해 자바스크립트의 화살표 함수를 이용할 수도 있다.

function greet(name, callback) {
  console.log(`안녕하세요, ${name}님!`);
  callback(); // 전달받은 함수 호출
}

greet("홍길동", () => {
	console.log("잘 가세요!");
});
// 출력:
// 안녕하세요, 홍길동님!
// 잘 가세요!

콜백 함수의 특징

  1. 콜백 함수는 값이 아니라 함수 그 자체를 다른 함수에게 전달한다.
  2. 콜백 함수는 전달된 함수가 실행을 제어하며, 필요할 때(특정 작업의 완료 시점) 호출된다.
  3. 비동기 코드 처리에 특히 유용하며, 이벤트 처리, HTTP 요청, 타이머 등에서 사용된다.

콜백 지옥(Callback Hell)

콜백 지옥이란 함수의 매개변수로 념겨지는 콜백 함수가 반복되어 코드가 복잡하고 가독성이 떨어지며 관리하기 어려운 상황을 뜻한다.

특히 비동기 작업을 처리하기 위해 콜백 함수를 사용하다 보면, 여러 비동기 작업이 순차적으로 실행되도록 하기 위해 콜백 함수를 중첩하게 되는데, 이 과정에서 코드가 가독성이 떨어지고, 유지보수가 어려워질 수 있다.

0개의 댓글