Call Back 함수

정의

JavaScript에서 콜백 함수란 무언가에 의해 불러와지는 함수를 의미합니다.

 

콜백 함수라고 해서 특별한 문법적 특징을 가지지는 않습니다.

 

JavaScript에서 함수는 객체입니다. 따라서 함수는 다른 함수의 인자로 사용될 수도 있고, 다른 함수에 의해 반환될 수도 있습니다.

 

따라서 콜백 함수는 다른 함수의 인자로 전달되는 함수가 될수도, 다른 함수 안에서 실행되기 위해서 호출될 수도, 반환될 수도 있습니다.

 

대표적인 예로 addEventListener(JavaScript의 내장 함수)의 인자로 함수를 받는 것이 있습니다.

 

 

 

아래의 간단한 코드를 통해 정리를 해보겠습니다.

function exampleCallBack(a) {
  a();
}

function callBack() {
  console.log("콜백함수 입니다.");
}

exampleCallBack(callBack); // 콜백함수 입니다. 출력

exampleCallBack 함수 안에서 callBack 함수를 호출하였습니다.

 

작동되는 것을 순서대로 정리해보겠습니다.

 

1. callBack이라는 함수를 선언했습니다.

2. exampleCallBack 이라는 함수를 선언했으며, 해당 함수는 매개변수에 들어오는 인자로  함수를 호출합니다.

3. exampleCallBack 이라는 함수의 매개변수(a)에 callBack을  인자로 받으면, 함수 본문 안에 있는 a()는 callBack()으로 바뀌며 

   1번에서 선언한 callBack이라는 함수를 호출하게 됩니다.

 

예시 코드처럼 callBack이라는 함수는 정의만 되었지 언제 호출되는지는 정해놓지 않았습니다. 

 

단지 특정 시점 즉, exampleCallBack 함수가 호출되었을 때 callBack 함수가 호출되는 것이며, 이것이 콜백 함수입니다.

 

예시 코드를 하나 더 살펴보겠습니다.

function person(firstName, lastName, callBackExample) {
  const personName = `${firstName}${lastName}`;
  callBackExample(personName);
}

person("L", "SH", (name) => console.log(name)); //LSH 출력

해당 코드의 경우 위의 코드와는 다르게 전역적으로 함수를 선언하지 않고, 매개변수에서 화살표 함수로 함수를 선언해 주었습니다.

 

작동되는 순서를 정리하자면

 

1. person 함수를 선언했으며 매개변수 리스트에는 firstName, lastName, callBackExample가 있습니다.

   해당 함수는 마지막 매개변수 callBackExample에 들어오는 인자를 이용해 콜백 함수를 호출합니다.

2. person 함수를 호출을 했으며 첫 번째 인자로 "L", 두 번째 인자로 "SH", 세 번째 인자에서 (name) => console.log(name) 함수를 선언해주었습니다. 

3. person 함수는 세 번째 인자로 함수를 받은 것이고, 받은 함수의 매개변수(name)에는 상수 personName가 인자로 들어가게 됩니다.

 

 

제가 사용하는 코드로 마지막 정리를 해보겠습니다.

const sumValue = (resultHandler, ...numbers) => {
  const validValue = (number) => {
    return isNaN(number) ? 0 : number;
  };

  let sum = 0;
  for (const num of numbers) {
    sum += validValue(num);
  }
  resultHandler(sum);
};

const showResult = (result) => {
  console.log(`The result after adding all numbers is ${result}`);
};

console.log(sumValue(showResult, 1, 5, 10, -3, 6, 10));
//The result after adding all numbers is 29 출력

1.  showResult라는 함수를 선언했으며, 해당 함수 호출에 사용되는 매개변수는 result입니다.

2. sumValue라는 함수를 선언했으며, 해당 함수 호출에 사용되는 첫 번째 매개변수는 resultHandler입니다.

3. sumValue 호출을 하였고 인자로 showResult, 1, 5, 10, -3, 6, 10가 사용되었습니다. 

4.sumValue 함수 매개변수 resultHandler에 인자로 showResult가 들어왔기 때문에 함수 본문 안에 있는 for of문이 끝나면

    resultHandler(sum)는 showResult(sum)이 되어 showResult 함수를 호출하며 인자로 sum이 사용됩니다.

5. showResult 함수의 매개변수 result에는 인자로 받은 sum이 들어가고 showResult 함수의 본문이 실행됩니다.

 

 

 

 

 

정리

콜백 함수는 함수의 선언만 하고, 어떤 이벤트가 발생했거나 특정 시점에 도달했을 때 호출하는 함수입니다.

(문법적 특징이 아닌 호출 방식에 의해 콜백 함수인지 아닌지 구분됩니다.)

 

 

 

 

 

 

※ 비동기 프로그래밍과 콜백 함수에 대해 좀 더 공부한 뒤 정리하여 추후 게시글을 수정할 예정입니다.