[JS] 콜백(Callback) 함수란?

Callback(콜백) 함수란?

정확하게는 콜백함수는 파라미터로 전달받은 함수를 말합니다.
매개변수로 넘겨받은 함수는 일단 넘겨받고,
때가 되면 나중에 호출(called back)한다는 것이 콜백함수의 개념이다.

다른 함수가 실행을 끝낸 뒤 실행되는 callback되는 함수를 말함.
함수를 등록하기만 하고 어떤 이벤트가 발생 했거나 특정 시점에 도달 했을 때 시스템에서 호출하는 함수를 말함.

 

 

Callback 함수의 기본 형태

function func(callback) {
    callback();
}
function callback() {
    console.log("callback이다");
}

func(callback);

// 결과 : callback이다

함수를 호출 했을 때, 밑에 있는 특정 callback함수가 실행된다.

function introduce (lastName, firstName, callback) { 
    var fullName = lastName + firstName; 
    callback(fullName); 
} 

introduce("홍", "길동", function(name) { 
    console.log(name); 
    };

// 결과 -> 홍길동

위의 예제로, introduce 함수를 실행하면, callback 자리를 새로운 함수(function(name)으로 지정해주면서 함수 안에서 callback(fullname)으로 실행되는 함수가 된다.

필요한 이유

콜백함수의 이유에 대해 설명을 할 때변수의 유효범위(scope)에 대한 이야기도 하고

동기/비동기(Synchronous/Asynchronous) 처리에 대한 이야기도 하면 좋을 것이다.

1. 동기 : 하나의 요청이 오면 완료가 된 후 다음 요청을 실행 하는 방식 - 순차적 로직 흐름
2. 비동기 : 어떤 요청이 오면 완료가 되기 전에 다음 요청을 실행하는 방식 - 동시 효율적 처리 가능, 즉시 응답이 안되기 때문에 예상 밖 결과 나올 수가 있다.
3. 비동기 방식으로 작성된 함수를 동기 처리 하기 위해 필요하다.
4. 콜백함수는 때로는 그냥 가독성이나 코드 재사용성 면에서도 활용한다.

function add(a, b) {
  return a + b;
}

function sayResult(value) {
  console.log(value);
}

sayResult(add(3, 4));

function add(a, b, callback) {
  callback(a + b);
}

function sayResult(value) {
  console.log(value);
}

add(3, 4, sayResult);