콜백 함수 (Callback Functions)

10.03.2022 — JS — 4 min read

💡 콜백 함수의 원리를 예제를 통해 공부해보자

개요 🛫

자바스크립트에서 자주 사용되는 콜백함수에대해 정리하고 이해해보자.

React나 Firebase등을 사용하면서 콜백함수의 기저개념을 모른채로 사용을 해왔다.

이번 글을 통해 콜백함수를 공부하고자한다.

학습 내용 📖

콜백 함수란

정의

다른 함수의 매개변수로 전달되어 수행되어지는 함수

콜백 함수를 매개변수로 호출하는 함수는 고차 함수(Higher-order Function)이라고 한다.

💡 콜백 함수는 자바스크립트의 기본 함수와 형태적으로 다르지 않다. 다만, 함수를 작성한 뒤에 특정한 이벤트가 발생했을때 실행시킬 수 있는 기능을 하기 위한 호출 방식이다.

익숙한 콜백 함수?

자바스크립트에서 onclick과 같은 이벤트 처리 함수는 콜백 함수이다.

<button id="1" onclick="onBtnClick();">버튼</button>
<script>
  function onBtnClick() {
    alert("click");
  }
</script>

위 코드를 보면 onBtnClick함수는 브라우저의 JS API에서 DOM 이벤트 핸들러에 전달이 된 다음, 해당 버튼에 클릭 이벤트가 발생했을때 이벤트 핸들러가 콜백함수를 호출하게된다.

콜백 함수의 사용 이유

자바스크립트는 인터프리트언어임으로 동기적으로 순차적으로 코드를 실행하는데, 콜백 함수를 통해 비동기 처리를 할 수 있는 것이다.

비동기 : 싱글스레드가 멈추는 현상을 방지하여 논블로킹으로 네트워크 통신이 중단되지 않고 다른 작업을 수행한다.

비동기 처리를 하는 경우

네트워크 응답 처리 Front-End에서 Back-End 서버로 요청을 보냈을 때 (ex. API 호출) 응답이 언제 올지 알 수 없으므로 비동기 처리해야한다.
사용자 이벤트 처리 사용자의 이벤트는 예측 불가능하기 때문에 (ex. 버튼 클릭) 이벤트가 발생했을 때 실행될 함수 등을 비동기 처리해야한다.
파일 시스템 작업
의도적으로 지연시키는 기능

예제로 보는 콜백함수

기본적인 콜백 함수

// 콜백 함수
function callbackFunc() {
  console.log("CallBack Function"); // 4. console.log~
}

// 고차 함수
function higherOrderFunc() {
  console.log("Higher-order Function"); // 2. console.log~
  callback(); // 3. Callback Function Call
}

// 메인 호출부
higherOrderFunc(callbackFunc); // 1. Main Call

콜백함수로 구현한 계산기

function add(x, y) {
  return x + y;
}
function sub(x, y) {
  return x - y;
}
function mul(x, y) {
  return x * y;
}
function div(x, y) {
  return x / y;
}

function calculator(callback, a, b) {
  return callback(a, b);
}

console.log(calculator(add, 12, 5)); // 17
console.log(calculator(sub, 12, 5)); // 7
console.log(calculator(mul, 12, 5)); // 60
console.log(calculator(div, 12, 5)); // 2.4

콜백 함수의 주의점

콜백 지옥
call by reference : 객체 타입을 매개변수로 넘겼을 때 원본 데이터에 영향을 줄 수 있음. ... 등등

콜백 함수의 주의점과 문제점이 많다. 이를 해결하기위해 async/await, promise 등의 사양이 추가되었는데

이 내용들은 다른 포스트에서 정리하고자한다.