코어JS 정리 📖| 콜백 지옥과 비동기 제어

콜백지옥(callback hell)

콜백지옥(callback hell)이란, 콜백함수를 익명함수로 전달하는 과정이 반복되어 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 현상입니다.
즉, 콜백함수에 또 콜백함수를 전달하고, 그 콜백함수에 또 콜백함수를 전달하는 과정이 반복된 형태입니다.
주로 비동기 작업을 수행하기 위해 이런 형태가 자주 등장합니다.

Promise

Promise는 비동기적인 것을 수행할 때 콜백함수 대신에 유용하게 쓰일 수 있는 오브젝트입니다.

const promise = new Promise((resolve, reject) => {
  console.log('doing something...');
  setTimeout(() => 
    resolve('성공')
    //reject('실패')
  , 200);
})
//Promise를 만드는 순간 전달한 콜백함수가 즉시 실행됩니다.
//이 콜백함수는 resolve, reject라는 콜백을 전달받습니다.
//비동기작업이 성공한 경우 resolve(...)를, 실패한 경우 reject(...) 호출

promise
  .then(console.log) //resolve()가 반환된 경우 실행
  .catch(console.log) //reject()가 반환된 경우 실행
  .finally(console.log('finally'));
//finally() 메소드는 Promise가 resolve 혹은 reject가 반환되었는지에 관계없이 지정된 콜백함수가 실행됩니다. 따라서 어떠한 인수도 전달받지 않습니다.

비동기 작업의 동기적 표현(1) - Promise

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

//에스프레소
//에스프레소, 아메리카노
//에스프레소, 아메리카노, 카페모카
//에스프레소, 아메리카노, 카페모카, 카페라떼
//(0.5초마다 순서대로 출력)

위의 비동기코드를 기명함수로 변환하면, 실행시 더 간단하게 표현할 수 있습니다.

const addEspresso = ()=> new Promise(resolve => {
  setTimeout(() => {
    const name = '에스프레소'
    console.log(name);
    resolve(name);
  }, 500)
});
const addAmericano = (prevName) => new Promise(resolve => {
  setTimeout(() => {
    const name = prevName + ', 아메리카노';
    console.log(name);
    resolve(name);
  }, 500)
});
const addCafeMocha = (prevName) => new Promise(resolve => {
  setTimeout(() => {
    const name = prevName + ', 카페모카';
    console.log(name);
    resolve(name);
  }, 500)
});
const addCafeLatte = (prevName) => new Promise(resolve => {
  setTimeout(() => {
    const name = prevName + ', 카페라떼';
    console.log(name);
    resolve(name);
  }, 500)
});

addEspresso()
.then(prevName => addAmericano(prevName))
.then(prevName => addCafeMocha(prevName))
.then(prevName => addCafeLatte(prevName));

//콜백함수를 전달할 때 받아오는 값으로 바로 다음 함수를 호출하는 경우에는 더 간단하게 표현할 수 있습니다.

addEspresso()
.then(addAmericano)
.then(addCafeMocha)
.then(addCafeLatte);

반복적인 함수 선언을 짧게 표현하면,

const addCoffee = function(name) {
  return function(prevName) {
    return new Promise(resolve => {
      setTimeout(() => {
        var newName = prevName ? (prevName + ', ' + name) : name;
        console.log(newName);
        resolve(newName);
      }, 500);
    });
  };
};

addCoffee('에스프레소')()
.then(addCoffee('아메리카노'))
.then(addCoffee('카페모카'))
.then(addCoffee('카페라떼'));

Generator

function 뒤에 *가 붙은 함수는 generator함수 입니다. generator 함수를 실행하면 Iterator가 반환되는데, 이 Iterator는 next메서드를 가지고 있습니다.
next 메서드를 호출하면 generator함수 내부에서 가장 먼저 등장하는 yield에서 실행을 멈추고, 이후 다시 next메서드를 호출 하면 앞서 멈췄던 부분에서 시작해서 그 다음에 등장하는 yield에서 실행을 멈춥니다. 그러니까 비동기 작업이 완료되는 시점마다 next메서드를 호출해준다면 generator함수 내부의 소스가 위에서부터 아래로 순차적으로 진행됩니다.
비동기 작업의 동기적 표현(2) - Generator

const addCoffee = function (prevName, name) {
  setTimeout(function() {
    coffeeMaker.next(prevName ? prevName + ', ' + name : name);
  }, 500);
};

const coffeeGenerator = function* () {
  const espresso = yield addCoffee('', '에스프레소');
  console.log(espresso);
  const americano = yield addCoffee(espresso, '아메리카노');
  console.log(americano);
  const mocha = yield addCoffee(americano, '카페모카');
  console.log(mocha);
  const latte = yield addCoffee(mocha, '카페라떼');
  console.log(latte);
};

const coffeeMaker = coffeeGenerator();
coffeeMaker.next();

//0.5초마다 next메서드를 호출

async / await

비동기 작업을 수행하고자 하는 함수 앞에 async를 붙이고, await은 async가 붙은 함수 안에서만 쓸수 있습니다. 실질적인 비동기 작업이 필요한 위치마다 await를 표기하면 뒤의 내용을 자동으로 Promise로 전환하고, 해당 내용이 resolve된 이후에야 다음으로 진행합니다.

function fetchData() {
  return new Promise((resolve, reject) => {
    //do network request.....
    resolve('성공');
  });
}

async function fetchData2() {
  //do network request...
  return '성공';
}

fetchData().then(console.log); //성공
fetchData2().then(console.log); //성공

비동기 작업의 동기적 표현(3) - Promise + Async/await

const addCoffee = name =>
  new Promise(resolve =>
    setTimeout(() => resolve(name), 500)
  );

const coffeeMaker = async() => {
  let coffeeList = '';
  const _addCoffee = async 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();