본문 바로가기

Webstoryboy

Category

Explanation

JAVASCRIPT

[Javascript] 리턴 값이 있는 함수

리턴값이 있는 함수

결과 값이 있는 함수입니다.


리턴값이 있는 함수

결과 값이 있는 함수입니다. ruture이라는 키워드를 이용하여 함수의 결과값을 출력하는 방법입니다. 리턴값은 실행문을 강제로 종료하는 역할도 합니다.

function 함수이름(){
     //실행내용
     return 리턴값;
}
var 변수 = 함수명(); //함수호출

Sample1

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

결과
1. 함수가 실행되었습니다.
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        //리턴문
        function func4(){
            var str = "1. 함수가 실행되었습니다.
"; return str; } var value = func4(); document.write(value); </script> </head> <body> </body> </html>

종료역할 하는 리턴 값

function 함수이름(){
     //실행내용
     return 리턴값;

     //실행내용
}
var 변수 = 함수명(); //함수호출

Sample2

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

결과
2. 함수가 실행되었습니다.
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        //종료 역할하는 리턴문
        function func41(){
            document.write("2. 함수가 실행되었습니다.");
            return;
            
            document.write("3. 함수가 실행되었습니다."); //실행안됨
        }
        func41();
    </script>
</head>
<body>
    
</body>
</html>

Sample3

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

결과
300
html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        //매개변수 + 리턴문
        function func5(num1, num2){
            return num1 + num2;
        }
        let result = func5(100, 200);
        document.write(result);
    </script>
</head>
<body>
    
</body>
</html>

Sample4

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

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Javascript</title>
</head>
<body>
    <div id="galleryZone">
        <p><img id="photo" src="img/pic_1.jpg" alt="이미지1" style="width:500px"></p>
        <div>
            <button onclick="gallery(0)">이전</button>
            <button onclick="gallery(1)">다음</button>
        </div>
    </div>
    <script>
        let num = 1;
        function gallery(direct){
            if(direct){
                if(num == 8) return;
                num++;
            } else {
                if(num == 1) return;
                num--;
            }
            console.log(num);
            let imgTag = document.getElementById("photo");
            imgTag.setAttribute("src","img/pic_"+num+".jpg");
        }
    </script>
</body>
</html>

더보기

인스타그램 보기 바로가기

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

유튜브 영상보기 바로가기