JS callback 입문!

출처. https://www.youtube.com/watch?v=s1vpVCrT8f4 

callback 지옥이라서 호출 스택이 많이 쌓여서 지옥인가? 했는데

프로그래머에게 지옥의 의미는

유지, 보수, 수정이었다.

error가 나는 부분이나, parameter를 가지고 와서 어디서 어떻게 쓰이는지 정말 보기 어려우니 지옥이였구나...

다음 편 promise를 어떻게 쓰는지가 중요할 것 같다.

'use strict';

// hoisting
// Synchronous callback
function printImmediately(print) {
    print();
}
// Asynchronous callback
function printWithDelay(print, timeout) {
    setTimeout(print, timeout);
}


// JavaScript is synchronous.
// Execute the code block in order after hoisting.
// hoisting: var, function declaration

// callback ex
console.log('1');   //동기
setTimeout(() => console.log('2'), 1000);   //비동기
console.log('3');   //동기
printImmediately(() => console.log('Sync'));   //동기
printWithDelay(() => console.log('Async'), 2000);   //비동기

// Callback Hell example
class UserStorage {
    loginUser(id, password, onSuccess, onError) {
        setTimeout(() => {
            if (
                (id === 'CJM' && password === 'cjm') ||
                (id === 'abc' && password === 'abc')
            ) {
                onSuccess(id);
            } else {
                onError(new Error('not found'));
            }
        }, 2000);
    }

    getRoles(user, onSuccess, onError) {
        setTimeout(() => {
            if (user === 'CJM') {
                onSuccess({ name: 'CJM', 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);
    }
);

덩굴처럼 엮여서 꼬리를 문 형태로 코드를 짜지 말자!