비동기 처리의 시작 콜백 이해하기, 콜백 지옥 체험

💖 자바스크립트는 동기적 vs 비동기적?

자바스크립트는 동기적이다. 호이스팅(var, function 선언들이 자동적으로 제일 위로 올라감)이 된 이후부터, 하나하나씩 순서대로 실행된다. 비동기 처리 방식으로 동작하는 setTimeout 함수를 사용하면, 비동기적 콜백을 만들 수 있다.

//동기적 콜백(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);

💖 콜백 예제

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

// id & password 받고 -> 로그인하고 -> 역할받아오기
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)}
);

💛 콜백 체인의 문제점

콜백함수 안에서 다른 걸 호출하고 그 안에서 또 전달하고 이런 식으로 하면, 가독성이 떨어지고 로직을 한 눈에 이해하기도 어렵다. 에러가 발생하거나 디버깅을 할 때도 어렵다. 체인이 길어지면 길어질 수록 유지보수가 어렵다.