[JS] Promise와 Callback 함수 비교
1. 비동기와 콜백
1) 콜백(Callback Function) : 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수, 함수 안에서 실행되는 함수를 말합니다.
2) 고차 함수(Higher-Order Function) : 매개변수를 통해 함수의 외부에서 콜백 함수를 전달 받은 함수
function repeat(n,f) { // 외부에서 전달 받은 f를 n만큼 반복 호출 한다.
for (var i = 0; i< n; i++) {
f(i); // i를 전달하면서 f를 호출
}
}function callMyName(name, callback){
alert(`${name}이 불려집니다.`);
callback(name);
}
function sayHello(name) {
alert(`안녕하세요 저는 ${name}입니다.`);
}
callMyName('Jin' , sayHello);* 콜백함수는 보통 특정한 상황에 맞춰서 함수를 실행하고자 할 때 유용합니다.
3) 콜백함수와 this : this에 들어갈 매개변수를 명시해주지 않으면 전역 객체를 참조합니다.
해결 방안
call : ,를 기준으로 인자를 받음
* 함수.call(this로 쓸 객체, 인자1, 인자2, 인자3...);
function dispatchUserInfo(user,name,age,callback){
callback.call(user,name,age); // user 객체를 this로 쓰겠다
}
apply : 배열 형태로 인자를 받음
* 함수.apply(this로 쓸 객체, [인자1,인자2,인자3...]);
function dispatchUserInfo(user,name,age,callback) {
callback.apply(user, [name, age]);bind : this를 지정만 해놓고 함수를 실행시키지는 않음
* apply, call은 this를 지정하면서 바로 함수 실행하지만 bind는 새로운 함수 리턴할 뿐 실행시키지는 않습니다.
*새로운 함수 = 함수.bind(this로 쓸 객체);
function dispatchUserInfo(user,name,age,callback){
const newCallback = callback.bind(user);
newCallback(name,age);
}4) 비동기 : 함수나 일정한 코드가 실행 순서와 상관 없이 완료되는 것 즉 특정한 함수의 비동작 동작이 완료되기도 전에
다른 함수가 실행될 수 있다 <-> 동기 동작 : 일정한 순서대로 실행-완료, 실행-완료 되는 것을 말합니다.
* 비동기 동작이 완료되면 특정한 콜백 함수를 실행하라고 명시 한다면 동기 동작처럼 보이게 할 수 있어 유용합니다.
2. Promise
1) Promise : 제작자가 특정한 코드를 실행하면 소비자는 제작자가 실행한 코드의 결과에 따라 각기 다른 특정한 동작을 수행합니다 또 Promise 생성자 함수는 비동기 처리를 수행할 콜백 함수를 인수로 전달받는데 이 콜백 함수는 resolve와 reject 함수를 인수로 전달받습니다.
const promise = new Promise((resolve,reject)=>{
if( /* 비동기 처리 성공 */){
resolve('result');
} else {
reject('failure reason');
}
});2) Promise 상태 정보 : 현재 비동기 처리가 어떻게 진행되고 있는 지 알려줄 때 사용함
- pending : 비동기 처리가 아직 수행되지 않은 상태 (기본값)
- fulfilled : 비동기 처리가 수행된 상태(성공) -> resolve 함수 호출해 fulfilled로 변경
- rejected : 비동기 처리가 수행된 상태(실패) -> reject 함수 호출해 rejected로 변경
3) Promise의 후속 처리 메서드 : promise의 비동기 처리 상태가 변화할 시 이에 따른 후속 처리
- .then() : resolve, reject에 따른 결과 모두 처리 가능
new Promise(resolve => resolve('fulfilled'))
.then( v => console.log(v) , e => console.error(e));
new Promise((null , reject) => reject(new Error('rejected')))
.then(v=>console.log(v), e=> console.error(e));- .catch() : 한 개의 콜백 함수를 인수로 전달 받는다. catch 메서드 콜백 함수는 프로미스가 rejectd 상태인 경우만 호출
new Promise((_,reject) => reject(new Error('rejected')))
.catch(e=> console.log(e));- .finally() : finally 메서드는 한 개의 콜백 함수를 인수로 전달 받는다. fulfilled와 rejected 와 상관 없이 무조건 한 번 호출 됩니다. 즉, 상태와 상관 없이 공통적으로 수행되어야 할 처리 내용이 있을 때 유용합니다.
new Promise(()=>{})
.finally(()=>console.log('finally'));4) 프로미스 체이닝
then , catch , finally 는 언제나 프로미스를 반환하기 때문에 연속적으로 호출할 수 있다. 이를 프로미스 체이닝이라 합니다. 순차적으로 처리해야하는 비동기 작업이 여러 개가 있는 경우에 유용합니다.
5) Callback과 Promise 비교
* 콜백 지옥을 예방하는 효과가 있습니다.
* 즉 함수의 처리 순서를 정하기 위해 Callback을 계속 사용해야 하는 문제가 생길 수 있습니다. 또 결괏값을 처리 할 때 callback 안에서만 볼 수 있고 callback 밖에서는 비동기에서 온 값을 알 수가 없습니다.
* 그러나 Promise는 Promise 객체에 비동기로 온 값이 저장되기 때문에 코드 작성과 가독성에서 유리함을 얻을 수 있습니다.