콜백함수

콜백함수란

다른 함수 또는 메서드에서 자체적으로 실행 할 수 있는 함수
함수의 제어권이 다른 함수 또는 메서드에 있어 호출을 통해 함수가 작동함

콜백지옥

이벤트 처리, 서버 통신과 같은 비동기적 작업을 수행 할 때 발생할 수 있는 문제
수 많은 들여쓰기로 인한 가독성 문제를 의미

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, Generator, Async/await 방식으로 비동기 작업을 동기적으로 표현 가능

• Promise: 비동기 처리가 끝이 나면 알려달라는 "약속"
  new 연산자로 호출되어 Promise로 진행 될 경우 즉시 실행됨
  resolve, reject 함수를 호출하는 경우 하나라도 실행되지 않는 이상 then, catch가 실행되지 않음

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);
	});
});

• Generator: Iterator 객체가 next()를 보유할 경우 순환
  yield에서 정지, next메서드를 호출할 경우 다음 yield까지 진행 후 정지

var addCoffee = function (prevName, name) {
	setTimeout(function () {
		coffeeMaker.next(prevName ? prevName + ', ' + name : name);
	}, 500);
};
var coffeeGenerator = function* () {
	var espresso = yield addCoffee('', '에스프레소');
	console.log(espresso);
	var americano = yield addCoffee(espresso, '아메리카노');
	console.log(americano);
	var mocha = yield addCoffee(americano, '카페모카');
	console.log(mocha);
	var latte = yield addCoffee(mocha, '카페라떼');
	console.log(latte);
};
var coffeeMaker = coffeeGenerator();
coffeeMaker.next();

• Async/await: 비동기 작업이 필요한 위치에 await를 추가
  Promise ~ then과 동일한 효과가 발생

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();