[JS] 함수 (function, 함수선언문, 함수표현식, 반환문, 재귀 함수)
2021. 8. 2. 22:03
728x90
01 함수의 기초
- 함수(function)란 하나의 특별한 목적의 작업을 수행하기 위한 필요한 문(statement)들의 집합을 정의 한 코드 블록.
- 함수는 이름과 매개변수를 갖으며 필요한 때에 호출하여 코드블록에 담긴문들을 실행할 수 있음.
02 함수 선언문 (function declaration)
- 함수 선언문의 구성 요소들
- 함수 이름
- 괄호 안에 쉼표로 구분되는 함수의 매개변수 (매개변수1, 매개변수2)
- 중괄호로 둘러싸인 자바스크립트 실행문 { }
<script>
function 함수이름(매개변수1, 매개변수2,...) {
함수가 호출되었을 때 실행하고자 하는 실행문;
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>function</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script>
function sum(a,b){
document.write(a+b);
}
sum(3,4)
</script>
</head>
<body>
</body>
</html>
03 함수 표현식 (function expression)
기명 함수 표현식익명 함수 표현식- 함수 표현식 방식으로 정의한 함수는 함수명을 생략.
- 이름이 없는 함수.
- 반드시 변수에 저장.
- 변수명 실행.
- 이벤트 처리.
- 객체에 함수 등록 할때.
괄호 함수 표현식- 함수 키워드와 함수 이름이 없이 선언하는 함수.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>function</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script>
// 기명 함수 표현식 (named function expression)
var result = function sum(number){
return number + number;
}
// 익명 함수 표현식 (annonymous function expression)
var result = function (number){
return number + number;
}
// 괄호 함수 표현식
var result = (number) => {
return number + number;
}
</script>
</head>
<body>
</body>
</html>
04 반환문 (return)
- 함수는 반환(return)할 수 있음
- 이러한 반환문을 통해 호출자는 함수에서 실행되어 반횐된 값인 반환 값(return value) 을 전달받을 수 있음.
- 반환문은 함수의 실행을 중단하고 return 키워드 다음에 명시된 표현식의 값을 호출자에게 반환.
- 배열 등을 이용하여 한 번에 여러 개의 값을 리턴 할 수 있음.
- 결과 값을 되돌려 주는 키워드.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>function</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script>
function sub(a,b){
// a - b 의 결과를 반환
return a-b;
}
//sub() 함수가 호출 그 반환값이 변수 result 에 저장
var result = sub(7,3)
document.write(result)
</script>
</head>
<body>
</body>
</html>
05 재귀 함수 (recusive function)
- 자기 자신을 호출하는 함수.
- 재귀 함수는 자신을 무한히 연쇄 호출하므로 호출을 멈출 수 있는 탈출 조건을 반드시 만들어야 함.
- 탈출 조건이 없는 경우, 함수가 무한 호출되어 stackoverflow 에러가 발생.
- 반복문보다 재귀 함수를 통해 보다 직관적으로 이해하기 쉬운 구현이 가능한 경우에만 한정적으로 적용하는 것이 좋음.
예제) 팩토리얼: 1부터 자신까지의 모든 양의 정수의 곱 ( 5! = 1 * 2 * 3 * 4 * 5 )
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>function</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<script>
function factorial(n){
if (n < 2) return 1;
return factorial(n - 1) * n
}
document.write(`방법 1 : ${factorial(4)}<br>`)
function fac(n){
var result = 1;
for (i=2; i<=n; i++)
result *= i;
return result;
}
document.write(`방법 2 (for문) : ${fac(4)}`)
</script>
</head>
<body>
</body>
</html>728x90
'JavaScript > Study' 카테고리의 다른 글
| [JS] DOM 요소의 선택 (0) | 2021.08.02 |
|---|---|
| [JS] navigator 객체 (navigator.appName, navigator.appCodeName, navigator.appVersion, navigator.userAgent) (0) | 2021.08.02 |
| [JS] location 객체 (location.href, location.reload) (0) | 2021.08.02 |
| [JS] History 객체 (histroy.forward, histroy.back) (0) | 2021.07.30 |
| [JS] 대화상자 (alert, confirm) (0) | 2021.07.30 |
