반응형
함수(function)
함수는 기능이다.
주어진 입력에 따라 명령을 수행하여 처리된 결과를 돌려주는 구조를 함수라고 함.
자바스크립트에 내장된 함수도 있고 직접 정의할 수도 있다.
사용자 정의 함수 정의 방법
- function 명령으로 정의
- Function 생성자를 이용하여 정의
- 함수 리터럴 표현으로 정의
1. function 명령으로 정의
|
function 함수명([인수1][, 인수2[, ...]]) { [return [반환 값];] |
함수명 규칙
- 함수의 기능이 표현되는 이름을 사용(동사+명사 형식이 일반적. showMessage)
인수는 함수 동작에 필요한 값을 받는 변수다.
return은 함수의 종료 및 반환할 값을 지정하는 키워드
functiontest.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>함수의 기초</title>
</head>
<body>
<pre>
<script type="text/javascript">
function triangle(base, height) {
return base * height / 2;
}
document.writeln('삼각형의 면적：' + triangle(5,2));
</script>
</pre>
</body>
</html>
|
cs |
함수 호출 시 소괄호를 생략하면 함수코드가 그대로 출력됨
2. Function생성자를 이용하여 정의(일반적으로 사용하지 않음)
var func = new Function([인수1 [, 인수2 [, … ]]], 함수 본체 );
functionObject1test.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>함수의 기본</title>
</head>
<body>
<pre>
<script type="text/javascript">
var triangle = new Function('base', 'height', 'return base * height / 2;');
document.writeln('삼각형의 면적：' + triangle(5,2));
</script>
</pre>
</body>
</html>
|
cs |
functionObject2test.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>함수의 기본</title>
</head>
<body>
<pre>
<script type="text/javascript">
var param = 'height, width';
var formula = 'return height * width / 2;';
var diamond = new Function(param, formula);
document.writeln('마름모의 면적：' + diamond(5,2));
</script>
</pre>
</body>
</html>
|
cs |
Function생성자를 이용하는 방법은 인수나 함수 본체를 문자열로 별도 정의가 가능하다.
좋은 방법이 아니므로 사용하지 않는다.(eval()함수와 같은 개념)
3. 함수 리터럴 표현 방식으로 정의
자바스크립트에서는 함수도 데이터 타입이다.
함수에 변수를 대입하거나 함수의 인수로 함수를 전달하거나 반환 값으로 함수를 이용할 수도 있다.(미친…)
functionLiteraltest.html
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>함수의 기본</title>
</head>
<body>
<pre>
<script type="text/javascript">
var triangle = function(base, height) {
return base * height / 2;
};
document.writeln('삼각형의 면적：' + triangle(5,2));
</script>
</pre>
</body>
</html>
|
cs |
함수 리터럴은 익명(무명)의 함수를 정의하여 변수에 대입하는 방식으로 정의됨.
반응형
'교육자료 > Javascript' 카테고리의 다른 글
| 15-3. 변수의 범위 (0) | 2019.05.09 |
|---|---|
| 15-2. 함수 사용 시 주의 (0) | 2019.05.09 |
| 14. Global 내장객체 (0) | 2019.05.09 |
| 13. Object 내장객체 (0) | 2019.05.09 |
| 12. RegExp 객체(정규 표현식) (0) | 2019.05.09 |