TIL : Javascript (callback chain)

군밤먹으면서코딩·2021년 5월 25일

JavaScript callback

javascript

목록 보기

11/16

javascript 동작 원리

javascript is syncronous
Hoisting된 이후 코드블럭이 순서대로 실행!

Hoisting이란???

var(변수선언), function declaration(함수 선언) 들이 가장 상단으로 올라가는 것!

callback 함수란?

console.log(1);
setTimeout(() => {
    console.log(2);
}, 1000);
console.log(3);

브라우저에 요청해 1초 뒤에 숫자 2를 출력해줘!! 라고 요청하고! 다시 요청 받아 실행하는 함수! 내 함수를 다시 불러줘!!

syncronous callback

function callImmediately(print) {
    print();
}

callImmediately(() => console.log("hello"));

///출력
1
3
hello
2

callImmediately 함수가 hoisting되면서 가장 상단으로 끌어올라가 선언된다.
console.log()로 실행한 1,3이 출력되고 그 다음 hello가 순서대로 출력된다.
1초뒤에 출력해달라고 브라우저에 요청한 2가 1초뒤에 출력된다!

asyncrounous callback

//asyncronous callback

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

callWithDelay(() => {
    console.log("helllo world");
}, 2000);

마찬가지로 callWithDelay함수가 hoising된다.
2초 뒤에 callback함수 실행시켜줘! 라는 요청 실행

callback chain

하지만 무분별한 콜백함수의 사용은 가독성 뿐만 아니라 코드의 유지보수에도 악영향을 끼친다.

//callback hell

class UserStorage {
    loginUser(id, password, onSuccess, onError) {
        setTimeout(() => {
            if (id === "gyong" && password === "1234") {
                onSuccess(id);
            } else {
                onError(new Error("not found"));
            }
        }, 2000);
    }

    getRoles(user, onSuccess, onError) {
        setTimeout(() => {
            if (user === "gyong") {
                onSuccess({ name: "gyong", role: "admin" });
            } else {
                onError(new Error("no access"));
            }
        }, 1000);
    }
}

const userStorage = new UserStorage();

id = prompt("enter your id:");
password = prompt("enter your password");

userStorage.loginUser(
    id,
    password,
    (user) => {
        userStorage.getRoles(
            user,
            (user) => console.log(`Hello ${user.name} you have ${user.role}`),
            () => console.log("error 발생")
        );
    },
    (error) => console.log(error)
);