WEB/javascript

콜백 함수

일상코더 2023. 3. 12. 01:54

콜백 함수(callback function)란?

            함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수(callback function)라고 하며,

            매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차 함수Higher-Order Function, HOF

 

//고차 함수
function repeat(n, f){
	for(var i = 0 ; i < n; ++i){
		f(i);
    }
}

//콜백 함수 
var logAll = function(i){
	console.log(i);
}

//반복 호출할 함수를 인수로 전달
repeat(5, logAll);

 -> 고차 함수는 콜백 함수를 자신의 일 부분으로 합성한다.

 -> 고차 함수는 매개변수를 통해 전달받은 콜백 함수의 호출 시점을 결정해서 호출한다.

 -> 콜백 함수는 고차 함수에 의해 호출되며, 이때 고차 함수는 필요에 따라 콜백 함수에 인수를 전달 할 수 있다.

 

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Counter</title>
</head>
<body>
    <!-- 버튼 생성-->
    <div>
        <button id="myButton">버튼눌러</button>
    </div>

	  <!-- DOM 동적 생성 -->

    <script>
        /*
            콜백 함수를 사용한 이벤트 처리
            myButton 버튼을 클릭하면 콜백 함수를 실행한다.
        */
        document.getElementById('myButton').addEventListener('click', function () {
            console.log('버튼을 눌렀다.');
        });

        console.log("hello, world");

        /*
        	콜백함수로 비동기 처리
        */
        setTimeout(function () {
            console.log('3초 경과');
        }, 3000);

        console.log("I am faster than you");
        /*
            '3초 경과'가 먼저 출력될것 같지만 
            비동기 처리로 'hello, world'와 'I am faster than you'가 먼저 출력되고
            3초뒤에 '3초 경과가 출력된다'
        */
    </script>
</body>
</html>