[JavaScript] 함수(Function)

* 함수(function) : 기능을 정의해 놓은 것.

함수는 하나의 로직을 재사용할 수 있도록 하는 것으로 코드의 재사용성을 높여줌.

형식) function 함수명(매개변수1, 매개변수2) {
함수 호출 시 실행될 문장;
return 반환값;
}

* 매개변수 : 일종의 외부 데이터를 함수 내부로 전달하는 매개체 역할을 하는 변수.

함수 외부에서 함수 내부로 값을 전달하는 방법이 바로 매개변수를 이용.

함수 사용 시 장점
1. 코드의 중복 제거 및 코드 재사용 가능.
2. 유지보수 용이성.

자바스크립트 함수의 종류
1. 사용자 정의 함수 : 사용자가 직접 만들어 놓은 함수.
2. 내장 함수 : 자바스크립트에서 자체적으로 제공해 주는 함수.

* 리턴값(return) : 함수 내분에서 처리된 결과값을 함수 외부로 전달하기 위해 사용되는 일종의 출력값
함수 내부에는 포장이 되어 있기 때문에 한번 실행이 되면 외부에서 접근이 불가능함.
리턴 값은 매개변수와는 반대되는 개념임. 사용되는 키워드 return.

* 무명(익명) 함수 : 이름이 없는 함수를 말함. 이벤트 처리 등에 자주 사용이 됨.
함수를 무명으로 만드는 경우에는 주로 함수를 재사용하지 않는 경우에 사용.

기본예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	function adder(num1, num2) {
		document.write("두 수의 합 >>> "+ (num1 + num2) + "<br>");
	}
	
	function sub(a1, a2) {
		document.write("두 수의 차 >>> "+ (a1 - a2) + "<br>");
	}
	
	function mul(a1, a2) {
		document.write("두 수의 곱 >>> "+ (a1 * a2) + "<br>");
	}
	
	function divide(s1, s2) {
		document.write("두 수 나누기 >>> "+ (s1 - s2) + "<br>");
	}
	
	function mod(su1, su2) {
		document.write("두 수의 나머지 >>> "+ (su1 % su2) + "<br>");
	}


	let su1 = parseInt(prompt("첫번째 숫자 입력"));
	let su2 = parseInt(prompt("두번째 숫자 입력"));
	
	adder(su1, su2);
	sub(su1, su2);
	mul(su1, su2);
	divide(su1, su2);
	mod(su1, su2);
	

</script>
</head>
<body>

</body>
</html>

구구단 함수

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	function gugudan(dan) {
		for(let i=1; i<=9; i++) {
			document.write(dan+" * "+i+" = "+(dan * i)+"<br>");
		}
	}

	let dan = parseInt(prompt("구구단의 단을 입력하세요."));
	
	gugudan(dan);

</script>
</head>
<body>

</body>
</html>

리턴값 예제

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	function sum(a1, a2) {
		return a1 + a2;
	}
	
	function sub(a1, a2) {
		return a1 - a2;
	}
	
	function mul(a1, a2) {
		return a1 * a2;
	}
	
	function divide(a1, a2) {
		return a1 / a2;
	}
	
	function mod(a1, a2) {
		return a1 % a2;
	}
	
	let su1 = parseInt(prompt("첫번째 숫자 입력"));
	let su2 = parseInt(prompt("두번째 숫자 입력"));
	let op = prompt("연산자 입력");
	
	switch(op) {
		case "+" :
			document.write(su1+" + "+su2+" = "+sum(su1, su2)+"<br>");
			break;
		case "-" :
			document.write(su1+" - "+su2+" = "+sub(su1, su2)+"<br>");
			break;
		case "*" :
			document.write(su1+" * "+su2+" = "+mul(su1, su2)+"<br>");
			break;
		case "/" :
			document.write(su1+" / "+su2+" = "+divide(su1, su2)+"<br>");
			break;
		case "%" :
			document.write(su1+" % "+su2+" = "+mod(su1, su2)+"<br>");
			break;
	}


</script>
</head>
<body>

</body>
</html>

무명 함수

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	let numbering = function() {
					for(let i=1; i<=10; i++) {
						document.write("i >>> " + i + "<br>");
					}
	}

	numbering();

</script>
</head>
<body>

</body>
</html>

객체를 리턴하는 함수

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

	function get_members() {
		return ['java', 'javascript', 'html', 'css'];
	}
	
	let members = get_members();
	
	for(let i=0; i<members.length; i++) {
		document.write(members[i].toUpperCase() + "<br>");
	}

</script>
</head>
<body>

</body>
</html>

저작자표시

'Front > JavaScript' 카테고리의 다른 글

[JavaScript] BOM(Browser Object Model) (0)	2021.04.26
[JavaScript] 객체(Object), 내장 객체(Date, Math) (0)	2021.04.26
[JavaScript] 배열(Array) (0)	2021.04.23
[JavaScript] 반복문(while문, for문) (0)	2021.04.23
[JavaScript] 조건문(if문, if~else문, 다중 if~else문, switch~case문) (0)	2021.04.23