본문 바로가기
공부(TIL)/Javascript

Callback 함수

by 하루지오 2024. 3. 13.

1. Callback 함수

- 다른 함수의 매개변수로 전달되어 그 함수 내에서 호출되는 함수

- 파라미터로 함수를 받아와서 callback으로 함수 호출

- 함수 내에서 함수 외부에 있는 다른 함수를 가져와서 호출하려면 콜백 함수를 사용

- 함수를 다른 함수의 인자로 전달하여 그 함수 내에서 필요한 시점에 호출하는 방식

- 익명 함수, 선언적 함수 모두 callback 함수로 사용 가능

 

1) 익명 함수로 callback 함수 정의

 callThreeTimes 함수의 인자로 전달되는 함수

"callThreeTimes" 함수를 선언하고, 그 함수를 호출할 때 사용되는 함수가 바로 콜백 함수

- 즉,  callThreeTimes 함수를 선언하고 그 함수를 callback으로 호출한다는 것

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // callback 함수 : 파라미터로 함수를 받아와서 callback으로 함수 호출
        function callThreeTimes(callback){
            for(let i=0;i<3;i++)
            callback(i);
        }
        
        // 익명 함수로 callback 호출하기
        callThreeTimes(function(i){
            console.log(`${i}번째 함수 호출 - 익명함수`);
        });
    </script>
</head>
<body>
    
</body>
</html>

 

2) 선언적 함수로 callback 함수 정의

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //callback: 함수 이용 / GUI 이벤트 시 주로 사용함
        function callThreeTimes(callback){
            for(let i=0; i<3; i++)
            callback(i);
        }
        // 선언적 함수로 callback함수 정의
        function print(i){
            console.log(`${i}번째 함수 호출`);
        }

        callThreeTimes(print);
    </script>
</head>
<body>
    
</body>
</html>

 

'공부(TIL) > Javascript' 카테고리의 다른 글

window.innerWidth  (0) 2025.01.13
[프로그래머스] 기초 Day1  (0) 2024.08.24
forEach문  (0) 2024.03.13