콜백과 Promise

인터뷰에서 자주 등장하는 콜백과 Promise의 차이점에 대해 한번 알아보는 시간을 가져보도록 하겠습니다.

흔히 아는 이유

function add5 (a, callback) {
  setTimeout(() => callback(a+5), 100)
}

add5(10, res => {
  add5(res, res => {
    add5(res, res => {
      console.log(res)
    })
 })
})

function add10 (a) {
  return new Promise(resolve => setTimout(() => resolve(a+10), 100))
}

add10(a)
  .then(add10)
  .then(add10)
  .then(add10)
  .then(add10)

콜백은 중첩하여 사용하기 위해서는 흔히 말하는 콜백헬때문에 가독성이 떨어지는 코드가 탄생하게 됩니다. 하지만 Promise를 이용하면 then메소드 때문에 가독성이 더 좋아진다는 점이 있습니다.

또 다른 이유

var a = add5(10, res => {
  add5(res, res => {
    add5(res, res => {
      console.log(res)
    })
  })
})

console.log(a)  // undefined

var b = add10(a)
  .then(add10)
  .then(add10)
  .then(add10)
  .then(add10)

console.log(b)  // 대기 상태인 Promise 객체

변수로서의 이용할 수 있냐 없냐가 엄청나게 큰 차이입니다. 콜백을 이용한 비동기 처리는 값으로 이용하기 어렵습니다. 함수를 실행함과 동시에 평가 되기 때문에 쉬이 이용하기 어렵습니다.
하지만 Promise를 이용하면 함수를 실행하더라도 Promise객체를 반환하고 그 객체를 제가 원할때 then메소드를 이용해서 이용할 수 있기 때문에 좀 더 범용성 있게 활용 가능합니다.