Web JavaScript Callback 함수
Call Back 함수
Java Script의 처리 순서는 위에서 아래로 진행이 된다. 여기서 동기 처리와 비동기 처리로 구분할 수 있다.
Synchronous callback (동기 콜백)
function printImmediately(print) {
print();
}
printImmediately(()=> console.log('hello'));
printImmediately() 함수에 print라는 함수를 넣고 그대로 실행하게 한다.
Asynchronous callback (비동기 콜백)
function printWirthDelay(print, timeout) {
setTimeout(print,timeout);
}
printWirthDelay(()=>console.log('asynce callback'),2000);
만약 순서를 비동기 콜백을 진행하고 동기 콜백함수를 차례로 아래와 같이 선언 하였다면
printWirthDelay(()=>console.log('asynce callback'),2000);
printImmediately(()=> console.log('hello'));
hello가 먼저 출력이 되고 asynce callback 은 2초뒤에 출력이 되는것을 확인 할 수 있다.
Call back Hell (콜백 지옥)
콜백 함수만을 사용하게 되면 함수에 함수를 호출 할때 콜백 지옥을 경험하게 된다.
// 클래스 생성
class UserStorage{
//로그인시 함수
loginUser(id, password, onSuccess, onError){
setTimeout(()=>{
if(
(id==='Kim' && password === 'byungin')||
(id==='coder' && password === 'example')
){
onSuccess(id);
}else{
onError(new Error('not found'));
}
},2000);
}
// 역할을 가져오는 함수
getRoles(user,onSuccess, onError){
setTimeout(()=>{
if(user === 'Kim'){
onSuccess({name:'Kim',role:'admin'});
}else{
onError(new Error('no access'));
}
}, 1000);
}
}
const userStorage = new UserStorage();
const id = prompt('id 입력');
const password = prompt('비번 입력');
userStorage.loginUser(
id,
password,
user =>{
userStorage.getRoles(user,userWithRole =>{ //getRoles에 있는 함수를 다시 실행하여 진행
alert(`Hello ${userWithRole.name}, you have a ${userWithRole.role} role`);
},
error =>{
console.log(error);
}
);
},
error =>{
console.log(error);
}
);