해당 내용은 '코어 자바스크립트' 서적을 참고하여 작성되었으며, 초보 개발자에게 유익한 책을 지필해주신 지은이 정재남 님께 감사의 말씀을 드립니다.

콜백함수

콜백 지옥과 비동기 제어

• 콜백 지옥은 흔히 비동기 처리 과정을 표현할 때 나타나는 코드의 문제점이다.
  콜백 함수가 익명 함수로 꼬리에 꼬리를 물며 표현될 때의 모습을 뜻하는 용어이다.
• 갈수록 이런 비동기 제어 이슈는 중요한 비중을 차지하며 비동기 처리의 동기적 표현을 위한 표현법도 있다.

// 콜백 지옥
function callbackHell(arg){
  if(arg > 0) {
    if(arg > 1) {
      if(arg > 2) {
        console.log('over2');
      } else {
        console.log('over1');
      }
    } else {
      console.log('over0');
    }
  } else {
    console.log('under0');
  }
};

기명 함수

// 각각의 코드를 기명 함수로 지정하여 할당하면 깔끔하게 표현 가능하다
var namedFunc = (arg) => {
  conditino0(arg);
};

var condition0 = (arg) => {
  if(arg > 0) {
    condition1();
  } else {
    console.log('under0');
  }
};

var condition1 = (arg) => {
  if(arg > 1) {
    condition2();
  } else {
    console.log('over0');
  }
};

var condition2 = (arg) => {
  if(arg > 2) {
    console.log('over2');
  } else {
    console.log('over1');
  }
};

Promise / then

// 공통의 로직을 하나의 promise 리턴함수로 선언하여 then 으로 동기적 표현이 가능하다
const comparePromise = (arg) => {
  return new Promise(function(num){
    if(arg > (num ? num + 1 : 0)){
      resolve(num + 1);
    } else {
      console.log(num ? `over${num}` : `under${num}`);
    }
  })
}

comparePromise(4)
  .then(comparePromise)
  .then(comparePromise)
  .then(comparePromise)
  .then(comparePromise);

Generator / next

// 반복자를 생성하는 generator는 next 메서드를 사용하면 yield가 순서대로 호출된다
var compareNum = function (arg, num) {
  if (arg > num) {
    compareIns.next(arg);
  } else {
    console.log(num ? `over${num}` : `under${num}`);
  }
}

var compareGenerator = function*() {
  var condtion0 = yield compareNum(4, 0);
  var condtion1 = yield compareNum(condtion0, 1);
  var condtion2 = yield compareNum(condtion1, 2);
  var condtion3 = yield compareNum(condtion2, 3);
};

var compareIns = compareGenerator();
compareIns.next();

async / await

// async 함수 내에서는 await 함수가 완료되기 전까지 다음으로 넘어가지 않는다
var compareNum = function (arg, num) {
  if (arg > num) {
    return arg;
  } else {
    console.log(num ? `over${num}` : `under${num}`);
    return false;
  }
}

var compareAsync = async function(arg){
  var condition0 = await compareNum(arg, 0);
  var condition1 = await compareNum(condition0, 1);
  var condition2 = await compareNum(condition1, 2);
  var condition3 = await compareNum(condition2, 3);
}

compareAsync(4);