JS. Callback

Callback Function

영어의 의미부터 살펴볼까요? “Call back”은 “다시 전화해달라”라는 뜻을 가지고 있습니다.

이런 의미를 지닌 콜백 함수는 어떤 함수일까요? 의미대로 해석을 한다면 개발자가 전달한 함수를 “나중에 불러줘”라고 생각하면 편합니다.

콜백 예시(setTimeout)

쉬운 예시로 setTimeout()이 있습니다. setTimeout 함수는 일반적으로 handler와 timeout을 argument로 받습니다.

//setTimeout(handler, timeout);
setTimeout(()=>console.log('setTimeout()'),1000);

위에서 사용된 handler가 callback 함수라고 할 수 있습니다.
아래 코드는 위와 같은 의미의 코드입니다.

const callback = function(){
  console.log('setTimeout()');
}

setTimeout(callback, 1000);

Callback 함수는 배열의 map(), filter(), foreach() 등 여러 함수에서 사용할 수 있습니다.

콜백 예시(로그인 성공 여부)

Callback 함수의 응용 예시를 하나 더 보겠습니다. 로그인의 성공여부를 출력해주는 함수입니다.

const login = function (bool, onSuccess, onError) {
  if (bool) {
    onSuccess(bool);
  } else {
    onError(new Error('login fail'));
  }
};

//로그인 성공
login(
  true,
  (bool) => {
    console.log(`login ${bool}`);
  },
  (error) => console.log(error)
);

출력 결과: login true

//로그인 실패
login(
  false,
  (bool) => {
    console.log(`login ${bool}`);
  },
  (error) => console.log(error)
);

출력 결과: login fail

콜백 지옥?

class UserStorage {
  loginUser(id, password, onSuccess, onError) {
    setTimeout(() => {
      if (
        (id === 'nulzi' && password === 'dev') ||
        (id === 'coder' && password === 'chobo')
      ) {
        onSuccess(id);
      } else {
        onError(new Error('not found'));
      }
    }, 2000);
  }

  getRoles(user, onSuccess, onError) {
    setTimeout(() => {
      if (user === 'nulzi') {
        onSuccess({ name: 'nulzi', role: 'admin' });
      } else {
        onError(new Error('no access'));
      }
    }, 1000);
  }
}

const Site = new UserStorage();
let id = prompt('id', 'input id');
let password = prompt('password', 'input password');
Site.loginUser(
  id,
  password,
  (user) => {
    Site.getRoles(
      user,
      (userWithRole) => {
        alert(
          `Hello ${userWithRole.name}, you hava a ${userWithRole.role} role`
        );
      },
      (error) => console.log(error)
    );
  },
  (error) => console.log(error)
);

최종 정리

Callback 함수를 간단하게 정리하면

• 다른 함수의 인자로써 이용되는 함수
• 어떤 이벤트에 의해 호출되어지는 함수

참고 사이트

https://www.youtube.com/watch?v=s1vpVCrT8f4&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=11