javascript - 콜백함수

 

콜백함수에 대해서 알아봅시다.

콜백함수는 다른 함수에 인수로 넘겨지는 함수 를 말합니다. 

 

funcA()와 funcB()가 순서대로 있는 와중에 A가 아니라 B를 먼저 실행 시키고 싶을때 사용할 수 있습니다. 

동시에 이루어지는걸 동기,  동시에 이루어지지 않는 방식을 비동기라고 합니다. 

 

  function func(){
        document.write("함수가 실행되었습니다.2");
    }

    function callback(str){
        document.write("함수가 실행되었습니다.1");
        str();
    }
    callback(func);

 

콜백함수 안에서 매개변수 str에 함수 func가 들어갑니다. 원래대로 차레 차례 실행을 하면 

함수가 실행되었습니다. 2
함수가 실행되었습니다. 1

이렇게 나와야 하지만 콜백함수에 매개변수가 func이 들어가고 콜백함수의 매개변수 실행이 뒤로 와서 

함수가 실행되었습니다. 1
함수가 실행되었습니다. 2

가 실행됩니다. 

 

다음은 콜백함수를 이용한 함수의 반복문 입니다.

 

//콜백 함수 반복문
    function func(){
        document.write("함수가 실행되었습니다.");
    }
    function callback(num){
        for(let i =1; i<=5; i++){
            num(i);
        }
    }
    callback(func);

for문을 이용한 함수의 반복입니다. callback 함수의 매개변수 num이 5번 실행이 됩니다. 

 

다음은 setTimeout을 이용한 비동기 방식의 콜백함수 입니다.

 

 function funcC(){
        setTimeout(()=>{
            console.log("C");
        },1000)            
    }
    function funcD(){
        console.log("D")
    }
    funcC();
    funcD();

이렇게 되면 D가 먼저 실행된 후 1초 후 C가 실행됩니다.

 

 function funcE(callback){
            setTimeout(()=>{
                console.log("E");
                callback();
            },1000);
        }
        function funcF(){
            console.log("F");
        }
        funcE(function(){
            funcF();
        })

이번에는 둘다 1초 후에 실행됩니다. funcE 안에 funcF가 들어가서 E가 먼저 실행 후 F가 나옵니다.