[JavaScript] 자바스크립트 콜백(callback)함수란?

콜백 함수란?

 콜백 함수는 함수 안에서 어떤 특정한 시점에 호출되는 함수를 말합니다. 보통 콜백 함수는 함수의 매개변수로 전달하여 특정 시점에서 콜백 함수를 호출합니다. 그럼 콜백 함수가 어떻게 사용되는지 알아보겠습니다.

 

함수 정의

// 콜백 함수가 될 매개변수 설정
function plus(a, b, callback) {  
  var sum = a + b;
  callback(sum);
}      

plus 함수를 보면 callback라는 매개변수를 넣어주고 plus 함수 내부에서 callback 매개변수를 함수 형태로 실행하고 있는 모습입니다.

 

정의한 함수 호출

// plus 함수에 익명 함수를 인자로 전달
plus(1, 2, function(result) {
  console.log(result);         
});

익명 함수를 전달하고 plus 함수를 호출하고 있는 모습입니다. 함수에서 정의하고 있는 로직을 보면 a + b 가 변수 sum에 저장되고 sum이 익명 함수로 전달되어 콘솔에 출력하고 있다는 것을 알 수 있습니다. 콜백 함수가 맨 뒤에 있기 때문에 모든 로직이 처리되고 난 시점에서 콜백 함수가 호출되는 것을 알 수 있습니다.

 

결과

3

 

정의한 함수를 인자로 전달

function plus(a, b, callback) {
  var sum = a + b;
  callback(sum);
}

function print(result) {  // 콜백 함수로 사용할 함수 정의
  console.log(result);
}                         

plus(1, 2, print);

익명 함수를 전달하는 것 대신 미리 정의한 함수 print를 전달하고 있습니다. print 함수 역시 callback 매개변수가 호출되고 있는 시점에 호출되고 있습니다.

 

결과

3

 

이벤트와 콜백 함수

특정 이벤트가 발생할 때마다 함수를 실행하고 싶을 때 콜백 함수를 사용합니다.

 

예시

$("button").click(function() {
  alert(1);
});

위와 같이 클릭 이벤트가 발생할 때마다 콜백 함수가 실행되어 버튼을 누를 때마다 경고창이 뜨게 할 수 있습니다.

 

콜백 함수를 사용하는 이유

 어떤 동작이 끝나고 함수를 호출하는 거라면 그냥 순차적으로 함수를 호출하면 되지 않을까?라는 의문을 가지게 됩니다. 그럼 예시들을 통해서 한번 비교해보겠습니다.

 

일반적인 경우

function plus(a, b) { 
  var sum = a + b;
  return sum;
}  

function print(result) {
  console.log(result);
}

print(plus(1,2));

다음은 plus 함수의 리턴 값을 print 함수로 전달하여 출력하는 예제입니다. print함수가 실행되기 위해서는 plus함수의 실행이 전부 완료가 돼야 됩니다. 즉, print함수는 plus함수의 동작이 모두 끝날 때까지 계속 기다려야 합니다. 

 

 만약 위 코드가 웹사이트의 동작에 해당하는 코드이고 plus함수가 로직이 복잡해서 처리속도가 늦어지게 된다면 실행이 계속 지연되기 때문에 자바스크립트로 이루어진 웹사이트의 모든 동작이 멈춰버리게 됩니다. 

 

콜백 함수를 사용한 경우

function plus(a, b, callback) {  // plus 함수 정의
  var sum = a + b;
  callback(sum);
}     

반면에 콜백 함수를 이용하여 동작을 구현하면 처리가 끝날 때까지 기다리는 것이 아니라 처리가 끝나는 시점에서 함수를 호출합니다. 즉, 정말로 필요할 때만 함수를 호출해서 효율이 좋고 웹사이트에서도 여러 가지 동작을 동시에 할 수 있습니다.

 

 이와 같은 방법을  비동기식 처리방법이라고 합니다. 현재 웹사이트들은 비동기식 처리방법인 ajax를 활용하여 더 활발하게 동작할 수 있게 되었습니다. 따라서 콜백 함수는 비동기식 처리방법에 있어서 정말 중요한 개념이라고 할 수 있습니다.