callback 함수
어떤 작업을 다른 객체에게 맡겨놓고, 그 일이 끝나기를 기다리고 있지 않고 내 할 일을 하다가 다른 객체가 작업을 마치면 call back!
non-block(IO작업이 진행되는 동안 작업이 멈추지 않고 다음 작업 수행)이며,
비동기 방식(요청을 하고 바로 제어권을 돌려받는 방식)의 함수인 것입니다.
function myCalculator(num1, num2) {
let sum = num1 + num2;
function myDisplayer(sum) {
document.getElementById("demo").innerHTML = sum; // web 상에 display 해주는 함수
}; // callback 함수 = myDisplayer
}
myCalculator(5, 5); // web 상에 10 이 나온다.console.log("1");
setTimeout(() => console.log("2"), 1000);// () => console.log("2") 가 callbak 함수이다.
console.log("3");
// 1
// 3
// 2(1초뒤 출력)callback 지옥
콜백 지옥(callback hell)은 콜백 함수를 익명 함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들정도로 깊어지는 현상을 얘기합니다. 주로 이벤트 처리나 서버 통신과 같은 비동기적인 작업을 수행하기 위해 이런 형태가 자주 등장하는데, 가독성이 떨어지면서 코드를 수정하기 어렵습니다.
예시를 들어보겠습니다. 아래 코드는 UserStorage 클래스를 이용해서 웹사이트에 로그인 하는 코드를 구현 해보았습니다.
class UserStorage {
loginUser(id, password, onSuccess, onError) {
setTimeout(() => {
if (id === "eamon" && password === "3481") {
onSuccess(id);// id 와 password 가 일치하면 onSucess함수 실행
} else {
onError(new Error("not found"));
// id 와 password 가 불일치하면 onError 실행
}
}, 2000);
}
getRoles(user, onSuccess, onError) {
setTimeout(() => {
if (user === "eamon") {
onSuccess({ name: "eamon", role: "admin" });
// id user 이름이 일치하면 onSucess함수 실행
} else {
onError(new Error("no access"));
// id user 이름이 불일치하면 onError 실행
}
}, 1000);
}
}
이러한 클래스를 이용해서 콜백함수 지옥을 만들어 내면,
const userStorage = new UserStorage();
const id = rl.prompt('enter your id');
const password = rl.prompt('enter your password');
userStorage.loginUser(
id,
password,
user => {
userStorage.getRoles(
user,
userWithRole => {
alert(`hello ${userWithRole.name}, you a have a ${userWithRole.role} role.`);
},
// getRoles의 onSucess함수에 해당하는 콜백함수.
error => {
console.log(error);
// getRoles의 onError에 해당하는 콜백함수.
}
);
},
// loginUser의 onSucess함수에 해당하는 콜백함수.
error => {
console.log(error);
}
// loginUser의 onError에 해당하는 콜백함수.
)callback 지옥의 단점
- 가독성이 떨어진다.
- 디버깅이나 Error code를 찾아내기 어렵다.
참조
Steadily , Daily, Academically, Socially semi-nerd Front Engineer.