Callback과 Promise의 차이

https://velog.io/@loopy/%EB%8F%99%EA%B8%B0%EC%99%80-%EB%B9%84%EB%8F%99%EA%B8%B0
지난 번에 비슷한 내용을 정리한 적이 있는데, 둘의 차이를 명확하게 기억하기 위해 차이점을 중심으로 다시 한 번 작성합니다!

1. callback을 사용한 비동기 처리

function async(callback) {
  setTimeout(() => {
    callback("1초 후 실행");
  }, 1000);
}

async(function (msg) {
  console.log(msg);
});

• async 함수는 첫 번째 인자로 callback을 받고, callback이 실행될 때 첫 번째 인자를 console에 출력(실행 시점은 setTimeout으로 인해 1초 후)
• 어떠한 비동기 로직이 끝났을 때 callback 함수를 실행시킴으로써, 비동기 작업이 완료 되었을 때 callback에 작성한 행동을 실행할 수 있게 됨

2. promise를 사용한 비동기 처리

function async() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("1초 후 실행");
    }, 1000);
  })
}

async().then(res => {
  console.log(res);
});

• resolve는 성공 시에, reject는 에러 발생 시에 첫 번째 인자로 어떠한 값을 넘길 수 있음
• resolve는 .then의 첫 번째 인자로, reject는 .catch의 첫 번째 인자로 입력

3. callback과 promise의 차이점

• callback 사용 시: 비동기 로직의 결과값을 처리하기 위해서는 callback 안에서만 처리해야 하고, 밖에서는 비동기에서 온 값을 알 수 없음
• promise 사용 시: 비동기에서 온 값이 promise 객체에 저장되어 코드 작성이 용이해짐

👉🏻 비동기 로직의 결과를 다음 비동기로 전달해서 실행해야 할 때, callback은 점점 깊어져 가독성이 떨어지고 코드 작성이 힘들어짐

function async(result, callback) {
  setTimeout(() => {
    callback(result, function (result) {
      console.log(result);
    });
  }, 1000);
}

async(0, function (res, callback) {
  callback(res)
  async(res + 1, function (res, callback) {
    callback(res)
    async(res + 1, function (res, callback) {
      callback(res)
    });
  });
});

// 0
// 1
// 2

👉🏻 Promise를 사용할 경우 .then을 통해 코드가 깊어지지 않고 이해가 쉬움

function async(result) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(result);
      resolve(result);
    }, 1000)
  });
}

async(0).then(res => {
  return async(res + 1);
}).then(res => {
  return async(res + 1);
})

// 0
// 1
// 2

참고자료
https://jcon.tistory.com/189