var(변수선언), function declaration(함수 선언) 들이 가장 상단으로 올라가는 것!
console.log(1);
setTimeout(() => {
console.log(2);
}, 1000);
console.log(3);
브라우저에 요청해 1초 뒤에 숫자 2를 출력해줘!! 라고 요청하고! 다시 요청 받아 실행하는 함수! 내 함수를 다시 불러줘!!
function callImmediately(print) {
print();
}
callImmediately(() => console.log("hello"));
///출력
1
3
hello
2
//asyncronous callback
function callWithDelay(print, timeout) {
setTimeout(print, timeout);
}
callWithDelay(() => {
console.log("helllo world");
}, 2000);
하지만 무분별한 콜백함수의 사용은 가독성 뿐만 아니라 코드의 유지보수에도 악영향을 끼친다.
//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)
);
이렇게 꼬리에 꼬리를 무는 callback chain은 너무 보기 힘들다 ㅠㅠ
다음 포스트에서 이를 어떻게 깔끔하게 정리할 수 있을지 정리해 보겠다!