[JS] 비동기 처리

자바스크립트에서 비동기 처리하는 방법에는 세가지 방법이 있는데,
콜백 함수, Promise 객체, async/await가 있습니다.
그런데 콜백 함수와 Promise를 사용하게 되면서 단점이 있는데,
서비스 규모가 커질수록 코드가 복잡해지고 코드를 중첩해야 하는
상황이 생길 수 있고 이것을 Callback Hell, Promise Hell이라고 합니다.
이로 인해 가독성이 떨어지고 유지 보수가 어려워지게 됩니다.

🔎콜백(callback)?

function A(callback) {
  callback()
}
function B() {
  console.log('콜백')
}
A(B)

• 다른 함수(A)가 실행을 끝낸뒤 실행되는 callback 함수를 말합니다.
• 위의 예시를 통해 A 함수는 B함수의 console.log('콜백')을 매개변수로 받아서 콜백합니다.
  argument : 함수에 전달되는 인수들을 배열 형태로 나타낸 객체

🔎콜백 지옥(Callback Hell)

function fn() {
    setTimeout(() => {
        console.log('1')
        setTimeout(() => {
            console.log('2')
            setTimeout(() => {
                console.log('3')
            }, 1000)
        }, 1000)
    }, 1000)
}

fn() // 출력 결과 : '1' , '2' , '3'

• 비동기 처리를 하기 위해서 setTimeout함수로 '1' , '2' , '3'를 1초 간격을 두고 순서대로 출력하는 함수입니다.
• 비동기 처리를 순차적으로 처리하기 위해서는 위의 예시 같은 콜백 지옥 문법이 됩니다.

🔎Promise Hell

function fn() {
  return new Promise((resolve, reject) => resolve());
}

fn()
.then(() => {
  new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('하나');
      resolve();
    }, 1000);
  });
})
.then(() => {
  new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('둘');
      resolve();
    }, 1000);
  });
})
.then(() => {
  new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log('셋');
      resolve();
    }, 1000);
  });
})
.catch((err) => {
  console.log('err', err);
});

• promise를 이용해 비동기 처리를 순차적으로 하려면 then 메서드를
  사용해야 하고, 코드가 복잡해지면 then을 남용하게 될 수 있기 때문에
  이러한 문제를 해결하기 위해 async/await을 사용할 수 있습니다.

• promise는 promise를 반환하고 resolve 혹은 reject 둘 중 하나가 호출되면 then 혹은 catch로 넘어갑니다.

• resolve, reject 로 결과 값을 성공 혹은 실패로 받아서 다음 작업을 체이닝 할 수 있습니다..

🔎 async/await

function delay(data) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log(data);
      resolve()
    }, 1000);
  });
}
async function fn() {
  await delay('1');
  await delay('2');
  await delay('3');
}

fn();

• 비동기 처리를 하고자하는 함수 앞에 async를 작성하고, 함수 내부에서 비동기 처리가 필요한 부분에 await을 작성합니다.
• async/await 문법은 Promise를 대체하기 위한 기능이 아니고, 프로그래머가 유지보수를 쉽게 하기 위함입니다.