Promise와 callback

자바스크립트는 싱글스레드로 한줄씩 한줄씩 실행이 된다. 즉 한줄이 실행이 되고 끝날 때까지는 다음이 실행이 되지 않는 동기적으로 실행이 된다.
그런데 api나 경우에 따라 코드나 함수를 비동기적으로 실행을 해주어야 하는 경우가 있다. 이러한 실행을 비동기적으로 실행이 된다고 하는데 자바스크립트에서 비동기적으로 실행을 시키는 방법은 콜백함수와 Promise가 있다.

CallBack

function async(callback) {
  setTimeout(() => {
    callback("1초 후 실행");
  }, 1000);
}

async(function (msg) {
  console.log(msg);
});

함수 async가 실행이 되면 setTimeout함수가 실행이 되는데 setTimeout 함수안에서 callback이라는 매개변수가 "1초 후 실행"이라는 인자를 받으면서 실행이 되고 있다.
이 부분은 밑에 async함수가 호출이 되는 곳에서 인자로 function(msg) {console.log(msg)}를 받고 이 인자로 받은 함수가 async 함수의 매개변수 callback으로 들어가고 매개변수가 실행이 되는 위치에서 "1초 후 실행"이라는 인자를 받아서 실행이 된다.
그러면 일초 뒤에 콘솔창에 "1초 후 실행"이 나타날 것이다. 이렇게 callback함수를 통해서 비동기적으로 실행이 되는 부분이 끝난 뒤에 실행이 되야 하는 코드를 실행 시켜 줄 수 있다.

Promise

Promise는 callback 함수가 반복적으로 사용이 되어져서 콜백지옥이 되는 것을 막아주기 위해서 생긴 문법이다.

unction async() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("1초 후 실행");
    }, 1000);
  })
}

async().then(res => {
  console.log(res);
});

사용을 할 때는 new Promise를 사용하고 ()안에 () => {}의 함수를 넣어준다. 그리고 실행한 함수가 성공을 하면 resolve의 값을 아래의 .then의 매개변수로 받아주고 만약 실패를 하게 된다면 reject의 값을 .catch의 매개변수로 받아주고 .then을 무시하고 .catch가 실행이 된다.
이렇게 되면 callback함수를 쓰지 않아도 함수가 실행이 완료가 된 이후에 실행이 되어야 하는 코드를 실행을 할 수 있다.