📒 목차

• 📌 Callback이란?
• 📌 Promise란?
• 📌 참조

---

📌 Callback이란?

자바스크립트에서는 함수가 받는 인자의 값을 string, number 뿐만 아니라 함수 자체로도 받을 수 있다.

여기서 인자로 받는 함수를 다시 호출하는 기능을 callback이라 한다.

아래 예제를 보게되면, add 함수를 호출하게되면 인자로 10과 callback 함수를 보내게 된다.

callback 함수는 반환값으로 5를 더하는 기능을 갖고 있다.

따라서 add 함수는 callback 함수의 반환값을 반환하게 된다.

✅ 예제

function add(a, callback) {
  return callback(a)
}
add(10, function (res) { 
  return res +5
});

✅ Callback Hell

callback hell은 callback을 연속으로 사용했을 때, 유지보수가 힘들어지는 문제를 의미한다.

아래의 예시를 보게 되면, add 함수를 연속적으로 호출하여 10에 5+5+5+5를 하는 코드이다.

이렇듯 단순한 코드도 callback을 연속적으로 사용하게 되면 callback hell이 발생하게 된다.

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

📌 Promise란?

Primise란 기본적으로 callback과 같은 일을 한다.

하지만 primise는 작업이 끝난 후, 실행할 함수를 제공하는 것이 아니라 primise의 메소드인 .then()을 호출하게 된다.

✅ 예제

let promise = new Promise(function(resolve, reject) {
  // executor (제작 코드, '가수')
});

new Promise에 전달되는 함수는 executor(실행자, 실행 함수) 라고 부른다.

executor는 new Promise가 만들어질 때 자동으로 실행되는데, 결과를 최종적으로 만들어내는 제작 코드를 포함한다.

executor의 인수 resolve와 reject는 자바스크립트에서 자체 제공하는 콜백이다.

개발자는 resolve와 reject를 신경 쓰지 않고 executor 안 코드만 작성하면 된다.

대신에 둘 중 하나는 반드시 호출해야한다.

• resolver(value) : 일이 성공적으로 끝난 경우, 그 결과를 나타내는 value와 함께 호출한다.

• reject(error) : 에러 발생 시 에러 객체를 나타내는 error와 함께 호출한다.

즉, executor는 자동으로 실행되는데 여기서 원하는 일이 처리된다.

처리가 끝나면 executor는 처리 성공 여부에 따라 resolve나 reject를 호출한다.

추가적으로, new Promise 생성자가 반환하는 promise 객체는 다음과 같은 내부 프로퍼티를 갖는다.

• state — 처음엔 "pending"(보류)이었다 resolve가 호출되면 "fulfilled", reject가 호출되면 "rejected"로 변한다.

• result — 처음엔 undefined이었다 resolve(value)가 호출되면 value로, reject(error)가 호출되면 error로 변한다.

📌 참조

https://techlog.io/Javascript/General/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B9%84%EB%8F%99%EA%B8%B0%ED%86%B5%EC%8B%A0-callback-promise-async-await-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0/#Callback-%EC%98%88%EC%A0%9C

https://ko.javascript.info/promise-basics