23. Callback & Callback Hell 콜백함수와 콜백 지옥

callback & callback hell

• 출처: https://www.youtube.com/watch?v=s1vpVCrT8f4 [드림코딩 by 엘리]

1. callback

• 우리가 전달해준 함수를 나중에 불러줘~~

console.log('1');

//1초뒤에 콜백함수를 실행하라
//ES6 이전의 코드
setTimeout(
  // 콜백함수
  function() {
    console.log('2');
  }  
  ,1000
); 

//ES6에서 제공하는 Arrow function을 이용
// setTimeout(
//   [이부분이 콜백함수]
//   () => console.log('2')  
//   ,1000
// ); 

console.log('3');

// console.log('1'); 실행
// setTimeout은 해당 callback 함수를 1초 후에 실행하라고 browser 에게 전달
// 응답을 기다리지 않고 바로 console.log('3'); 실행
// 1초후 browser 에서 callback 함수 실행

// 결과값
// 1 
// 3
// 2

3. Synchronus callback 동기식 callback 와 Asynchronus callback 비동기식 callback

// Synchronus callback 동기식 callback
function printImmediately(print){
  print()
}
printImmediately(() => console.log('hello'));


// Asynchronus callback 비동기식 callback  
function printWithDelay(print, timeout) {  
setTimeout(print, timeout);  
}

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

4. callback hell

• callback 안에 콜백이 계속 들어가는 현상
• callback안에 callback안에 callback.....
• 가독성의 문제
• 디버깅의 문제
• 유지보수의 문제
• Class 가 궁금하다면 https://tcss.tistory.com/entry/5-classes-클래스?category=866908 참조

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' && password === 'dream') {
                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, 
    // 콜백 1
    user => {
        userStorage.getRoles(
            user,
            //콜백 2
            userWithRole => {
                alert(`Hello ${userWithRole.name}, you have a ${userWithRole.role} role`);
                // 여기에 콜백 3
                    // 여기에 콜백 4
                        // 여기에 콜백 5 . . . . .
            },
            error => {
                console.log(error);
            }
        );
    }, 
    error => {
        console.log(error);
    }
);