jsNote 10: Callback 콜백

1. 동기와 비동기

• JavaScript is synchronous 자바스크립트는 동기적이다.
• 호이스팅 된 이후 코드는 작성된 순서에 맞춰 하나하나 동기적으로 실행된다.
• 호이스팅은 var, function 선언이 제일 위로 올라가는 것
• asynchronous는 비동기적, 언제 호출될지 모른다는 의미이다.

console.log('1');
setTimeout(() => console.log('2'), 1000); 
//지정한 시간이 지나면 callback 함수를 호출하는 비동기적 실행방법
//1000ms는 1초로 1, 3이 출력되고 1초 후에 2가 출력
console.log('3');

• setTimeout이라는 함수 안에 하나의 인자로 만든 함수를 전달해주면 1초 뒤에 부른다는 의미에서 callback
• callback도 즉각적으로 실행하는 synchronous callback과 아닌 asynchronous callback 두 종류로 나눠진다.
  
  
  

2. 동기적 callback

function printImmediately(print){
    print(); 
} //프린트하는 콜백을 바로 받기
printImmediately(() => console.log('hello')); //hello

3. 비동기적 callback

function printWithDelay(print, timeout){
    setTimeout(print, timeout); 
    //Print라는 콜백함수를 호출하고 timeout이라는 인자를 전달해서 setTimeout에 요청
}
printWithDelay(()=>console.log('async callback'), 2000); //2초뒤에 async callback 출력

4. callback hell 콜백지옥

class UserStorage{
    loginUser(id, password, onSuccess, onError){
        setTimeout(()=>{
            if(
                (id === 'emma' && password === 'Emma') ||
                (id === 'coder' && password === 'Coder')
            ) {
                onSuccess(id); //id를 전달
            } else{
                onError(new Error('not found')); //error라는 obj 만들기
            }
        }, 2000);
    }

    getRoles(user, onSuccess, onError) {
        setTimeout(() => {
            if(user === 'emma'){
                onSuccess({name: 'emma', role: 'admin'}); //name과 role을 포함한 obj 전달
            } else{
                onError(new Error('no access'));
            }
        }, 1000);
    }
}

//1)입력 받아온 id와 password를 이용해 
//2)login
//3)받아온 id를 이용해 role을 받아옴

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`
                    );
                //로그인 했을 때 받아온 id는 userWithRole이라는 함수에 주어진 id를 이용해 출력
    },
    error => {
        console.log(error);
        }
    );
    }, 
    error => {
        console.log(error);
    }
);

• 콜백함수를 연속해서 쓰면 가독성이 떨어지고 한 눈에 알아보기가 어려우며 디버깅을 해야할 때 매우 어렵다.