Promise VS. Callback

이름이 둘다 독특하다.

하나는 약속이라는 뜻을 가진 Promise. 다른 하나는 회신이라는 뜻을 가진 Callback. 아무튼, 이름 진짜 독특하게 짓긴한것같기도하다. 뭔가 한눈에 이해하기 어려운건 사실이다.
내가 생각했을때, 프로미스와 콜백에 대해서 알긴 알지만, 그 깊은 알맹이 뜻을 제대로 모른채, 넘어간것같다.

조금 정리를 해야할 필요성을 느낀다.

일단, 내가 놓치고 있는 것부터!

Callback 함수란?

구글링을 해서 콜백함수가 무엇인지 대충 보면,

1. 함수를 함수의 인자로써 이용하는 함수.
2. 어떤 이벤트에 의해 호출되어지는 함수.

쓰도코드로 보면~

// The callback method
function meaningOfLife() {
    log("The meaning of life is: 42");
}


// A method which accepts a callback method as an argument
// takes a function reference to be executed when printANumber completes
function printANumber(int number, function callbackFunction) {
    print("The number you provided is: " + number);
}

// Driver method
function event() {
   printANumber(6, meaningOfLife);
}
출처: https://satisfactoryplace.tistory.com/18 [만족:티스토리]

printANumber()의 두 번째 매개변수로 function 타입의 callbackFunction을 인자로 받고있었고,

event()내부에서 printANumber(6, meaningOfLife); 를 하고 있는데,
meaningOfLife는 printANumber의 매개변수인 callbackFunction에 전달된고있기때문에,

callback 함수라고 할 수 있다.

나는 지금까지 무슨 콜백함수와 화살표 함수에 대해서 헷갈려 하고 있었다. 헷갈릴 것을 헷갈려야지 뭐하냐진짜로....

그런데, 만약에 콜백 함수를 갖고 비동기작업을 실시할 경우에 복잡해진다.

이걸보면된다~

const add5 = (number, callback) => {
    setTimeout(() => callback(number + 5), 1000);
};

const add10 = (number, callback) => {
    setTimeout(() => callback(number + 10), 1000);
};

const add15 = (number, callback) => {
    setTimeout(() => callback(number + 15), 1000);
}

const log = (number) => {
    console.log(number);
}

add5(0, (number) => add10(number, (number) => add15(number, log)));

add5(0, (number) => add10(number, (number) => add15(number, log)))
꼬리에 꼬리를 미친듯이 물고 넘어가는 중이다. -> 가독성이 굉장히 떨어진다. 딱 보자마자 눈에 보이지 않는다.

그리고 코드의 유지보수성을 나쁘게 만들기땨문에 지양하는것이 좋다고한다.

이러한 이유로 Promise ES6부터 생겨났다.
가독성이 좋아지고, 제일 중요한, 유연한 비동기 처리가 가능하다고 한다.

Promise의 유연한 대처.

비동기 작업의 상황에 pending, resolved, failed 3가지 상태로 나타낸다.

const add10 = number =>
  new Promise(resolve =>
    setTimeout(() => {
      resolve(number + 10);
    }, 1000),
  );

const add15 = number =>
  new Promise(resolve =>
    setTimeout(() => {
      resolve(number + 15);
    }, 1000),
  );

const log = number => new Promise(resolve => setTimeout(() => console.log(number), 1000));

add5(0)
  .then(number => add10(number))
  .then(number => add15(number))
  .then(number => log(number));
  
출처: https://simsimjae.tistory.com/420 [104%:티스토리]

사실 then으로 연결된 Promise체인이 코드를 훨씬 보기 좋게 만들어 준다고 하긴하는데...내눈엔... 그게 그거같다. ㅋㅋㅋㅋㅋㅋ

아무튼 이러한 이유로 코드 유지보수성이 좋아졌다고는 하는데...그렇다한다.

아무튼 결론은 이렇기때문에,,,,,

비동기작업의 추가/수정이 Promise가 더 좋고,

코드유지보수성증가가 Promise에서 이루어진다.