callback함수

callback 함수

callback 함수는 함수인데 다른 함수의 인자로 사용되어 다른 함수에 의해 나중에 호출되는 함수를 의미한다

val = function(a) {
  return 2*a
}
function fn(arg) {
  arg()
}
fn(val) // 여기서 val은 callback함수이다

val은 fn함수의 입력값으로 전달 되어서 다른 함수에 의해 나중에 호출되므로 콜백 함수이다

 

콜백 함수가 필요한 이유

콜백 함수 없이 프로그램을 작성해보면

function notUseCallback(n){
		for (i=0; i<n; i++);{
   			print("asdf"); 
  	}
}

function print(str){
  	console.log(str);
}
notUseCallback(3)//asdf 3번 반복출력

콜백함수 없이도 매끄럽게 코드가 작성된것 같다

 

콜백 함수 이용

function useCallback(n,callback){
		for (i=0; i<n; i++);{
   			callback("asdf"); 
  	}
}

function print(str){
  	console.log(str);
}
notUseCallback(3, print)//asdf 3번 반복출력

크게 차이가 없어 보이지만 만약에 출력한느 함수를 수정하거나 변경한다면 콜백 함수가 없었을 때는 첫번째 함수를 변경하거나 두번째 함수를 수정해야한다 하지만 콜백 함수를 이용하면 함수 실행부분만 바꾸거나 두번째 함수를 수정하면 된다

함수 내에서 해야할 일을 콜백함수로 추상화하여 전달 받았기 때문에 useCallback함수는 더 유연한 구조를 가진게 된다

콜백 함수는 외부에서 입력하는 것이기 때문에 자유롭게 교체 가능하다

코드의 가변성과 확장성 증가

 

 

콜백 지옥

one(function(val){
  two(function(val){
    three(function(val){
      four(function(val){
        consol.log("callback hell");
      });
    });
  });
});

위 코드는 4번의 콜백함수로 이루어져 있지만 이게 더 길어진다면 가독성이 매우 떨어지고 대괄호나 소괄호가 많기 때문에 유지보수가 매우 어려워진다 이를 해결하기 위해서 promise를 이용할 수 있다 (promise는 then으로 각각의 작업이 체이닝되어 보기 쉽게 나타낼 수 있다 async & await도 가능)