[JavaScript] CallBack 콜백함수

2초가 지나면 result에 10이 더해져 값이 찍히는 함수

function increase(number, callback){
    setTimeout(()=>{
        const result = number+10;
        if(callback){
            callback(result);
        }
    }, 2000)
}

increase(0, result=>{
    console.log(result);
})

 

이 함수를 반복하고 싶을 때는 어떻게 해야 할까

 

EX01. CallBack함수

increase(0, result=>{
    console.log(result);
    increase(result, result=>{
        console.log(result);
        increase(result, result=>{
            console.log(result);
        })
    })
})

이렇게 찍을 수 도 있지만 너무 반복적이고 코드가 복잡해진다.

 

 

EX02. Primise

콜백 지옥 같은 코드의 사용을 대체할 수 있는 Promise를 이용할 수 있다. (ES6에서부터 도입)

function increase(number){
    const promise = new Promise((resolve, reject)=>{
        setTimeout(()=>{
            const result = number+10;
            if(result>50){
                const e = new Error("초과값");
                return reject(e);
            }
            resolve(result); 
        },2000);
    });
    return promise;
}

increase(0).then(number=>{
    console.log(number);
    return increase(number);
}).then(number=>{
    console.log(number);
    return increase(number);
}).then(number=>{
    console.log(number);
    return increase(number);
}).then(number=>{
    console.log(number);
    return increase(number);
})

 

EX03. async/await

Primise를 더욱 손 쉽게 사용하기 위해 ES8부터 도입되었다.

이 문법을 사용하려면 함수 앞 부분에 async 키워드를 도입하고, 해당 함수 내부에서 await를 사용

 

 

 

참고

https://velog.io/@zenu98/asyncawait-%EC%82%AC%EC%9A%A9-%EB%B0%A9%EB%B2%95#%EC%BD%9C%EB%B0%B1-%ED%95%A8%EC%88%98