JavaScript - Promise와 Callback 차이점

Promise

자바스크립트 비동기 처리에 사용되는 객체
비동기 작업이 완료되면 프로미스 객체가 이행(resolve)되고, 실패하면 거부(reject)
.then() 메서드를 사용하여 성공적인 완료 시 결과를 처리하고, .catch() 메서드를 사용하여 실패 시 에러를 처리할 수 있음

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve('Data received');
        }, 1000);
    });
}

Callback

콜백(callback)은 비동기 작업이 완료되었을 때 호출되는 함수

주로 콜백 함수를 사용하여 비동기 작업의 결과를 처리하거나 다음 작업을 지정

function fetchData(callback) {
    setTimeout(() => {
        callback('Data received');
    }, 1000);
}

Promise와 Callback 차이점

• 콜백은 비동기 코드를 처리하는 전통적인 방법으로, 콜백 함수를 사용하여 비동기 작업의 완료를 처리

• 프로미스는 비동기 작업의 성공 또는 실패를 나타내는 객체이며, 보다 선언적이고 유연한 방식으로 비동기 코드를 처리

• 콜백은 콜백 헬(callback hell)이 발생할 수 있지만, 프로미스는 체이닝을 통해 이를 해결할 수 있음!!

• 프로미스는 ES6부터 지원되며, 현대적인 JavaScript 개발에서 많이 사용

• 콜백 함수는 비동기 로직의 결과값을 처리하기 위해서 callback 안에서만 처리를 해야하고, 콜백 밖에서는 비동기에서 온 값을 알 수가 없음
  매번 비동기를 실행해야지 값을 사용 할 수 있고, 비동기 로직의 결과를 다음 비동기로 전달해서 실행해야 할때 콜백은 점점 깊어져서 가독성이 매우 안 좋아짐

• 하지만, Promise를 사용하면 비동기에서 온 값이 프로미스 객체에 저장되기 때문에 코드 작성이 용이해짐!! 프로미스는 .then 메소드를 통해서 저장되어 있는 값을 원하는 때에 사용 할 수 있고, .then 을 통해 코드의 깊이가 깊어지지 않고 이해하기 쉬움