[TIL] promise의 개념과 콜백 함수 방식과의 차이점

Promise란 ?

Promise는 자바스크립트 비동기 처리에 사용하는 객체이다.

비동기 처리 : 특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 실행하는 자바스크립트의 특성

Promise는 주로 서버에서 받아온 데이터를 처리할 때 사용한다.

Callback 함수 방식과의 차이점

Callback 함수는 연속적인 비동기 패턴을 다룰 때 인자로 callback 함수를 넣어주고 callback 함수를 반복적으로 실행시킴으로써 비동기 작업을 수행한다. 이렇게 되면 같은 코드를 계속 사용하여 코드가 복잡하고 지저분하게 된다. (callback hell에 빠진다고 표현)

반면 Promise를 사용하면 코드를 단순화하고 유지보수성을 높일 수가 있다.

// Callback 함수
function addOneToCallback (num, callback) {
    setTimeout(() => {
    	callback(num + 1);
    }, 1000);
}
addOneToCallback(1, (err, data) => {
    if (err) {
        console.log(err);
    } else {
        addOneToCallback(data, (err, data) => {
            if (err) {
                console.log(err);
            } else {
                console.log(data);
            }
        }
    }
})
// 3

// Promise 사용
function addOneToPromise (num) {
    return new Promise((resolve, reject) => {
    	setTimeout(() => {
    	    resolve(num + 1);
    	}, 1000);
    })
}
// 정상적으로 동작하지 않는 경우를 설정하면 reject 함수 사용 가능
addOneToPromise(1).then((data) => {
    addOneToPromise(data).then((data) => {
        console.log(data);
    }, (err) => {
        console.log(err);
    })
}, (err) => {
    console.log(err);
})

2번밖에 반복시키지 않은 코드임에도 Callback 함수를 사용했을 때보다 Promise를 사용했을 때의 코드가 정돈됨을 한 눈에 볼 수 있다.