출처 : 유튜브 드림코딩 자바스크립트

Callback

▪️ callback : 비동기 처리의 시작
비동기 프로그램 1. callback 2. promise 3. async await

• JavaScript is synchronous.(동기적이다. 동기적 => 정해진 순서에 맞게 실행되는 것)

• Execute the code block in order after hoisitng.

• 호이스팅이 된 이후부터 우리가 작성한 코드 순서에 맞춰서 하나하나씩 동기적으로 실행된다.

• hoisting : var, function declaration 와 같이 선언들이 제일 위로 올라가는 것

• asynchoronous 비동기적이다. -> 언제 코드가 실행될 지 예측할 수가 없는 것.

 console.log('1');
setTimeout(function(){
    console.log('2');
}, 1000); //setTImeout 내의 함수 : callback 함수(비동기적)
console.log('3'); // 1 3 2 순서로 출력이 된다. 

Synchoronous callback (즉각적으로, 동기적으로 실행)

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

Asynchoronous callback(나중에, 언제 실행될 지 알 수 없음)

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

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

총 1 3 hello 2 async callback 순으로 출력됌.

Callback Hell example

class UserStorage {
    loginUser(id, password, onSucces, onError){
        setTimeout(()=>{
            if(
                (id === 'ellie' && password === 'dream') ||
              (id === 'coder' && password === 'academy')
              ){
                  onSucces(id);
              }else {
                  onError(new Error('not found'));
              }
            }, 2000);
    }
    getRoles(user, onSucces, onError){
        setTimeout(()=>{
            if(user === 'ellie'){
                onSucces({name : 'ellie', role: 'admin'});
            }else{
                onError(new Error('no access'));
            }
        }, 1000);
}
}


const userStorage = new UserStorage();
const id = prompt('enter you id');
const password = prompt('enter you 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. 에러가 발생하거다 디버깅하는 경우에도 굉장히 어려움