함수에 대하여,
이번에는 자바스크립트의 "꽃" 함수에 대해서 알아보려구 합니다. 그 이유는 함수가 전부라고 해도 과언이 아니라고 하네요.
함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차입니다. 또한, 함수를 정의하면 사용하는데에 몇 번이고 실행할 수 있고 호출할 수 있는 코드블록이에요!
함수에는 여러가지 알아야할 키워드들이 있어요.- 매개변수, 매서드, 생성자, 익명함수, 중첩함수가 무슨의미를 가지는지 알려드릴게요. ＊ 매개변수는?! 함수 몸체내에서 지역변수처럼 취급하는 변수에요.
＊ 매세드는?! 어떤 객체의 속성으로써 저장된 자바스크립트의 함수에요.
＊ 생성자
는?! 새롭게(=new) 생성된 객체를 초기화하는데 쓰이는 함수에요.
＊ 함수
는?! 다른함수에 중첩이 가능하고, 포함관계안에서 변수의 사용이 용이합니다..
또한, 함수의 이름없이 일회의 간단함으로써 익명함수를 사용될 수 있어요.
- 사용방법
＊ 함수호출(정의)
- 내부에 return문의 값이 있으면 그 값을 반환하고, 아니면 undefined를 반환한다.
- function 함수이름(전달인자1, 전달인자2,.... 전달인자n){
실행문
};
|
1
2
3
4
5
6
7
8
9
10
|
<body>
<script>
var b="<br>";
//1. 함수 호출
function f1(x, y){ //int m1(int x, int y){
return x * y; // return x * y;
} //}
</script>
</body>
|
＊ 함수실행
- 함수이름( '입력값' );
- document.write(함수이름( "입력값" );
|
1
2
3
4
5
6
7
8
|
<body>
<script>
//2. 함수 실행 : f1의 매개변수가 2개라면 기본적으로 ==> 함수호출할떄 인자값은 2개이상이여야한다.
document.write(f1(2.56,3.14) +b);
document.write(f1('java','script') +b); //문자나 부울식은 연산불가능하다
</script>
</body>
|
＊ 메서드호출- 객체.메서드 = 함수로 정의할 수 있다.- 객체.메서드로 호출할 수 있다 (객체안에 메서드가 정의된 경우)
＊생성자호출
- 함수나 메서드 호출앞에 new키워드가 있으면 생성자호출이다.
- 한 쌍의 빈 괄호()는 생략이 가능하다 .
- 새로 생성된 객체를 this키워드로 참조할 수 있다.
- 매개변수가 있는 함수 & 없는 함수
＊전역변수를 사용할 경우, 매개변수없이 함수마다 해당변수를 사용할 수 있다.
＊지역변수를 사용할 경우, 함수마다 해당변수를 매개변수로 사용해야한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
<body>
<script>
//3-a. 매개변수와 리텈값 => 함수의 실행한 결과값을 보여달라는 것
//함수안에 함수넣을땐, 리턴값도 함수가능한 자바에는 없는 특징
//function(function(){}){
// function(){}
// return function(){}
//}
var result= f1(true,false) ;
document.write(result +b);
function f2(x,y){ //매개변수(parameter): 함수 정의 전달받을 값
alert(x*y);
}
f2(2,5); //인수(argument): 함수 호출 전달하는 값
document.write("<br>" +f2);
//3-b. 매개변수가 없이 함수명만 => 함수의 소스를 보여달라는 것
//스크립트부가 시작되면 함수선언을 시작부분에: 함수호이스팅 => 바람직한 코딩방법
f1();//호출 먼저 ==> 따라서 매개변수가 없는 함수는 어느 위치에 와도 상관이 없다.
//유명 함수 선언(함수선언 이전에도 호출 가능함. 아무때나가능) + 리턴값없음
//f1= 함수내용 같이 할당(실행이전에)
function f1(){
alert('f1함수호출');
}
</script>
</body>
|
- 함수의 변수식
＊ 함수를 변수에 저장하기위해서는 이미 만들어진 함수상태일때만 가능합니다.
＊ var f1=function(){ alert("f1변수로 함수호출"); } // f1 할당, 실행 함수내용 할당
|
1
2
3
4
5
6
7
8
9
10
|
<body>
<script>
//함수 변수식 (함수 선언 이후에만 호출이 가능하다)
// f1 할당 / 실행 함수내용 할당
var f1=function(){
alert("f1변수로 함수호출");
}
</script>
</body>
|
- 그 외의 내장 메서드
＊ call() & apply() 메서드
- 어떤 함수를 간접적으로 호출할 수 있게 하며, 특정함수를 다른 객체의 메서드인 것처럼 다룰 수 있습니다.
- 함수.call(객체,전달인자....); 또는 함수.apply(객체,[전달인자,...])입니다.
- 여기서 객체는 호출되는 함수와 관련있는 객체입니다.
＊ bind() 메서드
- 함수와 객체를 서로 묶는 것입니다.
＊ toString() 메서드
- 함수 선언 구문 다음에 나오는 문자열을 반환
- 실제 대부분은 toString()메서드의 구현체들은 함수의 전체 소스코드를 반환합니다
＊Function() 생성자
- Function() 생성자를 통해서 함수를 정의할 수 있습니다. 여기서 정의란, 호출이고 생성입니다.
- 생성자를 사용한 정의 : var a = new Function('x', 'y', 'return x*y;');
- 키워드를 사용한 정의 : var a = function(x, y){ return x*y; }
- 함수리터럴과 같이, 익명 함수를 생성합니다.
- new Function()으로 생성된 함수 객체를 호출하면, eval()함수를 호출하는 것과 같다 (전역의 eval())
※ eval()는 편리함뒤에 따르는 보안등의 여러문제로 인해 사용하지 않는 것이 좋다. 따라서 new Function도 사용을 비추한다.
- 그 외의 전역변수& 지역변수
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<body>
<script>
//자바스크립트언어
//항상 맨위에 전역변수 선언
//항상 맨위에 함수 선언
//함수와 함수 주고받을때의 데이터전달은 : 매개변수, 전역변수
//무조건 현재의 함수내부는 지역변수
var i=10;
function f1(){
var j=20; //지역변수
document.write(j+"<br>");
k=30; //함수내부든, 외부든 var키워드 없이 선언된 변수는 전역변수
}
function f2(){
k=40;//전역변수 ==> this.k=40;로 작성함으로써, 구분할 수 있다.
var k=50;//지역변수
document.write(k+"<br>"); //전역,지역변수의 이름이 같을때 , this가 없으면, 지역변수가 우선이다.
}
//함수 호출(출력)
document.write(i+"<br>");
f1();
f2();
</script>
</body>
|
'WEB 기초 > Script' 카테고리의 다른 글
| 11. Date를 이용한 도서 반납 프로그램 (0) | 2018.04.12 |
|---|---|
| 10. 임의의 수를 찾는 프로그램 (0) | 2018.04.12 |
| 8. 구구단 구하기 (테이블 이용) (0) | 2018.04.12 |
| 7. 게시판 만들기 (테이블과 spilt이용) (0) | 2018.04.12 |
| 6. 배열 (0) | 2018.04.12 |