자바스크립트에서 비동기 처리를 하기 위해서는 callback 또는 promise를 사용하게 된다.
인자로 받은 수에 10을 더해서 1초 뒤 반환하는 함수인 add10을 callback과 promise로 각각 작성하여 그 차이를 비교해보고자 한다.
callback
function add10(a, callback) {
setTimeout(() => callback(a + 10), 1000);
}
add10(5, (res) => {
console.log(res);
})promise
function add10(a) {
return new Promise((resolve, reject) => setTimeout(() => resolve(a + 10), 1000));
}
add10(5).then((res) => {
console.log(res)
});- resolve는 성공했을 때, reject는 실패했을 때 첫 번째 인자로 어떠한 값을 넘길 수 있다.
- resolve는
.then의 첫 번째 인자가 되고, reject는.catch의 첫 번째 인자가 된다.
callback과 promise의 차이
비동기 로직의 결과값 처리
// callback
function add10(a, callback) {
var rst;
setTimeout(() => {
rst = callback(a + 10);
}, 1000);
return rst
}
var callback_rst = add10(5, (res) => {
return res;
})callback을 사용할 때 비동기 로직의 결과값을 저장하기 위해 위처럼 코드를 작성했다면, callback_rst는 항상 undefined가 된다.
// promise
function add10(a) {
return new Promise((resolve, reject) => setTimeout(() => resolve(a + 10), 1000));
}
var promise_rst = add10(5).then((res) => {
return res
});반면 promise_rst는 비동기 처리된 결과값이 정상적으로 저장된다.
이는 promise를 사용하면 비동기 결과값이 promise 객체에 저장되기 때문이다.
참고
