💻 1. 웹개발_Front end/1-4 Javascript
[Javascript] 05-2 함수에서 return 문의 역할
달님🌙
2021. 9. 12. 20:49
반응형
return문
1. 의미 : return문은 함수에서 결괏값을 반환할 때 사용
+ 반복문의 break문처럼 return문이 실행되면 코드가 강제로 종료됨
2. 기본형
function 함수명() {
자바스크립트 코드1;
return 데이터(값);
자바스크립트 코드2;
}
var 변수 = 함수명();
3. 예제 - 각 과목들의 평균 점수 반환
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>리턴</title>
</head>
<body>
<script>
function testFnc(arrData) {
var sum = 0;
for(var i = 0; i < arrData.length; i++) {
sum += Number(prompt(arrData[i] + " 점수는?", "0"));
}
var avg = sum / arrData.length;
//계산된 평균 값 리턴
return avg;
}
var arrSubject = ["국어", "수학", "영어"];
var result = testFnc(arrSubject);
document.write("평균 점수는 : " + result + "점입니다.", "<br>");
</script>
</body>
</html>
4. 예제 - 이미지 파일을 이용해 갤러리 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>이미지 변경하기</title>
</head>
<body>
<div id="galleryZone">
<p><img src="images/pic_1.jpg" id="photo"></p>
<p>
<button onclick="gallery(0);">이전</button>
<button onclick="gallery(1);">다음</button>
</p>
</div>
<script>
var num = 1;
function gallery(direct) {
if(direct) {
//num이 8일때 num증가 못하도록 메소드 종료
if(num == 8) return;
num++;
} else {
//num이 1일때 num감소 못하도록 메소드 종료
if(num == 1) return;
num--;
}
var imgTag = document.getElementById("photo");
imgTag.setAttribute("src", "images/pic_" + num + ".jpg");
}
</script>
</body>
</html>
재귀함수 호출
1. 의미 : 함수 정의문 내에서 작성한 코드로 함수를 다시 호출하는 것을 재귀 함수 호출이라고 함
+ 재귀함수 호출은 함수를 반복문처럼 여러 번 호출하기 위해 사용함
2. 기본형
function myFnc() {
자바스크립트 코드;
myFnc();
}
myFnc();
3. 예제 - 재귀 함수 호출을 적용하여 숫자 1~10 출력
<script>
var num = 0;
function testFnc() {
num++;
document.write(num, "<br>");
//num이 10이 되면 메소드 종료
if(num == 10) return;
//재귀함수 호출
testFnc();
}
testFnc();
</script>
반응형