[리액트 기초 스터디] JavaScript 콜백 함수

목차 (OPEN)

• 📑 JavaScript 콜백 함수
• 🟥 콜백 함수란
• 🟧 콜백 함수가 필요한 이유
• 📚 결론

 

 

 

 

 

📑 JavaScript 콜백 함수 (Callback Function)

자바스크립트를 배우다 보면 콜백 함수(Callback function)라는 용어를 자주 접한다.

이 개념은 단순하면서도 자바스크립트의 비동기 처리, 이벤트 핸들링, 함수형 프로그래밍 같은 다양한 분야에서 핵심이 되기 때문에

이번 포스팅에서는 콜백 함수가 무엇인지, 왜 필요한지, 그리고 실제로 어떻게 활용할 수 있는지를 예제와 함께 정리해보려고 한다.

 

 

---

🟥 콜백 함수란

콜백 함수란 자신이 아닌 다른 함수에 인자로 전달되어 실행되는 함수를 말한다.

function main(value){
  value(); // 전달받은 함수를 실행
}

function sub() {
  console.log("sub");
}

main(sub); // sub 함수가 main 함수에 전달되어 실행됨

 

위의 코드에서 sub 함수는 main 함수의 인자로 전달되었고, main 함수 안에서 호출되었다.

따라서 sub은 콜백 함수가 된다.

 

 

---

🟧 콜백 함수가 필요한 이유

만약 콜백을 사용하지 않는다면, 같은 동작을 하는 함수가 중복되어 생겨버린다.

구체적으로 예를 들면 아래와 같다.

function repeat(count) {
  for (let idx = 1; idx <= count; idx++) {
    console.log(idx);
  }
}

function repeatDouble(count) {
  for (let idx = 1; idx <= count; idx++) {
    console.log(idx * 2);
  }
}

repeat(5);       // 1, 2, 3, 4, 5
repeatDouble(5); // 2, 4, 6, 8, 10

 

그런데 이 코드에서의 문제는 repeat와 repeatDouble이 거의 똑같은 로직을 갖고 있다는 점이다.

단지 안에서 출력하는 내용만 조금 다를 뿐인데, 코드가 중복되어 버린다.

 

 

그런데 이럴 때 콜백 함수를 활용하면, 중복을 없애고 더 유연한 함수를 만들 수 있다.

function repeat(count, callback) {
  for (let idx = 1; idx <= count; idx++) {
    callback(idx); // 전달받은 함수 실행
  }
}

repeat(5, function (idx) {
  console.log(idx * 2); // 2배 출력
});

repeat(5, function (idx) {
  console.log(idx * 3); // 3배 출력
});

 

 

그리고 아래와 같이 화살표 함수까지 같이 활용해주면 더욱 간결해진다.

function repeat(count, callback) {
  for (let idx = 1; idx <= count; idx++) {
    callback(idx); // 전달받은 함수 실행
  }
}

repeat(5, (idx) => {
  console.log(idx * 2); // 2배 출력
});

repeat(5, (idx) => {
  console.log(idx * 3); // 3배 출력
});

 

 

---

 📚 결론

콜백 함수는 처음엔 "함수 안에 또 다른 함수를 넣어 실행한다"는 설명 때문에 어렵게 느껴졌는데,

실제로 코드를 따라가다 보니 생각보다 단순하다는 것을 알게 되었다.

 

특히 이번에 살펴본 예제 코드에서 숫자를 어떻게 출력할지라는 동작을 직접 코드로 넣는 대신에

그 동작을 함수로 만들어 전달하는 과정에서 콜백 함수라는 것은 '동작을 매개변수로 전달하는 방법'이라고 이해하게 되었다.

 

앞으로는 map, filter, forEach 같은 자바스크립트 배열 메서드나 이벤트 처리 코드를 볼 때

'아 여기서 이 함수가 콜백으로 넘어가는구나' 하고 자연스럽게 이해할 수 있을 것 같다 😆💛