callback과 Promise의 차이점

callback과 promise를 차이점을 알아보기전에 동기와 비동기에 대해서 먼저 알고 시작해야 한다.

JS는 기본적으로 동기 처리이기 때문에 중간에 대량의 데이터를 응답 받거나 대량의 이미지 업로드를 실행한다면 이 실행이 다 끝날때까지 뒤의 실행들이 blocking된다. 그래서 실행이 오래 걸리는 실행문들은 비동기로 처리하여 전송을 보내놓고 응답을 받으면 실행되게 된다.

 

 

동기란?

동기는 말 그대로 동시에 일어난다는 뜻이다. 요청과 그결과가 동시에 일어난다는 약속인데, 바로 요청을 하면 시간이 얼마나 걸리든 요청한 자리에서 결과가 주어져야 한다.

 

 

비동기란?

비동기는 동시에 일어나지 않는다를 의미한다. 요청과 결과가 동시에 일어나지 않을거라는 약속이다.

 

 

 

동기와 비동기의 단점과 장점

동기방식은 설계가 매우 간단하고 직관적이지만 결과가 주어질 때까지 아무것도 못하고 대기해야 하는 단점이 있고,

비동기방식은 동기보다 복잡하지만 결과가 주어지는데 시간이 걸리더라도 그 시간 동안 다른 작업을 할 수 있으므로 자원을 효율적으로 사용할 수 있는 장점이 있다.

 

 

callback이란?

callback 함수는 함수의 매개변수인 함수로, 주로 비동기 처리에서 동기 처리를 할 때 callback패턴을 사용한다.

문제점은 callback함수의 중첩이 많아질수록 가독성이 나빠진다.

 

 

promise란?

JS의 비동기 처리를 위한 클래스이다. 실행이 오래 걸리는 실행문들은 비동기로 처리하여 전송을 보내놓고 응답을 받으면 실행되게 한다. 비동기 작업이 완료된 이후에 다음 작업을 연결시켜 진행, 작업 결과에 따라 성공 또는 실패를 리턴하며 결과 값을 전달 받을수 있다.

 

 

promise의 3가지 상태(states)

프로미스를 사용할 때 알아야 하는 가장 기본적인 개념이 바로 프로미스의 상태이다. new Promise()로 프로미스를 생성하고 종료될 때까지 3가지 상태를 갖는다.

• Pending(대기) : 비동기 처리 로직이 아직 완료되지 않은 상태
• Fulfilled(이행) : 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• Rejected(실패) : 비동기 처리가 실패하거나 오류가 발생한 상태

 

 

Pending(대기)

아래와 같이 new Promise() 메서드를 호출하면 대기(Pending) 상태가 된다.

new Promise();

new Promise() 메서드를 호출할 떄 콜백 함수를 선언할 수 있고, 콜백 함수의 인자는 resolve, reject 이다.

new Promise(function(resolve, reject) {
//...
});

 

 

Fulfilled(이행)

여기서 콜백 함수의 인자 resolve를 아래와 같이 실행하면 이행(Fulfilled) 상태가 된다.

new Promise(function(resolve, reject) {
   resolve();
});

그리고 이행 상태가 되면 아래와 같이 then()을 이용하여 처리 결과 값을 받을 수 있다.

function getData() {
	return new Promise(function(resolve, reject) {
    	var data = 100;
        resolve(data);
    });
}

// resolve()의 결과 값 data를 resolvedData로 받음
getData().then(function(resolvedData) {
	console.log(resolvedData); //100
});

 

 

Rejected(실패)

new Promise()로 프로미스 객체를 생성하면 콜백 함수 인자로 resolve와 reject를 사용할 수 있다고 했다. 여기서 reject를 아래와 같이 호출하면 실패(Rejected) 상태가 된다.

new Promise(function(resolve, reject) {
	reject();
});

그리고, 실패 상태가 되면 실패한 이유(실패 처리의 결과 값)를 catch()로 받을 수 있다.

function getData() {
	return new Promise(function(resolve, reject) {
    	reject(new Error("Request is failed"));
    });
}

// reject()의 결과 값 Error를 err에 받음
getData().then().catch(function(err) {
	console.log(err); // Error: Request is failed
});

 

 

 

참고 자료

---

https://velog.io/@woogie37/callback-Promise-async-await

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/​