[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를 활용하여 더 활발하게 동작할 수 있게 되었습니다. 따라서 콜백 함수는 비동기식 처리방법에 있어서 정말 중요한 개념이라고 할 수 있습니다.