Promise, Callback 차이점

 Callback 

 

특정 함수에 매개변수로 전달된 함수를 의미합니다. Callback 함수는 함수를 전달 받은 함수 안에서 호출됩니다.

Callback 함수에서 Callback을 받지 않는다면 함수의 과정이 끝나기도 전에 다음 프로세스를 진행하는 경우가 있습니다. 이럴 경우 Callback 함수는 가독성이 좋지 않습니다.

function Callback(callback){
    function Callback2(callback){
        function Callback3(callback){
            console.log('무한콜백');
        }
    }
}

위와 같이 무한 콜백이 일어날 수도 있습니다.

가독성이 떨어지고 실수 위험도 커지게 됩니다. 그래서 ES7에서는 Promise를, ES8에서는 async/await을 지원합니다.

---

 Promise 

 

기본적으로 Callback이 하는 일과 같습니다.
차이점은 promise는 작업이 끝난 후 실행할 함수를 제공하는 것이 아니라 promise 자체 메소드인 .then()을 호출합니다.

function add10(a) {
  return new Promise(resolve => setTimeout(() => resolve(a + 10), 100));
} //Promise사용 시 작업이 끝났음을 알려주는 resolve를 인자로 받아들임.
add10(10)
  .then(add10)
  .then(add10)
  .then(add10)
  .then((res) => console.log(res))

Promise는 .then()과 같은 메소드를 연속적으로 사용 할 수 있다는 이점이 있습니다.

따라서 callback을 사용했을 때와는 다르게 코드를 작성하고 이해하기 훨씬 쉽습니다.

---

 차이점 

 

callback 함수는 함수의 매개변수로 사용되는 함수로 promise와 직접적인 연관성은 없습니다.

다만 비동기의 동기 처리를 하는데 callback pattern이 쓰여서 promise와 연관됩니다.

 

우선 둘의 차이점은 바닐라 JS와 프레임워크의 차이와 같이 틀의 존재 여부라고 할 수 있습니다.

Promise 클래스는 비동기 처리만을 위해 만들어졌기 때문에 클래스에 resolve나 reject 함수들이 잘 정의 되어 있고

이를 잘 활용하기만 하면 됩니다.

 

반면 callback pattern은 자유도가 높지만 template이 존재하지 않기 때문에

코드가 복잡해지고 에러 처리 같은 작업들이 어렵습니다.