callback, promise, async/await의 차이점을 설명해주세요.

내용 정리

• 콜백 함수는 쉽게 말해서 다른 코드의 인자로 넘겨주는 함수라고 볼 수 있습니다. 콜백 함수를 넘겨 받은 코드는 이 콜백 함수를 필요에 따라 적절한 시점에 실행합니다. 말 그대로 콜백 함수는 다른 함수에게 인자로 넘겨줌으로써 그 제어권도 함께 위임한 함수입니다. 다만 비동기 작업을 수행하기 위해 함수를 전달하는 과정이 반복되면서 코드의 들여쓰기 수준이 감당하기 힘들 정도로 깊어지는 콜백 지옥(callback hell) 현상이 생길 수 있는데, 가독성이 떨어질 뿐더러 코드를 수정하기도 어렵습니다.
• 그런 일련의 과정 속에서 자바스크립트 진영은 비동기적인 작업을 동기적으로, 혹은 동기적인 것처럼 보이게끔 처리해주는 장치를 마련하게 되는데, 그게 ES6에서는 Promise, ES2017에서는 async/await라고 볼 수 있습니다.
• new 연산자와 함께 호출한 Promise의 인자로 넘겨주는 콜백 함수는 호출할 때 바로 실행되지만 그 내부에 resolve나 reject 함수를 호출하는 구문이 있을 경우 둘 중 하나가 실행되기 전까지는 다음(then) 또는 오류 구문(catch)으로 넘어가지 않습니다. (pending 상태)
• 비동기 작업을 수행하고자 하는 함수 앞에 async를 표기하고, 함수 내부에서 실질적인 비동기 작업이 필요한 위치마다 await를 표기하는 것만으로 뒤의 내용을 Promise로 자동 전환하고, 해당 내용이 resolve된 이후에야 다음으로 진행합니다. Promise 문법을 사용하면서도 단순 Promise chaining보다 가독성이 뛰어나고 작성법도 간단하다고 볼 수 있습니다.
• promise() 객체는 콜백 함수의 인자로 resolve와 reject를 가질 수 있는데, 콜백 함수의 인자로 resolve가 실행되면 fullfilled 상태가 되어 then 구문 안쪽의 프로세스로 넘어 가는 반면, reject가 실행되면 rejected 상태가 되어 catch 안쪽의 프로세스를 실행합니다.

꼬리 질문

• Promise 객체를 사용할 때 then 메소드를 사용해서 Promise Chaining을 사용하는데, 여기서 then 메소드의 역할이 뭔가요?
  • then 메소드는 새로운 promise 객체를 return 합니다.
• Promise 객체는 크게 3가지 중 하나의 상태를 가지게 되는데, 이 상태에 대해서 간략하게 설명해주실 수 있을까요?
  • pending(진행중) / fulfilled(성공) / rejected(실패), 작업 성공/실패 여부에 따라 promise 객체가 fulfilled나 rejected 각각의 정보를 갖게 됩니다.
• 작업하실 때 catch와 finally를 사용하신 사례가 있다면 말씀해주실 수 있으실까요?
  • catch는 해당 에러의 내용이나 별도의 router 이동을 하게 만들기 위해서 작성했었고, finally는 말 그대로 promise 객체가 fullfilled가 되든 rejected가 되든 항상 마지막에 실행하고자 하는 callback이 있을 때 사용했습니다. 예컨대 promise chaining에서 사용한 어떤 값을 지워줘야 한다거나 최종적으로 별도의 log를 남겨야 할 때 정도가 될 거 같습니다.
• promise에서 resolve와 reject는 어떤걸 의미하는지 알고계신가요?
• try, catch 외 finally를 사용해보신 적이 있으신지 설명해주세요.
• promise의 resolve, reject의 처리 결과는 어떻게 얻을 수 있나요?
• promise와 다른 async/await의 차이는 무엇인가요?
• Promise.all()

참고자료

• 코어 자바스크립트(정재남, 2019)
• JS중급 - 자바스크립트 웹 개발 기본기 by 코드잇