콜백 함수

콜백 함수(callback function)는 다른 함수에 인자로 전달되어 나중에 실행되는 함수다. 즉, 어떤 작업이 완료되었을 때 실행될 함수를 미리 정의해 놓고, 그 함수가 필요한 순간에 호출하는 등의 비동기적 또는 지연된 실행을 위해 사용된다.

예시

// 기본적인 콜백 함수 예시
function greet(name) {
  console.log("Hello, " + name);
}

function sayHello(callback) {
  callback("Alice");
}

// sayHello 함수에서 greet 함수가 콜백으로 사용됨
sayHello(greet); // "Hello, Alice" 출력

여기서 greet는 콜백 함수다. sayHello 함수는 greet를 인자로 받으면서 greet를 호출한다. 즉, sayHello가 실행될 때 greet가 실행된다.

 

콜백 함수와 비동기 작업

콜백 함수는 특히 서버에서 데이터를 가져오는 등의 비동기 작업에서 많이 사용된다. 

예시

// setTimeout을 사용한 비동기 예시
function fetchData(callback) {
  setTimeout(() => {
    console.log("Data fetched!");
    callback();
  }, 2000); // 2초 후에 실행되는 비동기 작업
}

function processData() {
  console.log("Processing data...");
}

fetchData(processData); // 2초 후에 "Data fetched!"와 "Processing data..." 출력

 

이벤트 리스너에서의 콜백 함수

이벤트가 발생했을 때 특정 동작을 실행하는 함수를 콜백으로 등록한다.

예시

// 버튼 클릭 시 콜백 함수 실행
const button = document.getElementById("myButton");

button.addEventListener("click", function() {
  console.log("Button clicked!");
});

 

주의 사항

1. 콜백 헬(Callback Hell) : 여러 개의 콜백이 중첩되면서 코드가 복잡해지면 가독성과 유지보수 측면에서 문제가 생기니 주의한다. 

// 예시: 콜백 헬
asyncTask1(function() {
  asyncTask2(function() {
    asyncTask3(function() {
      // 계속 중첩되는 콜백들
    });
  });
});

2. 에러 처리 어려움 : 콜백 안에서 발생할 수 있는 에러를 처리하기 어렵다.

 

콜백 함수와 this

콜백 함수에서 this는 함수를 호출하는 컨텍스트에 따라 달라진다. 예를 들어, 일반 함수와 메서드에서의 this가 다르게 동작한다.

예시

function MyClass() {
  this.name = "Alice";
  setTimeout(function() {
    console.log(this.name); // undefined, 일반 함수에서의 `this`
  }, 1000);
}

const obj = new MyClass();

setTimeout 안의 콜백 함수는 일반 함수로 호출 되어 this가 전역 객체를 가리키게 된다.

function MyClass() {
  this.name = "Alice";
  setTimeout(() => {
    console.log(this.name); // "Alice", 화살표 함수에서는 `this`가 상위 스코프를 참조
  }, 1000);
}

이 경우에는 setTimeout 안의 함수가 화살표 함수이기 때문에 this가 상위 스코프를 참조하여 Alice를 출력하게 된다.