콜백 함수(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>
'WEB > javascript' 카테고리의 다른 글
| let, const (0) | 2023.03.13 |
|---|---|
| 스코프 (2) | 2023.03.13 |
| 타입 변환과 단축 평가 (0) | 2023.03.10 |
| 객체 (0) | 2023.03.10 |
| DOM (0) | 2023.03.08 |
댓글