Front/JavaScript
JavaScript - 함수의 반환값, 매개변수
by Hyeon_
2021. 12. 9.
JavaScript
함수의 반환 값
- 함수 실행이 끝난 후 호출한 곳으로 돌려주는 결과값
- 함수 내에서 return문 사용
function sum() {
return n1 + n2;
}
// 함수 호출한 곳으로 값 반환
var s = sum();
function sum() {
return n1 + n2;
}
// 출력문에서 호출한 결과값 바로 출력하기
document.write("합계 : " + sum());
예제
functionReturn.js
- 숫자 2개를 입력받아 두 수를 더한 결과값 반환하기
// sum() : 숫자 2개를 입력받아서 두 수를 더한 결과값 반환
function sum() {
var n1 = Number(prompt("숫자1 입력"));
var n2 = Number(prompt("숫자2 입력"));
return n1 + n2;
}
document.write("합계 : " + sum());
연습문제
functionReturnEx.html
- 버튼 클릭하면 "성적을 입력하시겠습니까?" 입력
- [확인] 누르면 성적 입력받고 평균 출력
- [취소] 누르면 "종료합니다" 출력
- start() 함수
- 버튼 클릭하면 호출되고
- input() 함수 호출
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script type="text/javascript">
function start() {
var ask = confirm("성적을 입력하시겠습니까?");
if(ask) {
alert("평균 : " + input());
}else {
alert("종료합니다");
}
}
function input() {
var kor = Number(prompt("국어 성적 입력"));
var math = Number(prompt("수학 성적 입력"));
var eng = Number(prompt("영어 성적 입력"));
var avg = (kor + math + eng)/3;
return avg.toFixed(2);
}
</script>
</head>
<body>
<button onclick="start()">성적입력</button>
</body>
</html>
함수 매개변수
- 함수 호출 시 전달된 값을 받기 위해 사용되는 변수
- 함수 내에서 지역 변수로 사용
function sum(x,y){
return x + y; // 함수 내에서만 사용하는 지역변수로 사용
}
- 매개변수가 있는 함수 호출 : 반드시 값을 전달해야 함
function sum(x,y){
return x + y;
}
// 호출하면서 전달하는 값 : 인수(인자)
document.write("합계 : " + sum(10,20));
예제
functionParam.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 매개변수가 있는 함수</title>
<script type="text/javascript">
// 예금액과 이자율 전달받아서 예금이자 구해 출력하는 함수
function calinterest(deposit, rate){
var interest = deposit*rate/100;
document.write("예금이자: " + interest + "원");
}
function input(){
deposit = parseInt(prompt("예금액 입력"));
rate = parseInt(prompt("이자율 입력"));
calinterest(deposit, rate);
}
</script>
</head>
<body onload="input()">
</body>
</html>
연습문제
functionParanEx.html
- [테이블 만들기] 버튼 클릭하면 입력 받고 테이블 출력
- input() 함수
- 테이블의 행 수, 열 수 입력받아서
- makeTable() 함수에게 전달
- makeTable() 함수
- 전달받은 행, 열 값으로 테이블 생성해서 출력
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript 매개변수가 있는 함수</title>
<script type="text/javascript">
function input(){
cal = parseInt(prompt("테이블 행 수 입력"));
row = parseInt(prompt("테이블 열 수 입력"));
makeTable(row, cal);
}
function makeTable(row, cal){
document.write("<table border=\"1\">");
for(let i = 1; i<=row; i++) {
for(let j = 1; j<=cal; j++) {
document.write("<td>" + "★" + "</td>");
}
document.write("<tr></tr>");
}
document.write("</table>");
}
</script>
</head>
<body>
<button onclick="input()">테이블 만들기</button>
</body>
</html>
functionParamReturnEx.html
- 매개변수와 반환값이 있는 함수 연습문제
- input() 함수
- 숫자 5개를 입력받아서 배열에 저잫나 후
- max() 함수에 전달 -> 반환 받은 최대값 출력
- max() 함수
- 배열을 전달받아서
- 배열 원소 중 최대값 구해서 반환
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<script type="text/javascript">
function input() {
var arr = new Array(5);
for(var i = 0; i<arr.length; i++){
arr[i] = parseInt(prompt("숫자" + (i+1) + "입력"));
}
document.write("최댓값 : " + max(arr));
}
function max(arr) {
var max_num = 0;
for(var i=0; i<arr.length; i++){
if (max_num < arr[i]){
max_num = arr[i];
}
}
return max_num;
}
</script>
</head>
<body onload="input()">
</body>
</html>