기술문제 면접(promise(프로미스)의 개념에 대해서 설명하고, 콜백 함수 방식과 차이점을 설명해주세요.)

javascript

promise(프로미스)의 개념에 대해서 설명하고, 콜백 함수 방식과 차이점을 설명해주세요.

promise란?

• 자바스크립트 비동기 처리에 사용되는 객체, 비동기 처리의 단점을 보완하여 동기적으로 처리할수있게 도와준다.
  (자바스크립트의 비동기처리가 뭔데?
  특정 코드의 실행이 완료될때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성을 말함), (요청 후 정상처리 되기도 전에 화면에 빈 데이터를 표시하는 상태)

promise가 필요한 이유?

• 서버에서 받아온 데이터를 처리하기 위해
• fetch등으로 서버에서 데이터를 요청하고 받아온 뒤 처리하기 위하여 Promise가 필요하다

promise의 장점

• promise는 .then() .catch()등 promiseAPI를 사용할수있어 코드의 양을 줄이고 가독성을 증가시킬수있다.

promise의 3가지 상태

• pending : 대기 - 비동기 처리 로직이 아직 완료되지 않은 상태
• fulfilled : 이행 - 비동기 처리가 완료되어 프로미스가 결과 값을 반환해준 상태
• rejected : 실패 - 비동기 처리가 실패하거나 오류가 발생한 상태

콜백함수방식

callback함수는 다른 함수의 인수로 넘겨줌으로써(두번째 인자로 콜백을 넣음) 실행이 가능한 코드를 말한다.
callback을 반복적으로 실행시키기 때문에 코드의 양이 길어지고 비교적 가독성이 떨어진다.

promise, callback차이점

• callback함수는 함수안에서만 결과값처리와 결과값을 알수있지만 promise는 비동기 로직에서 처리된 결과값이 promise객체에 저장되기 때문에 로직 밖에서도 사용 가능함

• callback함수는 함수 내부에서 계속해서 연달아 호출하므로 가독성이 떨어지지만 promise함수는 promiseAPI를 사용해 가독성을 높여준다

callback함수 예시
function async(result, callback) {

async(0, function (res, callback) {
  callback(res)
  async(res + 1, function (res, callback) {
    callback(res)
    async(res + 1, function (res, callback) {
      callback(res)
    });
  });
});

출처 : https://joshua1988.github.io/web-development/javascript/promise-for-beginners/#promise%EA%B0%80-%EB%AD%94%EA%B0%80%EC%9A%94