Study/JavaScript(Clean code)

[JavaScript][clean-code] Callback Function

갈푸라떼 2022. 6. 15. 15:55

* Callback Function

- callback function을 이용한 함수 위임

 

* callback function 사용하기 전

// callback함수 사용전
function register() {
  const isConfirm = confirm(
    '회원가입에 성공했습니다.',
  );

  if (isConfirm) {
    redirectUserInfoPage();
  }
}

function login() {
  const isConfirm = confirm(
    '로그인에 성공했습니다.',
  );

  if (isConfirm) {
    redirectIndexPage();
  }
}

* callback function 사용후

// callback 사용후
function confirmModal(message, cbFunc) {
  const isConfirm = confirm(message);

  if (isConfirm && cbFunc) {
    cbFunc();
  }
}
  • callback함수는 callback을 받아서 실행을 하는것이기 때문에 함수를 실행시키지 않고 함수 그 자체를 넘겨줘야한다.
    그래야 받은쪽에서 함수를 받고 실행시킨다.

* callback 다른 예시

function register() {
  confirmModal('회원가입에 성공했습니다.', redirectUserInfoPage);
}

function login() {
  confirmModal('로그인에 성공했습니다.', redirectIndexPage);
}
  • callback함수를 통해서 제어권을 다른 함수에 넘기고 그 함수에서 내가 만든 함수를 제어를 하고 실행을 시키는 권한을 가지게 된다.
  • callback함수를 무조건 프로미스로 바꾸고 async await로 바꿀수있는 안좋은 패턴이다라고 생각하지말고 제어권을 위임할 수 있다는걸 알면 보기좋게 리팩토링 할 수있다.
  • callback함수는 함수를 다른 함수에 넘겨서 제어권을 위임할 수 있다.
  • callback함수를 이용하면 어느정도 활용도 있게 코드를 고쳐나갈 수 있다.
  • 함수의 역할이 다른곳에 넘어가다보면 추상화하고 계층을 나누는데 도움이 된다.