[JavaScript] async, await

1.What is async, await?

async와 await는 자바스크립트의 비동기 처리 문법입니다.
기존의 비동기 처리 방식인 Callback 함수와 Promise의 단점을 보완하는 문법이죠.

2.async

async를 사용하는 방법은 밑의 코드와 같습니다. 함수 앞에 async를 붙이게 되면 해당 함수는 항상 Promise 객체를 리턴합니다.

async function number() {
  return 1
} 

number().then(console.log())	// 1

3. await

await는 항상 async함수 안에서만 동작합니다. 또한 자바스크립트는 await키워드를 만나게 되면 Promise가 처리될 때까지 기다립니다. 그리고 결과는 그 이후에 반환됩니다.

function delay(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function getApple() {
  await delay(2000);
  return 'apple';
}

async function getBanana() {
  await delay(2000);
  return "banana"
}

async function pickFruits() {
  const apple = await getApple();
  const banana = await getBanana();
  return `${apple} + ${banana}`
}

4. 병렬적으로 async, await하기

앞선 코드를 실행하게 되면 총 4초가 걸리게 됩니다. pickFruits()함수에서 apple에 2초, banana에서 2초 총 4초가 걸리게 되는 것이죠. 그러나 두 함수는 서로에게 영향을 끼치지 않습니다.
코드의 성능을 더 좋게 하기 위해 두 함수를 병렬적으로 처리할 수 있다면 더 좋겠죠?
이를 가능하게 하는 두 가지 방법이 있습니다.

(1) 함수를 변수에 담아 실행

먼저 함수를 변수에 담아 처리하는 겁니다. 변수에 담게 되면 코드 블록이 바로 실행되기 때문입니다.

async function pickFruits() {
  const applePromise = getApple();
  const bananaPromise = getBanana();
  const apple = await applePromise;
  const banana = await bananaPromise;
  return `${apple} + ${banana}`
}

(2) Promise All

다음으로 Promise안에 있는 API를 활용하는 방식입니다. 프로미스 배열을 전달하게 되면 모든 프로미스들이 병렬적으로 처리되어 한꺼번에 모아주는 역할을 하게 됩니다.

function pickAllFruits() {
  return Promise.all([getApple(), getBanana()])
  .then(fruits => fruits.join(' + '))
}
pickAllFruits().then(console.log);