async / await 란?? (Javascript)

🧐 async / await
async/await는 자바스크립트의 비동기 처리 패턴 중
가장 최근에 나온 문법이다. 기존의 비동기 처리 방식인 콜백함수와 프로미스의 단점을 보완하고, 개발자가 읽기 좋은 코드를 작성할 수 있게 도와준다

🧐 비동기 처리란?

• 동기적 (Synchronous) : 코드가 실행되고 종료된 후에 다음 코드 실행
  • 현재 실행 중인 코드가 끝나야 다음 코드를 실행하는 방식을
  • CPU의 계산에 의해 즉시 처리가 가능한 대부분의 코드는 동기적 코드
  • 계산이 복잡해서 CPU가 계산하는 데에 오래 걸리는 코드 역시 동기적 코드
• 비동기적(Asynchronous) : 코드가 병렬적으로 실행
  • 실행 중인 코드의 완료 여부와 무관하게 즉시 다음 코드로 넘어가는 방식
  • setTimout, addEventListner 등
  • 별도의 요청, 실행 대기, 보류 등과 관련된 코드는 모두 비동기적 코드
• 기존의 비동기 함수를 처리하는 방법은 콜백함수를 사용하는 방법으로 코드가 길어 질수록 콜백함수 내부에 콜백함수가 생겨 들여쓰기가 깊어지고, 코드의 가독성이 떨어지는 단점

setTimeout(
  function (name) {
    var coffeeList = name;
    console.log(coffeeList);

    setTimeout(
      function (name) {
        coffeeList += ", " + name;
        console.log(coffeeList);

        setTimeout(
          function (name) {
            coffeeList += ", " + name;
            console.log(coffeeList);

            setTimeout(
              function (name) {
                coffeeList += ", " + name;
                console.log(coffeeList);
              },
              500,
              "카페라떼"
            );
          },
          500,
          "카페모카"
        );
      },
      500,
      "아메리카노"
    );
  },
  500,
  "에스프레소"
);

콜백함수가 길어질 수록 가독성이 점점 떨어진다.

• 이를 보완하기 위해 Promise 등장.
  • 비동기 처리에 대해 처리가 끝나면 알려달라는 “약속”
  • new 연산자로 호출한 Promise의 인자로 넘어가는 콜백은 바로 실행된다
  • new Promise() 내부의 resolve(또는 reject) 함수를 호출하는 구문이 있을 경우 resolve(또는 reject) 둘 중 하나가 실행되기 전까지는 다음(then), 오류(catch)로 넘어가지 않는다.
    
  • 이 방법으로 비동기적 코드를 동기적으로 구현할 수 있다
  • 하지만 Promise 객체도 코드가 복잡해지면 여러 개의 Promise를 연결하면서 코드의 가독성이 떨어지고, 예외 처리가 어려워 질 수 있다.
    

new Promise(function (resolve) {
	setTimeout(function () {
		var name = '에스프레소';
		console.log(name);
		resolve(name);
	}, 500);
}).then(function (prevName) {
	return new Promise(function (resolve) {
		setTimeout(function () {
			var name = prevName + ', 아메리카노';
			console.log(name);
			resolve(name);
		}, 500);
	});
}).then(function (prevName) {
	return new Promise(function (resolve) {
		setTimeout(function () {
			var name = prevName + ', 카페모카';
			console.log(name);
			resolve(name);
		}, 500);
	});
}).then(function (prevName) {
	return new Promise(function (resolve) {
		setTimeout(function () {
			var name = prevName + ', 카페라떼';
			console.log(name);
			resolve(name);
		}, 500);
	});
});

Promise가 연결되면서 then 부분이 계속 반복.. 코드의 가독성이 점점 떨어지는 단점
이를 보완하기 위해 비동기를 처리하는 최신 문법인 async / await가 등장

• async를 붙이면 해당 함수는 항상 프로미스를 반환하며 프로미스가 아닌 것은 프로미스로 감싸 반환한다
  
• await는 async 함수 안에서만 동작한다. 자바스크립트는 await 키워드를 만나면 프로미스가 처리될 때까지 기다리고, 프로미스가 처리되면 그 결과와 함께 실행이 재개된다.
  
• 프로미스가 처리되길 기다리는 동안에는 엔진이 다른 작업(스크립트 실행, 이벤트 처리 등)을 할 수 있기 때문에 리소스가 낭비되지 않는다.
• 프로미스에서 에러 처리를 위해 .catch()를 사용했던 것처럼 async에서는 catch {}를 사용하면 된다 try-catch{}

var addCoffee = function (name) {
	return new Promise(function (resolve) {
		setTimeout(function(){
			resolve(name);
		}, 500);
	});
};
var coffeeMaker = async function () {
	var coffeeList = '';
	var _addCoffee = async function (name) {
		coffeeList += (coffeeList ? ', ' : '') + await addCoffee(name);
	};
	await _addCoffee('에스프레소');
	console.log(coffeeList);
	await _addCoffee('아메리카노');
	console.log(coffeeList);
	await _addCoffee('카페모카');
	console.log(coffeeList);
	await _addCoffee('카페라떼');
	console.log(coffeeList);
};
coffeeMaker();