[Java Script] async 비동기처리/ Callback과 콜백 지옥에 대해 알아보자!

[동기와 비동기]

자바스크립트는 동기적인 언어이다.

호이스팅이 된 이후부터 작성된 코드 순서대로 동기적으로 실행된다는 것이다.

 

호이스팅이란?

var 변수와 function declaration이 자동적으로 맨 위에 올라가는 것

 

async는 비동기적으로 언제 코드가 실행될지 모르는 것

대표적으로 settimeout이 있다. (브라우저에서 제공되는 api)

지정된 시간이 지나면 콜백 함수를 실행한다.

 

 

[callback이란?]

콜백이란 다른 함수가 실행을 끝낸 뒤 실행되는 함수를 말한다.

자바스크립트에서 함수는 object인데, 이 때문에 함수는 다른 함수의 인자로 쓰일 수도 있고

어떤 함수에 의해 리턴될 수도 있다.

이때 인자로 넘겨지는 함수를 콜백 함수라고 한다.

 

 

[동기와 비동기에서 callback]

나중에 내 함수를 불러줘~~ 하는 게 콜백이다.

비동기일 때만 쓰일까?

노노~

 

동기적으로 하는 synchronous callback
자바스크립트의 선언 호이스팅된다.
순서대로 실행함

//Synchronous callback
function printImmediately(print){
    print() ;// 콜백함수인 print를 바로 실행
    
}

printImmediately(()=> console.log('hello'))

여기서 print라는 콜백 함수인데 동기적으로 했을 때는 바로 실행한다.

 

 

비동기 콜백

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

printWithDelay(()=> console.log('async callback'), 2000)

비동기적으로 print콜백 함수를 실행한다.

 

---

[콜백 지옥]

이런 콜백들로만 코드를 작성해서 계속 엮으면?? 콜백 지옥이 발생!!!

 

이런 콜백들로만 코드를 작성해서 
이렇게 콜백을 계속 엮으면?
콜백 지옥이 발생

//Callback Hell example
class UserStorage{
    loginUser(id, password, onSuccess, onError){
        setTimeout(() => {
            if(
                (id === 'ellie' && password === 'dream')||
                (id === 'coder' && password === 'academy')
            ){
                onSuccess(id) //onSuccess라는 콜백을 전달해준다.
            }
            else{
                onError(new Error('not found'));
            }
        },2000 );
    }
    getRoles(user, onSuccess, onError){
        setTimeout(() => {
           if(user==='ellie'){
               onSuccess({name: 'ellie', role : 'admin'})
           } else{
               onError(new Error('no access'));
           }
        }, 1000);

    }
}
//사용자에게 id와 페스워드를 받아온다.
//성공이라면 역할을 받아온다. 
//성공하면 출력한다.

const userStorage = new UserStorage();
const id = prompt('enter your id');
const password = promt('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)
})

 

 

이 부분이 바로 콜백 지옥인데

문제점이 무엇이냐?

 

• 비즈니스 로직을 한눈에 알아보기 힘들다.
• 가독성이 떨어진다.
• 에러가 발생하고 디버깅을 해아 할 때 굉장히 어려워진다.
• 유지보수가 어려워진다.

 

이런 문제점은 바로 Promise로 해결할 수 있다!!

다음 게시물에서... 계속됨