콜백 함수(Callback Function)

이일우·2023년 2월 26일

공부하기

목록 보기

10/42

콜백 함수(Callback Function)란?

콜백 함수는 다른 함수의 인자로 전달되어 그 함수의 내부 로직에서 실행되는 함수입니다. 즉, 콜백 함수는 다른 함수의 내부에서 호출되는 함수로, 이를 이용하여 비동기적으로 처리되는 작업에서의 결과값을 받아 처리할 수 있습니다.

예를 들어, 자바스크립트에서 setTimeout 함수는 콜백 함수를 인자로 받아 일정 시간이 지난 후에 해당 함수를 실행합니다. 이렇게 setTimeout 함수는 자신이 정해진 시간이 지나면 콜백 함수를 호출해주는 역할을 합니다.

setTimeout(function() {
  console.log('Hello, world!');
}, 1000);

위의 코드에서 setTimeout 함수는 1초 후에 콜백 함수를 실행합니다. 따라서 1초 후에 "Hello, world!"가 출력됩니다.

콜백 함수의 예시

function fetchData(callback) {
  setTimeout(() => {
    const data = { name: 'ChatGPT', age: 3 };
    callback(data);
  }, 2000);
}

function processData(data) {
  console.log(`Name: ${data.name}, Age: ${data.age}`);
}

fetchData(processData);

위의 코드에서 fetchData 함수는 2초 후에 객체 형태의 데이터를 반환하는 비동기 함수입니다. 이 함수는 인자로 callback 함수를 받아서, 데이터를 가져온 후에 callback 함수를 호출하게 됩니다. processData 함수는 fetchData 함수의 callback 인자로 전달되어 실행됩니다. processData 함수는 데이터를 받아와서 콘솔에 출력하는 단순한 함수입니다.

콜백 함수의 주의사항

콜백 함수는 항상 함수의 인자로 전달되어야 합니다.
콜백 함수는 함수 내에서 정의되어야 하며, 함수 외부에서 정의된 함수를 사용하면 예상치 못한 결과가 발생할 수 있습니다.
콜백 함수는 반드시 호출되어야 하며, 호출되지 않을 경우 문제가 발생할 수 있습니다.
콜백 함수의 인자는 콜백 함수를 호출하는 함수에서 미리 정해져야 하며, 인자의 개수와 타입은 정확히 일치해야 합니다.
콜백 함수를 사용할 때에는 콜백 지옥(callback hell)에 빠지지 않도록 조심해야 합니다. 이는 콜백 함수가 여러 개 중첩되어 코드의 가독성과 유지보수성을 해치는 상황을 의미합니다. 이를 해결하기 위해서는 Promise나 async/await와 같은 비동기 처리 방법을 사용해야 합니다.

콜백 지옥(Callback Hell)

콜백 함수는 여러 개의 함수에서 중첩해서 사용될 수 있습니다. 이렇게 중첩된 콜백 함수를 계속 사용하다 보면 가독성이 매우 떨어지는 코드를 만들어 내게 됩니다. 이를 콜백 지옥(Callback Hell)이라고 합니다.

콜백 지옥을 방지하기 위해서는 Promise나 async/await 같은 비동기 처리 방식을 사용하면 됩니다.

콜백 함수 내에서 예외 처리

콜백 함수 내에서 예외가 발생하면 전체 애플리케이션이 중단될 수 있습니다. 따라서 콜백 함수 내에서는 예외 처리를 꼭 해주어야 합니다.

setTimeout(function() {
  try {
    // 예외가 발생할 가능성이 있는 코드
  } catch (e) {
    // 예외 처리 코드
  }
}, 1000);

콜백 함수에서의 this

콜백 함수 내에서의 this는 전역 객체를 가리킬 수 있습니다. 이는 콜백 함수를 객체의 메소드로 사용할 때 발생할 수 있습니다. 이를 방지하기 위해서는 bind 메소드를 사용하거나 arrow function을 사용하면 됩니다.

// bind 메소드를 사용한 예시
var obj = {
  name: 'John',
  printName: function() {
    setTimeout(function() {
      console.log(this.name);
    }.bind(this), 1000);
  }
};

// arrow function을 사용한 예시
var obj = {
  name: 'John',
  printName: function() {
    setTimeout(() => {
      console.log(this.name);
    }, 1000);
  }
};