해당 글은 tistory/Bigtop 님의 글을 개인 공부 및 기록 목적으로 적극적으로 인용 및 참고하였음을 밝힙니다. REF: https://bigtop.tistory.com/35

---

비동기 처리와 콜백함수 추천 참고자료 :

https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/

---

콜백함수

콜백함수는 간단히 말해, 다른 함수의 매개변수에 인자로 넘겨준 함수를 말한다. 함수의 인자로 들어온 함수는 그 내부에서 필요에 따라 나중에 호출(called back)된다는 것이 콜백함수의 개념이다.

자바스크립트의 함수는 일급 객체이다. 다시 말해, javascript는 함수를 값으로서 변수와 동일하게 취급, 관리 한다는 의미이다.

이런 일급 객체로서의 함수는 아래와 같은 특징을 가진다.

1. 변수나 데이터 안에 담길 수 있다.
2. 매개변수로 전달할 수 있다.
3. 반환 값으로 사용될 수 있다.
4. 실행도중에 생성될 수 있다.
   
   

콜백 함수는 두번째 특징인 매개변수로 전달할 수 있음 의 특징을 활용한다.

이해해보자

아래의 예제는 콜백함수의 간단한 예시이다.

function checkGang(count, link, good) {
  count < 3 ? link() : good();
}

function linkGang() {
  console.log('1일 3깡은 기본입니다. 아래 링크를 통해 깡을 시청해주세요');
  console.log('https://youtu.be/xqFvYsy4wE4');
}

function goodGang() {
  console.log('오늘 할당량은 모두 채우셨습니다! :)')
}

checkGang(2, linkGang, goodGang);

보시다시피 총 세개의 함수가 선언되었고,

checkGang()함수의 인자로 linkGang(),goodGang()함수가 전달되고 그 내부에서 호출되었다.

따라서 해당 예시의 콜백함수는 linkGang함수와 goodGang함수이며, 첫번째 매개변수인 count의 값에 따라 linkGang 또는 goodGang함수가 그 내부에서 호출(Called Back)된다.

콜백함수의 필요성

콜백함수를 사용하는 이유는

• 변수의 유효범위(scope)
• 동기 / 비동기 처리방식 : https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/
• 클린코드
• 재사용성
  ...

등 여러가지 이유가 될 수 있다.

다만 해당 글에서는 간단한 이해만을 가지고 넘어가는 목적을 가지기에 추후 필요에 따라 심화된 내용을 다뤄보고자 한다.

마지막으로 클린코드 관점에서의 콜백 함수 활용의 매우 간단한 예시를 보고 마무리하겠다.

오리지날 코드

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);

---

ref : https://bigtop.tistory.com/35