[자바스크립트] 콜백함수

콜백 함수란?

함수 내부의 처리 결과값을 함수 외부로 내보낼 때 사용합니다.

처음 공부할 때 굉장히 헷갈렸던 부분이어서 차근차근 정리하겠습니다.

 

⭐️ 동기 , 비동기

동기 : 말 그대로 '동시에' 일어난다는 뜻입니다.

이벤트가 동시에 일어나야 하기 때문에, 요청을 한다면 시간이 얼마나 걸리든 결과가 같이 나와야 합니다.

ex) alert() 함수 / alert 함수는 메시지 창의 확인 버튼을 눌러야 다음 이벤트가 진행됩니다.

 

비동기 : 동시에 일어나지 '않는다'

이벤트가 동시에 일어나지 않기 때문에, 1번 요청을 하고 1번 결과가 나오기 전에 2,3,4.. 요청들을 처리합니다.

ex) setInterval() , ajax()

콜백 함수가 주로 비동기 함수의 결과값을 처리하기 위한 도구로 많이 사용됩니다.

 

⭐️ 사용방법

//기존함수
     var Hi = function(name){
          document.write('Hi '+ name + '<br>');
        }
        Hi('Jane');
   //결과 : Hi Jane
   
//콜백함수 예제
	  function Hi(name,callback){
          document.write('Hi '+ name);
          callback();
        }
        function callbackName(){
          document.write('calllback function!!');
        }
        function callbackName2(){
          document.write('calllback function2222!!');
        }
        Hi('Jane' + '<br>', callbackName);
        Hi('Jane' + '<br>', callbackName2);
        
  //결과 : Hi Jane calllback function!!
  //결과 : Hi Jane calllback function2222!!

callbackName,callbackName2라는 함수를 만들고 Hi함수의 파라미터값(매개변수)으로 전달

Hi함수의 내부 로직이 모두 실행 된 후, 마지막에 callback함수 실행