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
});