TIL - 비동기 Callback

Javascript is synchronous.

자바스크립트는 동기적이다. 호이스팅이 된 이후부터 동기적으로 실행된다.
(호이스팅은 선언된 함수나, 변수가 범위에 최상단으로 올라가는 것이다.)

Synchronous callback (동기적 콜백)

자바스크립트 엔진이 선언된 printImmediately를 호이스팅해서 맨 상단으로 올려서 순서대로 코드를 실행한다.

Asynchronous callback (비동기적 콜백)

비동기 함수도 호이스팅이 되어서 맨 위에서 선언된 후 차례대로 실행된다.
setTimeout을 랩핑하는 printWithDelay를 만들었다.

Callback 지옥 체험

// Callback hell example

class UserStorage {
  loginUser(id, password, onSuccess, onError) {
    setTimeout(() => {
      if (
        (id === 'ellie' && password === 'dream') ||
        (id === 'corder' && password === 'academy')
      ) {
        onSuccess(id);
      } else {
        onError(new Error('not found'));
      }
    }, 2000);
  }
  getRoles(user, onSuccess, onError) {
    setTimeout(() => {
      if (user === 'corder') {
        onSuccess({ name: 'gichoel', role: 'admin' });
      } else {
        onError(new Error('no access'));
      }
    }, 1000);
  }
}

const userStorage = new UserStorage();

const id = prompt('enter your id');
const password = prompt('enter your password');

userStorage.loginUser(
  id,
  password,
  (user) => {
    userStorage.getRoles(
      user,
      (userWithRole) => {
        alert(
          `Hello ${userWithRole.name}, you have a ${userWithRole.role} role`,
        );
      },
      (error) => {
        console.log(error);
      },
    );
  },
  (error) => {
    console.log(error);
  },
);