본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT

[Javascript] 콜백 함수

콜백 함수

함수를 변수에 저장하고 변수를 함수의 인수로 사용하여 매개변수에 전달하는 함수입니다.


콜백 함수

콜백 함수는 매개변수로 전달하는 함수입니다.

Sample1

화살표 함수를 사용하는 기본 예제입니다.

결과
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>콜백 함수</title>
    <script>
        function callback(num){
            for(var i=1; i<=10; i++){
                num(i);
            }
        }
        var func7 = function(i){
            document.write("함수가 실행되었습니다.
"); } callback(func7); </script> </head> <body> </body> </html>

Sample2

콜백함수를 이용한 오름차순 내림차순 예제입니다.

결과
내림차순 : 200,100,90,70,50,30,10,0
오름차순 : 0,10,30,50,70,90,100,200
html
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>콜백 함수</title>
    <script>
        var num = [0,50,100,70,90,30,10,200];
        
        function func81(x,y){
            return y-x;
        }
        function func82(x,y){
            return x-y;
        }
        
        document.write("내림차순 : " + num.sort(func81),"<br>");
        document.write("오름차순 : " + num.sort(func82),"<br>");
    </script>
</head>
<body>
    
</body>
</html>

더보기

인스타그램 보기 바로가기

포트폴리오 스터디 바로가기

유튜브 영상보기 바로가기