콜백함수란
자바스크립트에서 콜백 함수는 특정 함수의 인자로 전달되는 함수이다.
주요 특징으로는 특정 함수의 인자로 전달되었을 때 해당 함수 내부에서 원하는 시점에 호출할 수 있다는 것이다.
왜 이런 함수가 있는 것인가
콜백함수가 쓰이게된 배경을 먼저 알아보자.
JS는 비동기적인 작업이 불가능한 싱글 쓰레드 언어
자바스크립트는 싱글 쓰레드 언어이다. 한 번에 여러가지의 일을 동시에 처리할 수 없다는 뜻이다. 하지만 모든 작업들을 동기적으로 하나씩 처리한다면 동작 하나를 위해 수많은 함수가 호출되어야 한다고 가정했을 때 매우 오래걸리는 성능 문제가 발생할 수 있다.
특히 웹사이트에서 사용자가 버튼 하나를 클릭했을 때, 특정 페이지로 이동되는 작업, 조회수를 올려야하는 작업, 사용자가 특정 페이지로 이동했다는 지표를 알려주는 로깅 작업, 곧 이동할 페이지의 정보를 불러오는 작업 등등이 한 번에 하나씩 처리된다면 사용자는 다음 페이지로 이동하기도 전에 브라우저 탭을 닫을 것이다.
비동기 작업을 가능하게 해주는 Web APIs
그래서 자바스크립트가 동작하는 브라우저 엔진은 자체적인 병렬 작업이 가능한 멀티 쓰레드를 가지고 있다. 병렬 작업으로 처리되어야 하는 것들은 이미 Web APIs로 분류하여 제공하고 있다. DOM 객체 조작이나 서버 요청을 처리하는 fetch API나 특정 작업에 지연을 줄 수 있는 setTimeout() 내장 함수와 같은 것들이 이에 속한다.
즉, 자바스크립트는 싱글 쓰레드이지만, 브라우저는 멀티 쓰레드이기 때문에 병렬 작업이 가능한 것이라고 보면 된다.
하지만, 비동기 작업이 만능은 아니다.
예를 들어, 2초가 걸리는 데이터베이스에서 최신 애니 정보를 불러오는 작업이 있다고 가정해보자.
최신 애니를 불러온 직후에 콘솔에 다 불러왔다고 로깅을 해줘야 한다면, 다음과 같이 작성할 것이다.
function getAnimeInfo() {
let animeInfo = "데이터 없음";
setTimeout(() => { // 2초가 걸리는 setTimeout으로 예시
animeInfo = "애니 정보";
}, 2000);
return animeInfo;
}
const result = getAnimeInfo();
console.log(result);여기서 콘솔 결과는 데이터 없음이 된다.
setTimeout()은 비동기적이기 때문에 2초 후에 데이터가 오는 것을 기다리지 않고 콘솔을 출력했기 때문이다.
비동기 작업은 작업을 병렬처리할 수 있게 하여 성능을 올려주지만, 위와 같이 응답 순서를 예측할 수 없다는 단점이 존재한다.
이 때 필요한 것이 바로 콜백함수이다.
어떻게 사용할까
콜백함수와 비동기 작업을 같이 사용하면 비동기 작업과 원하는 다른 작업의 응답 순서를 맞출 수 있다.
먼저 비동기 작업이 끝나고 작동해야할 작업을 함수로 만들어준다.
// 애니 정보를 인자로 받아 콘솔에 출력하는 함수
function callbackFn(data) {
console.log(data);
}그리고 콜백 함수를 원하는 함수(애니 정보 호출 함수)에 인자로 넘겨서 원하는 시점(애니 정보가 다 받아와진 뒤)에 호출해주면 된다.
function getAnimeInfo(callbackFn) {
let animeInfo = "데이터 없음";
setTimeout(() => { // 2초가 걸리는 setTimeout으로 예시
animeInfo = "애니 정보";
callbackFn(animeInfo); // 애니 정보가 변수에 담긴 뒤에 호출한다.
}, 2000);
return animeInfo;
}
getAnimeInfo(callbackFn);어떤 장점이 있는가
우선, 콜백함수가 나오게 된 배경인 비동기 작업들 사이에서 순서를 결정할 수 있다는 것이 가장 큰 장점이고,
저렇게 콜백함수를 인자로 넘기면서 함수들은 각자의 역할에 충실할 수 있다는 장점이 있다고 생각한다. 데이터를 받아오는 함수는 데이터만 받고, 로그를 출력하는 함수는 로그 출력만을 담당하면 된다.
