Promise와 Callback의 차이

비동기 처리를 해줄 때 사용하는 Promise와 callback을 알아보려고 합니다

Callback

자바스크립트에서 비동기를 처리하기위해 setTimeout에 콜백을 걸어 사용하는 경우가 있습니다

  function func1(number,callback){
  setTimeout(()=>{
   callback(number+5);
 },1000)
}
function func2(number,callback){
  setTimeout(()=>{
   callback(number+10);
 },1000)
}
function func3(number,callback){
  setTimeout(()=>{
   callback(number+15);
 },1000)
}

function logFunc(number) {
 console.log("실행",number);
}
func1(0,(number:any)=> func2(number,(number:any)=>func3(number,(number:any) => logFunc(number))));

함수는 첫번째 인자로 number 두번째 인자로 callback을 받아 콜백에 콜백을 불러오는 형식입니다.
callback을 사용하였을때 예시로 이렇게 보기만 하여도 코드가 읽기 복잡한 점이 있습니다. 그리고 유지보수가 힘들다는 점입니다.

가독성이 떨어지고 코드의 유지보수성이 나빠집니다.

Promise

Promise는 객체입니다. 비동기 작업의 상황을 pending , resolved , failde 3가지 상태로 묘사하고 값으로 할당이 가능한 객체의 형태로 표현됩니다.

function func1(number){
  new Promise((resolve) => {
   setTimeout(()=>{
	resolve(number+5);
	},1000)
  })
}
function func2(number){
  new Promise((resolve) => {
   setTimeout(()=>{
	resolve(number+10);
	},1000)
  })
}
function func3(number){
  new Promise((resolve) => {
   setTimeout(()=>{
	resolve(number+15);
	},1000)
  })
}

function logFunc(number){
 new Promise((resolve)=>{
	setTimeout(()=>{
	 console.log(number);
	},1000)
  })
})

func1(0)
.then((number)=> func2(number))
.then((number)=> func3(number))
.then((number)=> logFunc(number))

.then으로 연결된 Promise 체인을 이용하여 코드가 훨씬 간략하며 보기 좋게 만들어졌습니다.
Promise를 이용한 연속된 비동기 작업은 수정 , 삭제 , 추가가 훨씬 편하고 유리하며
비동기 작업의 성공과 실패 유무등 상태를 알려주는 좋은 장점이 있습니다.

결론

Promise는 콜백패턴보다 훨씬 유용하다는 점이 있습니다.

1. 비동기 작업의 추가/수정의 유연함
2. 코드 유지 보수성 증가