[JS] 비동기 처리방식 (promise,callback) 에 대해 ARABOZA.

자바스크립트에서 비동기를 처리할 때

callback과 promise를

사용하게 되는데 이 둘의 차이점을 그저 callback을 썼을 때는 callback hell 때문에 가독성이 떨어지는 것 말고 더 명확하게 알기 위해서 정리를 합니다.

callback을 사용한 비동기 처리

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

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

async 함수는 첫번째 인자로 callback을 받고, callback이 실행 될 때 첫 번째 인자를 console에 출력합니다.

callback이 실행되는 시점은 async함수 안에 있는 setTimeout으로 인해서 1초 후에 실행이 됩니다.

callback이 실행이 되면서 첫 번째 인자로 "1초 후 실행"이 들어가고, 콘솔에 "1초 후 실행"이 나타납니다.

이렇게 callback을 통해서 어떠한 비동기 로직이 끝났을 때 callback 함수를 실행시킴으로써 비동기 작업이 완료 되었을 때 callback에서 작성한 어떠한 행동을 실행할 수 있게 됩니다.

promise를 사용한 비동기 처리

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

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

promise를 사용하게 되면 resolve는 성공했을 때, reject는 에러가 발생 했을 때 첫 번째 인자로 어떠한 값을 넘길 수 있습니다.

resolve는 .then의 첫 번째 인자로, reject는 .catch의 첫 번째 인자로 들어갑니다.

async 함수를 실행하면 1초 후 첫 번째 인자에 "1초 후 실행"이 들어간 resolve가 실행이 됩니다.

이 인자는 .then의 첫번째 인자는 함수이고, 이 함수의 첫 번째 인자로 받아서 콘솔에 찍히게 됩니다.

callback과 promise의 차이점

callback을 사용하면 비동기 로직의 결과값을 처리하기 위해서는 callback안에서만 처리를 해야하고, 콜백 밖에서는 비동기에서 온 값을 알 수가 없습니다. 하지만 promise를 사용하면 비동기에에서 온 값이 promise 객체에 저장되기 때문에 코드 작성이 용이해집니다.