JavaScript - CallBack Function

1. 동기와 비동기
   자바스크립트는 동기적인 아이로 호이스팅 된 이후부터 코드가 작성된 순서에 맞춰서 하나씩 동기적으로 실행이된다.
   *호이스팅 : var변수와 function 선언들이 자동적으로 제일 위로 올라가는 현상.
   

따라서 동기는 정해진 순서에 맞게 코드가 실행되는 것이고 비동기적인 것은 언제 코드가 실행될지 예측할 수 없는 것을 말한다.

setTimeout()함수의 경우 지정한 시간이 지나면 전달한 콜백 함수를 호출하는 함수인데
콜백 함수라는 건 전달해준 함수를 나중에 다시 불러줄 수 있는 개념의 함수로 두번째 인자에 시간을 넣어주면 그 시간이 자난 뒤에 콜백함수가 실행되어 비동기적인 시행이 이뤄진다.

2. 콜백 마지막 정리
   즉 방금 setTimeout()함수처럼 시간이 지난 다음 지정한 함수를 콜백, 즉 다시 불러오와서 전달하는 이런 함수를 콜백함수라고 한다. 보통은 arrow function으로 전달하곤 한다.

-동기적 콜백함수

function printImmediately(print){
  print();
}
printImmediately(()=>console.log('sync'))

-비동기적 콜백함수

function printWithDelay(print, timeout) {
  setTimeout(print, timeout);
}
printWithDelay(()=>console.log('async callback'),2000)

3. 콜백 지옥
4. 첫번째로 사용자에게 아이디와 패스워드를 입력을 받아 온다.
5. 입력받아온 아이디와 패스워드를 이용해서 첫번째로는 서버에게 로그인을 하도록 만든다.
6. 로그인이 성공적으로 된다면 우리가 로그인한 사용자의 아이디를 다시 받아 받아온 id를 이용해서 role을 다시 요청해서 받아온다.
7. 역할을 요청해서 역할이 성공적으로 받아오면 사용자의 이름과 역할이 들어있는 오브젝트를 출력해본다.

// Callback Hell example
class UserStorage{
  // 사용자의 데이터를 서버에게서 데이터를 받아오는 클래스
  loginUser(id, psw, onSuc, onErr){
    // 사용자로부터 id,psw받아 로그인하고 로그인 이뤄지면 onSuc 콜백함수를, 실패시 onErr 콜백함수를 호출
    setTimeout(()=>{
      if (
        (id === 'ellie' && psw === 'dream') ||
        (id === 'coder' && psw === 'academy')
      ) {
        onSuc(id);
        // 아이디 비밀번호가 위 조건에 맞으면 전달한 onSuc 콜백함수에 id전달
      } else {
        onErr(new Error('not found'));
        // 만약 여기에 포함되지 않는 경우라면 onErr콜백을 불러주면서 
        // Error라는 오브젝트 만들어'not found' 전달
      }
    },2000);
  }
  getRoles(user, onSuc, onErr){
    //사용자의 데이터를 받아서 사용자 마다 가지고 admin, guest처럼 역할을 서버에게 다시 용청해서 정보를 받아오는 api
    setTimeout(()=>{
      if (user === 'ellie') {
        onSuc({ name: 'ellie', role: 'admin' });
      } else {
        onErr(new Error('no access'));
                // Error라는 오브젝트를 만들어서 'no access' 전달해 줄 거에요
      }
    },1000);

  }

}

const userStorage = new UserStorage();
const id = prompt('ent your id');
const psw = prompt('ent your psw');

userStorage.loginUser(
  id, 
  psw, 
  user => {
    userStorage.getRoles(
      user, 
      userWithRole=>{
        alert(`welcome ${userWithRole.name}, you have a ${userWithRole.role} role`)
      },
      err => {

      }
    );
  }, 
  error => {console.log(err)}
);

4. 콜백 체인의 문제점
   -가독성이 많이 떨어진다.
   -비즈니스 로직을 한눈에 이해하기도 어렵다.
   -에러 발생시에도 디버깅이 어려워 문제를 분석하기 까다롭다/
   -유지보수가 어렵다.