promise vs callback

kingmo·2022년 4월 30일
0

callback

callback은 프로그래밍에서 빼놓을 수 없는 아주 중요한 개념이다.
callback의 의미는 크게 2가지가 있다
1. 다른 함수의 인자로 이용되는 함수.
2. 이벤트에 의해 호출되어지는 함수.

  • 다른 함수의 인자로 이용될 때의 예
function add (x, y) {
	return x + y
} 

위의 add 한수에는 인자로 x, y가 들어가는데
여기에 인자로 함수도 들어갈 수있다.
이는 자바스크립트가 일급객체이기 때문에 가능한 일이다.

콜백함수에 관한 자세한 내용은 이전에 올렸든 글에서 추가로 확인할 수 있다.
콜백 함수에 관한 글

callback 함수는 동기적 함수와 비동기적 함수로 나눌 수있다.

비동기적 callback

자바스크립트는 Single-Thread / Non-Blocking 방식으로 코드를 실행한다.
이는 쉽게 자바스크립트는 한 번에 하나의 코드만 실행할 수 있다는 것을 뜻 한다.

허나 우리가 자바스크립트로 만들어진 프로그램을 이용할 때
여러 코드가 동시에 처리되는 것처럼 느끼는 이유는
Single Thread로 하나씩 코드를 실행하고,
결과를 기다리지 않고 다음 코드를 실행하기 때문이다(이를 Non-Blocking이라한다).

이를 확인할 수 있는 가장 좋은 예시는 setTimeout이다.

function Test () {
	console.log("3초 기다리기")
}

setTimeout(Test, 3000);
console.log("이건 바로 실행")

위의 코드는 아래와 같은 결과를 보여준다.

"이건 바로 실행"
"3초 기다리기"

분명 setTimeout을 먼저 실행 시켰지만 Non-Blocking 특성에 의해
먼저 결과가 나오는 "이건 바로 실행"이 먼저 출력된다.


Promise

위에서 언급한 비동기적 callback을 남발하다가는
callback 지옥에 빠질수가 있다.

step1(function (value1) {
  step2(function (value2) {
    step3(function (value3) {
      step4(function (value4) {
        step5(function (value5) {
          step6(function (value6) {
				// 함수로직
          })
        })
      })
    })
  })
})

이러한 것을 해결하기 위해 나온것이 Promise이다.
흔히 사용되는 axios도 promise를 지원하는 라이브러리이다.

  • promise 사용 예
somethingAsync(value1)
	.then((result) => {
		return 42;
	})
	.then((result) => {
		return somethingAsync2();
	})

여기서 promise메서드는 비동기 연산이 종료된 이후에
결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있다.

프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있다.
다만 최종 결과를 반환하는 것은 아니고, 미래의 어떤 시점에 결과를 제공하겠다는
약속을 반환한다.

Promise는 다음 중 하나의 상태를 가진다.

  • 대기(pending): 이행하지도, 거부하지도 않은 초기 상태.

  • 이행(fulfilled): 연산이 성공적으로 완료됨.

  • 거부(rejected): 연산이 실패함.


  • promise의 예시
// fulfilled
function aaa() {
  return new Promise(function (resolve, reject) {
    resolve("이행(fulfilled): 연산이 성공적으로 완료됨");
  });
}

// rejected
function bbb() {
  return new Promise(function (resolve, reject) {
    reject(new Error("거부(rejected): 연산이 실패함"));
  });
}

// fulfilled
aaa().then(function (ccc) {
  console.log(ccc); // 100
});

// rejected
bbb().then().catch(function (err) {
  console.log(err); // Error: Request is failed
});
profile
인간 js엔진

0개의 댓글