[JavaScript] 9. Callback

시작하기 앞서…
javascript는 동기적이다. 즉, hoisting이 된 이후부터는 위에서부터 아래로 코드가 나타나는 순서대로 작동한다.
hoisting: var 변수나 함수 선언들이 자동으로 제일 위로 올라가는 것

Callback

setTimeout(() => console.log('hi'), 1000);

이때 setTimeout 메서드 안에 있는 함수(console.log('hi'))를 콜백함수라고 한다.
해당 콜백함수는 바로 실행되는 것이 아니라 1000ms(1초)가 지난 뒤에 실행된다.
Callback 함수: “나중에 다시 불러줘” 하면서 전달하는 함수

Synchronuous callback

즉각적으로 실행하는 동기적 콜백

function printImmediately(print){
    print();
}

printImmediately(() => console.log('sync callback'));

Asynchronuous callback

나중에 언제 실행될지 예측할 수 없는 비동기적 콜백

function printWithDelay(print, timeout){
    setTimeout(print, timeout);
}

printWithDelay(() => console.log('async callback'), 2000);

😈 콜백 지옥 체험

class UserStorage{
    loginUser(id, password, onSuccess, onError){
        setTimeout(() => {
            if((id === 'ann' && password === 'hello') || (id === 'coder' && password === 'academy')){
                onSuccess(id);
            }else{
                onError(new Error('not found'));
            }
        }, 2000);
    }
    
    getRoles(user, onSuccess, onError){
        setTimeout(() => {
            if(user === 'ann'){
                onSuccess({name: 'ann', 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. 가독성이 떨어진다
2. 에러가 발생했을 경우 디버깅을 하기 굉장히 어렵다.
3. 유지 보수가 어렵다.

따라서 다음 시간에 promise와 async, await을 이용해 어떻게 비동기 코드를 깔끔하게 작성할 수 있는지, 조금 더 병렬적이고 효율적으로 네트워크 통신을 어떻게 할 수 있는지 알아볼 예정이다.

📁 참고

DreamCoding

---

💛 개인 공부 기록용 블로그입니다. 👻

맨 위로 이동하기