프론트엔드 면접 준비 : Promise와 Callback의 차이

Promise와 Callback은 JavaScript에서 비동기 작업을 처리하기 위한 방법 입니다.

1. Callback

Callback은 함수가 다른 함수에 인수로 전달되어, 특정 작업이 완료된 후에 실행되는 함수입니다. 비동기 작업을 수행한 후에 해당 작업의 결과를 처리하기 위해 주로 사용됩니다.

function fetchData(callback) {
    setTimeout(() => {
        const data = "some data";
        callback(data);
    }, 1000);
}

fetchData((result) => {
    console.log(result); // "some data"
});

장점

• 단순하고 직접적임: 작은 규모의 비동기 작업을 처리할 때는 이해하기 쉽고 빠르게 구현할 수 있습니다.

단점

• Callback Hell: 중첩된 비동기 작업이 많아지면 코드가 복잡해지고 가독성이 떨어집니다. 이를 흔히 "콜백 지옥"이라고 합니다.
• 에러 처리의 어려움: 에러 처리를 각 콜백 내에서 수행해야 하므로 일관된 에러 처리가 어렵습니다.

콜백 함수의 중첩된 비동기 작업에 의한 코드 복잡도가 증가하고 에러 처리가 어려워지는 문제와 같은 단점을 해결하기 위해 ES6부터 Promise가 도입되었습니다.

 

2. Promise

• Promise는 위에서 설명한 대로 비동기 callback의 단점을 보완하기 위해서 ES6(ECMAScript 2015)에서 도입된 객체로 비동기 작업을 더 구조화하고 관리하기 위한 방법을 제공합니다.
• 프로미스 생성자 함수를 통해 인스턴스화됩니다.
• 비동기 작업에 성공하면 resolve 메소드를 호출하여 비동기 처리 결과를 후속처리 메소드로 전달합니다.
• 비동기 작업에 실패하면 reject 메소드를 호출하여 에러 메시지를 후속처리 메소드로 전달합니다.
• Promise 객체는 후속처리 메소드로 then, catch, finally 메서드를 제공하여 비동기 작업의 결과를 처리하여 콜백헬 문제를 해결하고 에러를 처리할 수 있습니다.

// 프로미스 생성
const myPromise = new Promise((resolve, reject) => {
  // 비동기 작업 수행 (예: setTimeout)
  setTimeout(() => {
    resolve('Success!'); // 성공 시 resolve 호출
  }, 2000);
});

// 프로미스 사용
myPromise.then((result) => {
  console.log(result); // 'Success!' 출력
}).catch((error) => {
  console.error(error); // 에러 처리
});

 

장점

• 가독성: then 메서드를 통해 프로미스 체이닝을 사용하면 비동기 작업의 순서를 명확하게 나타낼 수 있어 코드 가독성이 높아집니다.
• 에러 처리의 일관성: catch 메서드를 사용하여 일관된 방식으로 에러를 처리할 수 있습니다.
• 합성 가능성: 여러 개의 Promise를 결합하고 조합하는 것이 상대적으로 쉽습니다(Promise.all, Promise.race 등).

단점

• 상대적으로 복잡함: 콜백에 비해 초기 학습 곡선이 조금 더 가파를 수 있습니다.
• 레거시 코드와의 호환성: 기존에 콜백 패턴으로 작성된 코드와 통합하는 데 약간의 추가 작업이 필요할 수 있습니다.

 

결론

• Callback은 단순한 비동기 작업에 적합하지만, 중첩된 비동기 작업에서는 가독성과 유지보수성 문제가 발생할 수 있습니다.
• Promise는 더 가독성 높은 코드와 일관된 에러 처리를 제공하며, 여러 비동기 작업을 조합하기 쉽게 해줍니다. 현대의 비동기 작업 처리에는 Promise가 더 널리 사용됩니다.