본문 바로가기

JS/JavaScript

18. 콜백함수

콜백함수(Callback function) 

다른 함수에 인자로 전달되는 함수로서 특정 이벤트나 조건이 발생했을 때 호출되는 함수. 

JS에서 함수는 객체 자료형 중 하나로서 다른 변수에 할당하거나 다른 함수의 인자로 전달할 수 있다.(일급 객체) 

콜백함수의 사용 예시로는 비동기처리가 가장 흔한 경우이다.

 

* 일급 객체

더보기

일급 객체(First-class object)는 프로그래밍 언어에서 다음과 같은 특성을 가진 객체이다.

  1. 변수에 할당할 수 있다: 함수를 변수에 할당하여 저장할 수 있다. 
  2. 함수의 인자로 전달할 수 있다: 함수를 다른 함수의 인자로 전달할 수 있다.
  3. 함수의 반환값으로 사용할 수 있다: 함수가 다른 함수의 반환값으로 사용될 수 있다.
  4. 동적으로 프로퍼티를 할당할 수 있다: 함수에 동적으로 프로퍼티를 추가하거나 변경할 수 있다.
// 예시1
function callbackFunction(){
  console.log("나는 콜백함수~")
}

function testFuntion(callback){
  callback();
  // testFunction은 매개변수를 가지고 있으며 이는 함수로서 실행될 것임. 
}

testFuntion(callbackFunction); // 결과: 나는 콜백함수~



// 예시2
function callback(who) {
  if (who === "dog") {
    console.log("멍멍");
  } else if (who === "cat") {
    console.log("야옹");
  } else {
    console.log("안녕");
  }
}

function talk(callback) {
  callback("cat");
}

talk(callback); // 결과: 야옹

 

콜백 함수의 특징 

1. 다른 함수의 인자로 전달될 수 있다.

   : 함수를 값으로 다룰 수 있는 JS의 특성을 활용하여 함수를 인자로 받는 함수에 콜백함수를 전달할 수 있다. 

2. 비동기 작업에서 많이 사용된다.

   : 비동기 작업은 결과가 도착하기 전까지 기다리지 않고 다음 코드를 실행하는 것을 의미한다. 

     이때 콜백함수는 비동기작업이 완료되었을 때 실행하는 함수로 활용된다. 

3. 이벤트처리에 활용된다. 

    : 이벤트가 발생했을 때 실행되는 함수를 콜백함수로 등록하여 해당 이벤트가 발생할 때마다 원하는 동작을 수행할 수 있다. 

4. 에러처리에도 사용된다. 

    : 비동기작업이나 이벤트 처리 중 발생하는 에러를 처리하기 위해 콜백함수를 활용할 수 있다.

      에러가 발생했을 때 콜백함수가 호출되어 에러를 처리하는 로직을 구현할 수 있다. 

5. 함수 내에서도 정의할 수 있고 혹은 이름이 있는 함수 또는 익명함수로 전달할 수 있다. 

    : 필요에 따라 함수를 직접 정의하거나 이미 정의된 함수로 콜백을 사용할 수 있다. 

 

 

콜백 함수는 JS에서 다양한 상황에 활용되며 이를 통해 코드의 유연성과 확장성을 높일 수 있다.