[JavaScript]콜백(Callback) 함수

JavaScript에서 콜백(Callback) 함수는 함수의 인수로서 다른 함수로 전달되는 함수입니다.

 

콜백 함수는 주로 배열에서 사용 가능한 foreach, map, filter, reduce 함수에서 사용됩니다.

Mozilla에서 설명하는 forEach문

대부분의 개발자들은 foreach문에 콜백 함수를 전달하고 있다는 것도 모른 채 foreach문을 사용하고 있을 수 있습니다.

 

물론, 저도 콜백 함수를 자세하게 몰라서 이번 기회에 공부 후 포스팅을 작성하였습니다.

사용 방법
1. 콜백 함수 사용
2. 콜백 함수 화살표 함수로 사용
3. 동기 콜백 함수
4. 비동기 콜백 함수

---

콜백 함수 사용

아래 코드는 배열 arr에서 홀수인 요소만 filter 하여 새로운 배열을 생성하는 코드입니다.

☞ filter 메서드 사용 방법 보러 가기

var arr = [1, 2, 3];

var arrFilter = arr.filter(function(data) {
  return data % 2;
});

console.log(arrFilter);
// [1, 3]

 

filter 메서드 안에 작성된 아래 코드는 콜백 함수이며, 함수의 이름이 없으므로 익명 함수입니다.

function(data) {
  return data % 2;
}

 

filter 메서드에서 호출된 익명 함수를 isOddNumber이라는 이름을 가진 함수로 생성하였습니다.

function isOddNumber(number) {
  return number % 2;
}

 

isOddNumber 함수는 filter 메서드의 인수로 전달되었으므로 콜백 함수입니다.

var arr = [1, 2, 3];

function isOddNumber(number) {
  return number % 2;
}

var arrFilter = arr.filter(isOddNumber);

console.log(arrFilter);
// [1, 3]

 

콜백 함수는 배열에서 제공하는 함수뿐만 아니라 이벤트 핸들러 함수를 추가하는 addEventListener 메서드에서도 사용할 수 있습니다.

 

아래 코드는 현재 브라우저의 탭에서 이벤트 핸들러 함수를 추가하는 코드입니다.

 

Chrome 개발자 도구를 실행하여 Console에 아래 코드를 실행 후 붉은색 테두리 내부를 클릭 후 결과를 확인해주세요.

function CallbackFunction() {
  console.log('콜백 함수 호출 !');
}

document.addEventListener("click", CallbackFunction);

실행 결과

즉, 콜백 함수는 다른 함수로 전달되는 함수입니다.

---

콜백 함수 화살표 함수로 사용

콜백 함수는 ES6부터 화살표 함수로 사용할 수 있습니다.

익명 함수로 사용

var arr = [1, 2, 3];

var arrFilter = arr.filter((data) => data % 2);

console.log(arrFilter);
// [1, 3]

 

이름을 가진 함수로 사용

var arr = [1, 2, 3];

var isOddNumber = (number) => number % 2

var arrFilter = arr.filter(isOddNumber);

console.log(arrFilter);
// [1, 3]

---

동기 콜백 함수

아래 코드는 코드가 순차적으로 실행되었으므로 동기식입니다.

 

홀수인 배열인 arrFilter이 생성된 이후 console.log(arrFilter); 가 실행되었기 때문입니다.

var arr = [1, 2, 3];

var arrFilter = arr.filter(function(data) {
  return data % 2;
});

console.log(arrFilter);
// [1, 3]

---

비동기 콜백 함수

비동기는 현재 작업이 끝날 때까지 기다리지 않고 다른 작업을 실행하는 것을 의미합니다.

 

download 함수를 실행하여 원격 서버에서 파일을 다운로드하고 완료 후 process 함수를 실행한다고 가정하는 코드를 작성해봅시다.

function download(url) {
    // ...
}

function process(file) {
    // ...
}

download(url);
process(file);

 

원격 서버에서 파일을 다운로드하는 작업은 파일 크기와 네트워크 상태에 따라 시간이 소모되므로 setTimeout 함수를 호출하여 파일을 다운로드하는데 5초 걸린다고 가정합시다.

function download(url) {
    setTimeout(() => {
        console.log(`Downloading ${url} ...`);
    }, 5000);
}

 

process 함수는 console에 문구를 출력합니다.

function process(file) {
    console.log(`Processing ${file}`);
}

 

아래 코드를 실행하면, process 함수가 먼저 호출되는 문제가 발생합니다.

function download(url) {
    setTimeout(() => {
        console.log(`Downloading ${url} ...`);
    }, 5000);
}

function process(file) {
    console.log(`Processing ${file}`);
}

let url = 'www.naver.com/logo.jpg';

download(url);
process(url);

실행 결과

 

download 후 process 함수가 호출되도록 download 함수에 process 함수를 전달합니다.

process 함수는 콜백 함수가 됩니다.

function download(url, process) {
    setTimeout(() => {
        console.log(`Downloading ${url} ...`);
        process(url);
    }, 5000);
}

function process(file) {
    console.log(`Processing ${file}`);
}

let url = 'www.naver.com/logo.jpg';

download(url, process);

실행 결과

 

이처럼 비동기 작업 후에 콜백 함수를 호출하는 경우를 비동기 콜백 함수라고 합니다.