본문 바로가기
내마음대로만들어보자/JS

함수에서 return문의 역할

by 소농민! 2021. 8. 14.
728x90

return문은 함수에서 결과값을 반환할 때 사용한다.

return문이 실행되면 코드가 강제로 종료된다.(반복문의 break문과 유사함)

 

1. 데이터를 반환하고 강제 종료하는 return문 

 

* 기본형

function 함수명(){
    자바스크립트코드1;
    return 데이터(값);

    자바스크립트코드2;
}

var 변수 = 함수명();

// 함수 호출문 - 함수코드 실행 - 자바스크립트코드2를 무시하고 데이터를 반환 

* 함수 정의문 내에서 작성한 코드를 실행한 후 계산된 결과값을 return문으로 함수 호출문에 반환하는 예제

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title> 함수 </title>
    <script>
        function testAvg(arrData){
            var sum = 0;
            for (var i = 0; i < arrData.length; i++){
                sum += Number(prompt(arrData[i] + "점수는?","O"));
            }
            
            var avg = sum/arrData.length;
            return avg;
        }
        
        var arrSubject = ["국어", "수학"];
        var result = testAvg(arrSubject);
        
        document.write("평균점수는" + result + "점입니다.");
    </script>
</head>

<body>
</body>

</html>

 

* 총8개의 이미지를 사용해 갤러리를 만드는 예제를 해보자.

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title> 함수 </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #galleryZone {
            text-align: center;
        }

        #galleryZone input[type="image"] {
            margin: 0 8px;
        }

    </style>
    <script>
        var num = 1;
        function gallery(direct){
            if(direct) {
                if(num == 8) return;
                num++;                           // 다음버튼을 누르면 direct의 값이 1이 되어 num의 값이 1만큼 증가한다.
            }else{
                if(num == 1) return;
                num--;                            // 이전버튼을 누르면 direct의 값이 0이 되어 num의 값이 1만큼 감소된다. 
            }
            
            var imgTag = document.getElementById("photo");
            imgTag.setAttribute("src", "images/pic_" + num + ".jpg");

// id 값이 "photo"dls 이미지 태그를 선택한다. 그런다음 'src' 속성을 새값으로 설정한다. 
//setArrtibute("속성명","새 값") 메서드는 선택한 태그의 지정한 속성을 새값으로 바꿔준다. 
        }
    </script>
</head>

<body>
    <div id="galleryZone">
        <p><img src="images/pic_1.jpg" id="photo" alt=""></p>
        <p>
            <button onclick="gallery(0)">이전</button>
            <button onclick="gallery(1)">댜음</button>
        </p>
    </div>
</body>

</html>

 여기에서 다음버튼을 누르면 pic_2,3, ... .jpg가 순서대로 나타난다. 이미지의 파일명 숫자가 1씩 증가되며 그림이 나타나는데

이미지는 8까지 있기때문에 9가 나오면 이미지를 불러올 수 없으므로 return문으로 함수를 종료해준다.

 

2. 재귀 함수 호출 

함수 정의문 내에서 작성한 코드로 함수를 다시 호출하는 것을 재귀함수 호출이라고 한다. 

(함수를 반복문처럼 여러번 호출하기 위해 사용한다.)

 

* 기본형

function myFnc(){
     자바스크립트코드;
     myFnc();
}

myFnc();

* 재귀함수 호출을 적용하여 1부터 10까지의 값을 출력하는 예제를 사용해보자.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset = "UTF-8">
<title> 함수 </title>
<script>
var num = 0;
function testFnc(){
        num++;
        document.write(num, "<br>");
        if(num == 10) return;
       //num값이 10이면은 종료한다. 
        
        testFnc();
}

testFnc();
</script>
</head>
<body>
</body>
</html>

 

저작자표시

'내마음대로만들어보자 > JS' 카테고리의 다른 글

객체 생성자 함수  (0) 2021.08.15
함수 스코프(Scope)  (0) 2021.08.15
자바스크립트 함수란?  (0) 2021.08.14
while문  (0) 2021.08.13
리터럴  (0) 2021.08.13

관련글

티스토리툴바