callback 함수
javascript에서 callback 함수는 다른 함수의 매개변수로 함수를 전달하고, 어떠한 이벤트가 발생한 후 매개변수로 전달한 함수가 때가 되면 나중에 호출(called back)한다는 것이 콜백함수의 개념이다.
// 외부에서 전달받은 f를 n만큼 반복 호출한다
function repeat(n, f) {
for (var i = 0; i < n; i++) {
f(i); // i를 전달하면서 f를 호출
}
}
var logAll = function (i) {
console.log(i);
};
// 반복 호출할 함수를 인수로 전달한다.
repeat(5, logAll); // 0 1 2 3 4
var logOdds = function (i) {
if (i % 2) console.log(i);
};
// 반복 호출할 함수를 인수로 전달한다.
repeat(5, logOdds); // 1 3이처럼 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라 하며, 매개변수를 통해 함수 외부에서 콜백 함수를 전달 받은 함수를 고차 함수라 한다.
고차 함수는 매개변수를 통해 전달받은 콜백 함수의 호출 시점을 결정해서 호출한다.
즉, 콜백 함수는 고차 함수에 의해 호출되며 이때 고차함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있다.
콜백 함수는 함수형 프로그래밍 패러다임 뿐만 아니라 비동기 처리에 활용되는 중요한 패턴이다.
function first(a,b,callback){
let v = a * b;
callback(v);
}
first(1,2,function(v){
console.log(v); //2
})그래서 callback 함수는 언제 사용하는데?
callback 함수를 사용하는 이유는 자바스크립트에서 비동기적 프로그래밍을 할 수 있기 때문이다.
시간이 걸리는 작업이 있을 때, 작업 후에 할 일을 콜백으로 지정하면 해당 작업이 끝났을 때 미리 등록한 작업을 실행시키면서 비동기로 싱글스레드의 멈춤을 방지할 수 있다.
또한 콜백 함수는 주로 배열에서 사용 가능한 foreach, map, filter, reduce 함수에서 사용되기도 한다.
// filter를 이용한 홀수 찾기
const arr = [1, 2, 3];
// 화살표 함수 사용
const Odd = (number) => number % 2
const arrFilter = arr.filter(Odd);
console.log(arrFilter);
//[ 1, 3 ]비동기처리 : 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스클비트
callback hell 콜백지옥?
콜백지옥은 비동기 처리 로직을 위해 콜백 함수를 연속해서 사용할 때 발생하는 문제이다.
주로 이벤트 처리나 서버 통신과 같은 비동기 작업을 처리해야할 때 콜백 함수 안에 콜백함수를 계속 타고가는 형식으로 코딩을 하는 경우가 있다. 이때 가독성도 떨어지고 코드를 변경하기도 어렵다. 이런 형태를 콜백지옥이라고 부른다.
step1(function (value1) {
step2(function (value2) {
step3(function (value3) {
step4(function (value4) {
step5(function (value5) {
step6(function (value6) {
// Do something with value6
});
});
});
});
});
});이 떄 콜백지옥을 해결하는 방법에는 Promise, Async/await 를 사용하는 방법이 있다. 이 두가지 방법에는 추후 따로 포스팅을 하겠다. (양이 많기 때문!)
참고
https://url.kr/bq658l
https://www.howdy-mj.me/javascript/asynchronous-programming/
모던 자바스크립트 Deep Dive
