[JS] Callback : 비동기 처리의 시작

1. 동기와 비동기

동기란?

• 코드가 순서대로 실행되는 것을 의미
• 자바스크립트는 동기적이다.
• hoisting이 된 이후부터 작성한 코드가 순서대로 실행된다.

hoisting이란?
: var, function을 선언한 코드가 제일 위로 올라가게 되는 것

비동기란?

• 동기와 반대로 언제 코드가 실행될지 예상하지 못하는 것을 의미
• ex) setTimeout : 콜백함수를 전달해주면 우리가 지정한 시간후에 콜백함수를 실행해주는 함수

2. Callback

: 우리가 원하는 때에 다시 호출하는 함수

Synchronous callback VS Asynchronous callback

// Synchronous callback
function printImmediately(print) {
  print();
}
printImmediately(() => console.log('hello'));

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

3. Callback 지옥 맛보기

콜백 체인의 문제점

• 가독성이 매우 떨어짐
• 유지보수가 어려움

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

참고자료

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