Promise와 callback의 차이점

Promise

정의 및 역할

비동기 코드 작성 시 흔히 볼 수 있다.
한국어로 약속이라는 의미로 무언가 실행 될 것이라는 보증이다.

비동기 이벤트가 실행 되었는지 여부와 이벤트가 일어난 후 무엇을 할지 결정한다.

상태

• fulfilled(resolved)
  • 성공
• rejected
  • 실패
• pending
  • 미완료 즉, 프로미스가 성공이나 실패하지 않은 상황

예시 코드

let promise = new Promise((resolve, reject) => {
  const num = Math.random();
  if(num < 0.5) {
    resolve(result);
  } else {
    reject(result);
  }
});

promise
  .then(result => console.log(result)) // resolve 시 결과 반영
  .catch(error => console.log(error)); // reject 시 에러 캐치

프로미스의 매개변수(parameters)

• 콜백 함수(callback function, anonymous 라고도 불린다)
  • 매개변수로 하나의 콜백 함수를 받는다.

콜백 함수의 매개변수

• resolve, reject
  • 콜백 함수 내부의 코드가 모두 제대로 실행되면 resolve를 호출한다.
  • 만약 코드 실행 중 오류가 생기면 reject를 호출한다.

장점

• 코드 가독성을 향상시킬 수 있다.
• 비동기 동작을 비교적 쉽게 다룰 수 있다.
• 에러 핸들링이 용이하다.

Callback

정의 및 역할

다른 함수의 매개변수로 사용되는 함수를 콜백이라 부른다.
(콜백 함수를 매개변수로 사용하는 함수를 higher-order function이라 부른다.)

자바스크립트에서 함수는 객체이기 때문에 다른 함수의 매개변수로 사용할 수 있다.

어떤 다른 작업이 끝난 후에 무언가(또 다른 함수)를 실행시킬 목적으로 사용한다.

function add(num1, num2, callback) {
  console.log(`${num1}과 ${num2}의 합은 ${num1 + num2}.`);
  callback();
}

function someCallbackFn() {
  console.log('다른 작업이 끝난 후에 실행됩니다.')
}

add(3, 4, someCallbackFn);

// result:
// 3과 4의 합은 7.
// 다른 작업이 끝난 후에 실행됩니다.

사용처

• 배열 메소드
  • Array.map(), filter(), find(), ...
• 브라우저 이벤트
• AJAX 요청
• 리액트, 노드JS 개발

장점

• 다른 함수의 결과가 나올 때까지 기다렸다가 함수를 실행하게 해준다.

차이점

• 프로미스는 반환하는 프로미스 객체에 콜백 함수를 연결할 수 있게 해준다.
• 여러 개의 콜백을 겹쳐서 사용하면 콜백 지옥을 만들어낼 수 있는데, 프로미스는 then으로 callback을 연결시킬 수 있기 때문에 가독성 면에서 좋다.