반응형
노드JS를 공부하다 보면 비동기로 처리가 되어서 함수 처리 후에 나오는 값을 제대로 받을 수가 없는 적이 정말 많다.
그래서 이 비동기 처리되는 것을 원하는 대로 처리하기 위해 나온 게 콜백 함수다.
추후에 나온 promise라던지 async&await 같은 편하게 비동기 처리하는 방식도 있지만 말이다
function func3(c, callback) {
console.log('함수정의3');
callback(c);
}
function func2(b, callback) {
console.log('함수정의2');
callback(b);
}
function func(a, callback) {
console.log('함수정의1');
callback(a); //function (result) <-result 내부값
}
func(1, function (result) {
console.log('함수1 result', result);
func2(result + 1, function (result) {
console.log('함수2 result', result);
func3(result + 1, function (result) {
console.log('함수3 result', result);
});
});
});
함수 정의의 파라미터 callback이라고 써진 것은 중요하지 않다
함수정의 내부의 callback('값') 이 그 함수가 리턴하는 값이다.
또 하나의 예제
function func(a, b, cb) {
console.log('함수정의1');
var pre = a + 3;
var aft = b + 5;
cb(pre, aft);
}
function func2(a, b, cb) {
console.log('함수정의2');
var c = a + b;
cb(c);
}
func(1, 2, function (result1, result2) {
console.log('함수1', 'result1', result1, 'result2', result2);
func2(result1, result2, function (result) {
console.log('함수2', result);
});
});
다중 콜백 시에 코드 가독성이 떨어지고 복잡해진다.
그래서 promise나 async&await를 사용하고꼭 사용해야 한다면 낮은 레벨에서만 사용하는 게 좋겠다는 생각을 한다.
반응형
'Web > JavaScript' 카테고리의 다른 글
자바스크립트 비동기처리에 대한 promise 사용법 (0) | 2020.07.08 |
---|---|
자식 팝업창에서 부모함수 호출하기 (0) | 2020.07.05 |
Javascript 상속 (0) | 2020.03.03 |
Javascript 생성자(Constructor)와 클래스(Class) (0) | 2020.03.03 |
자바스크립트 변수 선언, 문자열과 함께 변수 사용하기 (0) | 2020.03.03 |