[Vanilla JS] callback과 Promise

0. callback과 Promise

callback과 Promise의 차이점에 대해서 살펴보고, Promise에 대해서 좀 더 구체적으로 알아보자.

 

 

1. callback

비동기 동시성 프로그래밍을 하는 방법 중 과거 많이 쓰이던 방법이 바로 callback이다. 

callback이란 비동기 통신이 되었을 때, 즉 요청 후 응답이 왔을 때 그 응답(결과)을 전달할 함수이다.

 

plus라는 함수를 만든다. plus는 setTimeout을 통해 의도적으로 비동기적으로 응답하게 만들었다. plus에서 인자로 들어가는 callback은 응답이 왔을 때 (여기서는 의도적으로 1초 지연시키지만) a와 b를 더하여 반환한다. 

function plus(a, b, callback) {
    setTimeout(() => callback(a + b), 1000)
}

plus(5, 10, res => {
    console.log(res)
})
//15

 

이처럼 callback은 응답이 왔을 때 어떠한 로직을 통해 전달하는 함수이다. 

 

만약 callback을 연속적으로 사용하고 싶다면 다음과 같이 사용할 수 있다.

plus(5, 10, res => {
    plus(res, 10, res => {
        plus(res, 10, res => {
            console.log(res)
        })
    })
})
//35

 

2. Promise

위 callback에서 만든 함수를 이번에는 Promise를 통해 구현해본다.

 

Promise는 인자로 callback과 같은 함수를 받지 않는다. 함수 안에서 Promise를 생성하며 이를 반환한다.

function plus(a, b) {
    return new Promise(resolve => setTimeout(() => resolve(a + b), 1000))
}

plus(5, 10).then(console.log)
//15

 

만약 Promise를 연속적으로 사용하고 싶다면 다음과 같이 사용할 수 있다.

plus(5, 10)
    .then(data => plus(data, 10))
    .then(data => plus(data, 10))
    .then(console.log)
//35

 

 

간단하게 살펴보더라도 callback이 Promise보다 사용하기 불편해 보인다. Promise는 callback의 불편함을 해소하기 위해 만든 것이기 때문에 당연하다.

 

 

3. callback과 Promise의 중요한 차이점

callback과 Promise의 가장 중요한 차이점은 단순히 promise가 사용하기 더 편하다는 것이 아니다. Promise는 Promise라는 class를 통해 Promise를 생성하여 반환한다. 즉 Promise는 일급이다. 

 

아래는 callback과 Promise에 대해서 변수로 저장하고 출력한 코드이다.

function plusCallback(a, b, callback) {
    setTimeout(() => callback(a + b), 1000)
}

const cb = plusCallback(5, 10, res => {
    plusCallback(res, 10, res => {
        plusCallback(res, 10, res => {
            console.log(res)
        })
    })
})

function plusPromise(a, b) {
    return new Promise(resolve => setTimeout(() => resolve(a + b), 100))
}

const pr = plusPromise(5, 10)
    .then(data => plusPromise(data, 10))
    .then(data => plusPromise(data, 10))
    .then(console.log)


console.log(cb) //undefined
console.log(pr) //Promise { <pending> }

callback의 경우 비동기가 코드로써만 존재한다. 따라서 출력을 해보면 undefined로 나온다.

그러나 Promise는 그 자체로 일급이기 때문에 출력하면 Promise가 나온다.

 

Promise는 callback과 달리 현재의 상태를 알 수 있다. 즉 Promise는 값으로 다룰 수 있다. 따라서 사용자는 상황에 맞게 더 정확하고 유연하게 비동기를 관리할 수 있다. 

 

 

4. Promise.then

Promise가 중첩된 상황에서 then을 쓰더라도 사용자가 원하는 값으로 바로 접근할 수 있다.

 

아래는 Promise가 중첩된 코드이다.

Promise.resolve(Promise.resolve(Promise.resolve(1))).then(console.log)
//1

3개의 Promise와 1개의 then이 있다. 중첩된 Promise로 인해 안에 있는 Promise가 출력될 것으로 예상되지만 바로 1이 출력된다.

 

이와 같이 Promise가 중첩되어있더라도 가장 깊은 곳에 있는 값을 한 번의 then으로 불러올 수 있다.