Callback 함수란?

callback 또는 콜백 함수(callback function)는 다른 코드의 인수로서 넘겨주는 실행 가능한 코드를 말한다.

 

라고 구글이 말한다.

 

쉽게 말하면 특정 함수나 특정 행동이 끝난 뒤 실행하고 싶은 함수나 행동이 있다 싶을때

콜백을 사용하면 된다.

 

이런것을 비동기 방식이라고 하며,

 

이런 식의

 

4초 뒤 실행하는 a 함수

3초 뒤 실행하는 b 함수

2초 뒤 실행하는 c 함수 가 있다고 할 때,

 

실행순서가 반드시 a,b,c 가 나와야 한다. 근데 이렇게 실행을 시키고 콘솔창에서 확인해보면

 

c -> b -> a 순서로 나오는것을 볼 수 있다.

 

작업이 오래걸리는 함수가 있을 것이고 금방 끝나는 함수가 있을 것이다.

 

근데 꼭 순서가 중요한 작업이 있다. 오늘 했다...

 

a가 실행되고 그 값으로 b가 실행되고 그 값으로 c가 실행되어야 하는데

c부터 실행되버리면 올바른 결과가 나오지 않는다.

 

그래서 콜백함수를 사용한다.

function a(callback){
    setTimeout(function(){
        console.log('4초 뒤 a');
        callback();
    },4000);
}
function b(callback){
    setTimeout(function(){
        console.log('3초 뒤 b');
        callback();
    },3000);
}
function c(callback){
    setTimeout(function(){
        console.log('2초 뒤 c');
        callback();
    },2000);
}

이렇게 callback 함수로 만들어 주었다.

a는 4초뒤 콘솔에 뿌리고 callback() 실행하는 함수

b는 3초뒤 콘솔에 뿌리고 callback() 실행하는 함수

c는 2초뒤 콘솔에 뿌린고 callback() 실행하는 함수.

 

이제 실행시켜 볼건데 실행시킬때

 

a(b(c()));

이렇게 하면 안된다... ㅋㅋ 이렇게 하는 사람 없데요...

 

a(function(){
   b(function(){
      c(function(){
          console.log('끝');
      });
   });
});

위의 방식으로 콜백함수를 실행한다. 

 

결과는 

a -> b -> c 의 순서로 진행된것을 볼 수 있다.

 

 

학원에서는 그냥 배우고 지나간것인데 실무에서는 필수인것 같다.

금방끝나는 기능들도 있고 오래 걸리는 기능들이 있는데

순서가 필수적으로 필요한 경우가 있으니 꼭 알아두기.