[Tech] 자바스크립트 콜백함수

콜백함수란 무엇인가?!

• 직역하면, 다른 함수에 매개변수로 넘겨주는 함수.

  function 함수AB(매개변수A, 매개변수B, ..., 콜백함수명) {
    콜백함수명()
  }
  
  함수AB(변수A, 변수B, ..., 콜백함수)
  

• 즉, 매개변수로 변수 or 값이 아닌, 함수를 전달하는 형태.

콜백함수 전달 방식

• 익명 함수로 넘겨, 혼용을 방지한다.

  function 함수A(매개변수, 콜백함수) {
    콜백함수()
  }
  
  함수A(변수, function () {...})
  

• 화살표 함수 형태로, 더 간결하게 나타낼 수 있다.

  function 함수A(매개변수, 콜백함수) {
    콜백함수()
  }
  
  함수A(변수, () => {...})
  

• 별도로 정의된 함수의 이름을 넘겨줘도 된다.

  function 함수B() {...}
  function 함수A(매개변수, 콜백함수) {
    콜백함수()
  }
  
  함수A(변수, 함수B)
  

콜백함수는 이벤트 리스너, 타이머 실행과 같은 이벤트 호출에 빈번하게 사용된다.

---

콜백지옥이란 무엇인가?!

• 다음과 같이, 콜백함수를 전달하는 과정에서
  콜백 안의 함수 호출이 반복되며, 단계마다 깊어지는 현상을 의미.

  function loadData(step, callback) {
    setTimeout(() => {
        if (step === 1) {
            console.log('1단계 완료');
            callback(null, '안녕하세요! 79gun79님.');
        } else if (step === 2) {
            console.log('2단계 완료');
            callback(null, '회원 등급은 GOLD입니다.');
        } else if (step === 3) {
            console.log('3단계 완료');
            callback(null, '무엇을 주문하시겠습니까?'); 
        } else {
            callback('데이터 로드 실패', null); 
        }
    }, 500); 
  }
  
  loadData(1, (result1) => {
      console.log(`[결과] ${result1}`);
  
      loadData(2, (result2) => {
          console.log(`[결과] ${result2}`);
  
          loadData(3, (result3) => {
              console.log(`[결과] ${result3}`);
          });
      });
  }); // 콜백이 너무 깊어짐.   
  

• 이러한 형태의 호출은 코드의 가독성을 저하하고, 유지보수를 어렵게 한다.

콜백지옥의 해결책

1. 콜백함수로 호출되는 익명 함수를 각각의 함수로 분리
2. Promise 체이닝 방식 사용
3. async & await 문법 사용

• 관련된 내용은 다음과 같이 정리해두었다.
  GunBlog, 자바스크립트 복습 2

---

✨ 출처

프론트엔드 기술 면접 질문

---