드림코딩 엘리 JS 내용 정리(11) - callback

javascript는 기본적으로 hoisting을 제외하면 동기적인 언어이다.
여기서 동기적이라하면 위에서 아래로 순차적으로 실행됨을 말한다.

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

setTimeout()을 통해 비동기 메소드를 간접 체험할 수 있다.

console.log('1');
setTimeout(function() {
    console.log('2');
}, 1000)
console.log('3');
// 1
// 3
// 2

여기서 callback이란 파라미터로 함수를 주어서 나중에 불러오는 형태를 말한다.

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

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')
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)
    }
)

1. 사용자로 부터 id, password를 입력받는다.
2. 받은 id, password로 loginUser()를 실행합니다.
3. loginUser()의 콜백 메소드 onSuccess(), onError()를 정의하여 넣습니다.
4. 올바른 id, password를 넣을 경우, onSuccess()실행
5. onSuccess()안에 getRoles()함수 실행
6. getRole안에 onSuccess, onError 실행
   ...

• 보기도 어렵고, 디버깅 할 때 복잡해질 수 있다고 함