ES6 - callback

synchronous vs asynchronous

synchronous

Javascirpt는 동기적이다.

hoisting(var, function declaration) 이후에 코드가 한줄한줄 동기적으로 실행된다.

console.log('1');
console.log('2');
console.log('3');
// 1, 2, 3

asynchronous

console.log('1');
// 콜백함수: 함수를 나중에 다시 실행해준다. 
setTimeout(() => {
  console.log('2');
}, 1000);
console.log('3');
// 1, 3(응답을 기다리지 않고 먼저 출력), 2

Synchronous vs Asynchronous callback

Synchronous callback

// synchronous callback;
function printImmediately(print) {
  print();
}
// asynchronous callback;
function printWithDelay(print, timeout) {
  setTimeout(print, timeout);
}

console.log('1');  // 동기
setTimeout(() => {
  console.log('2');
}, 1000);  // 비동기
console.log('3');  // 동기
printImmediately(() => console.log('hello'));  // 동기
printWithDelay(() => console.log('async callback'), 2000);  // 비동기
// 1, 3, hello, 2, async callback

콜백 지옥 체험

class UserStorage {
  loginUser(id, password, onSuccess, onError) {
    setTimeout(() => {
      if (
        (id === 'ellie' && password === 'dream') ||
        (id === 'coder' && password === 'academy')
        }
      ) {
        onSuccess(id);
      } else {
        onError(new Error('not found'));
      }
    }, 2000);
  }
  
  getRoles(user, onSuccess, onError){
    setTimeout(() => {
      if (user === 'ellie') {
        onSuccess ({name: 'ellie', 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');

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

콜백 체인의 문제점

가독성이 떨어진다.

에러가 발생하거나 디버깅할 시에 어렵다.