JS | callback과 promise

 

 

 

callback과 promise

callback이란?

javascript에 대해 찾아보다보면 정말 callback이라는 말을 많이 접하게 된다. 이 callback 뜻을 기억하려고 해도 잘 와닿지가 않아서 한번 정리해보려고 한다.

callback은 간단하게 말해서 다른 함수가 실행을 끝낸 뒤 실행되는 -callback되는 함수라는 뜻이다.  javascript에서 callback함수는 다른 함수의 파라미터로 함수(javascript에서 함수도 객체이기 때문에 매개변수로 전달하는 것이 가능하다.)를 전달하고 특정 이벤트 실행 후 파라미터로 전달했던 함수가 다시 호출되는 것이다.

그렇기 때문에 callback과 나란히 나오는 개념으로 비동기가 있는 것이다. 

 

function delay(sec, callback) {
  setTimeout(() => {
    callback(new Date().toISOString()) //날짜를 받아와서 String으로 변환해주는 메소드
  }, sec * 1000);
}

//순차적으로 실행되는 함수 콜백
delay(1, (result) => {
  console.log(1, result);
  delay(1, (result) => {
    console.log(2, result);
    delay(1, (result) => {
      console.log(3, result);  
    });      
  });  
});

 

위 코드에서 볼 수 있듯 콜백안에 콜백, 그 안에 또 콜백 이것이 그 유명한 콜백지옥이다.

 

Promise 사용하기

function delayP(sec){
  //resolve, reject라는 두가지 인자를 받는 콜백을 넘긴다.
  return new Promise((resolve, reject)=>{
    setTimeout(() => {
      resolve(new Date().toISOString());
    }, sec * 1000);
  });
}

delayP(1).then((result) => {
  console.log(1, result);
})

Promise는 resolve, reject라는 두가지 인자를 받는 콜백을 넘긴다. 

 

Promise는 callback안의 callback이 아니라 callback을 순차적으로 지정한다.

delayP(1).then((result) => {  
  console.log(1, result);
  return delayP(1); //1.then에서 return되는 promise가 resolve 되어야만
}).then((result) => { //2.그 다음 then이 실행된다. 
  console.log(2, result);
  return delayP(1);
}).then((result) => {
  console.log(3, result);
  return 'wow';
}).then((result) => {
  console.log(result);
});

 

 

 

참고한 영상 : https://www.youtube.com/watch?v=CA5EDD4Hjz4&list=PLuBMRNcyzsWxcnDdAmJWyWYXuExyP9aS1