[비교] Callback함수, Promise함수

---

Callback 함수

콜백 함수는 다른 함수에게 인자로 전달되는 함수를 의미한다. 

 

웹 개발에서 자주 사용되는 비동기적 작업일 때 사용하고 예를 들어. 웹페이지에서 서버로부터 데이터를 받아야 할 때, 데이터 로딩이 완료된 후 어떠한 작업을 수행하고 싶을때 사용한다. 

 

function orderFood(menu, callback) {
    console.log("주문 중...");
    
    // 실제 주문 처리하는 시뮬레이션
    setTimeout(function() {
        console.log(menu + " 준비 완료!");
        callback(); // 요리가 끝났을 때 콜백 함수 호출
    }, 2000); // 2초 후에 요리 준비 완료로 가정
}

function enjoyMeal() {
    console.log("맛있게 식사하세요!");
}

orderFood("스테이크", enjoyMeal);

 

orderFood 함수에 인자들을 담아 실행하면 "요리가 끝났을 때 콜백 함수 호출" 부분에서 두번째 인자로 담겨있던 enjoyMeal() 함수가 실행된다. 

 

따라서 아래와 같은 결과가 나타난다. 

 

주문 중...
스테이크 준비 완료!
맛있게 식사하세요!

 

 

콜백지옥(Callback hell) 이란?

콜백함수를 중첩하여 사용할 때 코드가 복잡하고 어려워지는 현상을 지칭하는 용어이다. 

 

콜백함수는 다른 함수의 인자로 전달되어 비동기 작업의 완료를 처리하거나 이벤트에 대응하는 등의 역할을 한다. 

 

그러나 콜백함수를 여러 번 중첩하여 사용하면 코드의 가독성과 유지보수성이 크게 저하되며 오류를 찾기 어려워지는 문제가 발생한다. 

 

 

해결방법

이럴땐 Promise 함수나 , async/await 과 같은 비동기 처리 패턴을 사용하면 콜백 지옥을 피하고 코드를 더 구조적이고 가독성 있게 작성할 수 있다.

 

 

---

Promise 

프로미스(Promise) 는 자바스크립트에서 비동기적인 작업을 다루는데 사용되는 객체로, 주로 네트워크 요청, 파일 읽기쓰기 등에 사용된다.

 

'Promise'는 이러한 작업들을 보다 효율적으로 처리하고 가독성 있게 코드를 작성하기 위해 사용된다. 

 

const promise = new Promise((resolve, reject) => {
    // 비동기 작업 수행
    // 작업이 성공하면 resolve 호출, 실패하면 reject 호출
});

promise.then((result) => {
    // 작업이 성공적으로 끝났을 때 실행되는 부분
}).catch((error) => {
    // 작업이 실패했을 때 실행되는 부분
});

 

• new Promise: 새 Promise 객체를 생성하고, 비동기 작업을 수행할 함수(호출될 때 **resolve**와 reject 매개변수를 받는 콜백 함수)를 전달한다.
• .then(): Promise 객체가 이행된 경우 호출되는 메서드로, 비동기 작업이 성공적으로 완료되면 처리한다.
• .catch(): Promise 객체가 거부된 경우 호출되는 메서드로, 비동기 작업이 실패하거나 오류가 발생하면 처리한다.

 

Promise 함수 특징

• 코드의 간결성 : 프로미스를 사용하면 비동기 작업을 체이닝(chain)할 수 있어 코드의 가독성이 높아진다.
• 콜백지옥 방지 : 프로미스는 콜백함수를 중첩하지 않고도 순차적이고 구조적인 코드를 작성할 수 있다.
• 성공, 실패를 명확히 다룸 : 성공과 실패했을 때 작성 부분이 달라 분리하여 확실히 다룰 수 있다.
• 비동기 작업의 결과를 다루기 쉽게함 : then() 메서드를 사용하여 비동기 작업의 결과를 처리할 수 있다.

 

체이닝 (Chain)

체이닝은 프로미스를 사용하여 비동기 작업을 순차적으로 연결하여 처리하는 패턴을 말함.

 

---

Callback, Promise 비교

특성	콜백 함수	프로미스
구조	함수 자체가 다른 함수에 전달되는 형태	객체 형태로 비동기 작업을 다룸
가독성	중첩된 콜백 함수가 발생할 수 있음	체이닝을 통해 비동기 작업을 구조화
에러 처리	에러 처리가 쉽지 않음	.catch() 등을 통해 명확한 에러 처리 가능
비동기 작업 결과 처리	중첩된 콜백 내에서 작업 결과를 처리	.then()을 통해 비동기 작업 결과 처리
성공/실패 처리	일반적으로 if문 등을 사용하여 처리	resolve와 reject를 통해 분리 처리

 

결론적으로 callback과 promise의 가장 중요한 차이점은 비동기 코드의 가독성과 관리 용이성, 에러처리 등이 있다.

 

promise를 사용하는 것이 비동기 코드를 보다 명료하고 유지보수 가능한 형태로 작성하기에 용이하다.