1. callback과 Promise

1 ) callback

function add10(a, callback) {
  setTimeout(() => callback(a + 10), 100)
}

add10(2, (res) => {
  add10(res, (res) => {
    add10(res, (res) => {
      log(res)
    })
  })
}) // 32

<aside> 💡 callback은 지속적인 함수 사용을 하게 되면 위와 같이 콜백지옥에 빠지게 된다

</aside>

2 ) promise

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

add20(2)
  .then(add20)
  .then(add20)
  .then(log) // 62

<aside> 💡 promise를 사용하면 콜백지옥 없이 간단하게 then을 통해서 연속적인 사용이 가능하다

</aside>

목차로 이동🚀

2. 비동기를 값으로 만드는 Promise

<aside> 💡 callback과 promise의 차이점 중 제일 중요한 것은 then 메소드를 통해서 결과를 꺼내본다는 점이 아닌 비동기를 일급 값으로 다룬다는 점이 매우 중요하다

promise는 promise라는 인스턴스를 리턴하는데 대기, 성공, 실패라는 상태를 다루는 일급 값이라는 점이 아주 중요하다!

</aside>

function add10(a, callback) {
  setTimeout(() => callback(a + 10), 100)
}

let callback = add10(2, (res) => {
  add10(res, (res) => {
    add10(res, (res) => {
      log(res)
    })
  })
})

log(callback) // undefined

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

let promise = add20(2)
  .then(add20)
  .then(add20)
  .then(log)

log(promise) // Promise {<pending>}

<aside> 💡 보는 것과 같이 callback은 undefined로 종료되지만 promise는 Promise {<pending>}이라는 상태로 대기하기 때문에 비동기를 값으로 만들어두고 다시 재사용이 가능하다는 점이 매우 중요하다

⇒ 값으로 다룰 수 있다는 뜻은 곧 일급이라는 뜻이다 !! ⇒ 변수에 담을 수 있다 ⇒ 함수의 인자로 사용될 수 있다 ⇒ 함수의 결과로 사용될 수 있다

</aside>

목차로 이동🚀

3. 값으로서의 Promise 활용

<aside> 💡 promise가 일급의 성질을 가지는 것을 활용해보자!

</aside>

const go1 = (a, f) => f(a)
const add5 = (a) => a + 5

log(go1(5, add5))

<aside> 💡 위의 상황에서 go1 함수가 잘 작동하려면 어떤 전제 조건이 필요할까?

</aside>