callback은?

지난 포스팅에서 콜백을 간단히 "나중에 함수가 실행될 때 불러와줘"라고 대략적으로 설명하고 넘어감 !

콜백 특) 동기 콜백과 비동기 콜백으로 나눠짐

• 동기(synchronous)콜백
  

• 비동기(asynchronous)콜백

cf. printWithDelay 함수 코드 관련 : 
전달받은 print와 timeout을 결국 setTimeout에 요청하는 것!

단, 콜백함수는 "콜백지옥 !(그러니깐, 콜백함수에서 다른 함수를 부르고, 또 부르고, 또 부르는 현상)"이 발생할 수 있음 !

콜백지옥 예시 )

/* id, password를 입력받아서 로그인 성공
 로그인에 성공하면 역할을 확인하고
 역할이 확인되면 onSuccess함수 실행해서 결과출력 */

class UserStorage {
  loginUser(id, password, onSuccess, onError) {
    setTimeout(() => {
      if (
        (id === "gazero" && password === "12345") ||
        (id === "gayoung" && password === "54321")
      ) {
        onSuccess(id);
      } else {
        onError(new Error("not found"));
      }
    }, 2000);
  }
  getRoles(user, onSuccess, onError) {
    setTimeout(() => {
      if (user === "gazero") {
        onSuccess({ name: "gazero", role: "관리자" });
      } else {
        onError(new Error("no access"));
      }
    }, 1000);
  }
}
//성공하면 onSuccess callback 함수 호출
//실패하면(문제가 발생하면) onError callback 함수 호출

const id = prompt("id를 작성해줘");
const password = prompt("비밀번호를 입력해줘");
const userStorage = new UserStorage();
userStorage.loginUser(
  id,
  password,
  (user) => {
    userStorage.getRoles(
      user,
      (userWithRole) => {
        alert(`안뇽? ${userWithRole.name}, 너의 역할은 ${userWithRole.role}야`);
      },
      (error) => {
        console.log(error);
      }
    );
  },
  (error) => {
    console.log(error);
  }
);
//UserStorage를 이용해서 입력을 통해서 받아온 id, password를 전달해서
//onSuccess, onError처리

코드실행하러 가보기

• ❌ 콜백 체인의 문제점 !

  1. 가독성이 떨어짐
  2. 에러와 디버깅 발생시 해결이 어려움
  3. 유지보수가 어려움