<최종 화면> 함수 선언 및 호출하고 매개변수,리턴도 해본다. 지역,전역 변수의 차이를 알아보고,
함수의 매개변수를 저장해주는 내장 배열 변수 및 클로저 변수에 대해서도 사용해 본다.
우선 간단하게 함수를 선언하고 호출을 해보자.
함수 호출을 먼저하고 선언을 나중에 해도 오류가 안난다.
다른 스크립트에서 사용을 해도 동작이 된다.
위 상황가 같이 다른 스크립트 안에서 호출을 한다.
(차이점 : 스크립트가 나눠져서 호출될 시, 함수선언 부분이 위에 있어야함. 호출보다 아래면 동작안한다!!!)
body요소 안에서 함수 호출하면 잘 된다. doby는 head보다 뒤에 실행되기 때문에
아까와 비슷한 상황이다 스크립트가 나눠져 있을시
호출을 먼저하고 아래에 선언을하면 동작을 안한다.
우선 함수의 파라미터 전달을 알아보기 전에 head 안에 새로운 스크립트를 만들자.
함수를 선언하고 파라미터에 임의 변수를 사용하면 된다. 이때 var 키워드는 안써도 된다.
파라미터 a의 자료형은 어떤 자료형이든 받을 수 있다.
eee라는 함수는 파라미터 한개의 값을 받는 함수이다. 그러나 값을 전달하지 않으면 어떻게 될까?
a에는 아무 값도 들어가지 않게되어 undefined라는 값이 들어간다. (에러 안남.)
fff라는 두개의 파라미터를 받는 함수를 선언하자.
받은 파라미터를 이용해서 연산하고 출력도 된다. (다른 언어에서 처럼)
만약 두개의 파라미터를 전달하지 않고, 하나만 전달한다면?
만약에 똑같은 함수를 선언한다면 어떻게 될까? (다른 언어에서는 오류남)
자바스크립트에는 함수 오버로딩이 존재할까? ( 오버로딩 : 함수 이름은 같고, 파라미터만 다른 함수)
존재하지 않는다. 그냥 마지막에 선언된 함수가 호출된다.
다른 언어에서는 함수에서 리턴을 할 시, 반환형 자료형을 함수명 앞에 쓰지만 자바스크립트는 다르다.
반환 자료형도 안쓰고, 그냥 리턴을 할 수 있다.
다양한 자료형이 리턴될 수 있다. 그리고 함수도 리턴 가능하다.
객체 리턴도 가능하며, 변수로 받아서 활용 가능하다.
지역 변수와 전역 변수의 차이를 알아보자.
밖에서 선언된 변수는 함수 안에서 사용 가능하다.
만약 밖과 안에 같은 이름의 변수가 있다면? 사용되는 변수는 좁은 범위의 지역변수를 사용한다.
a라는 변수는 밖, 함수 안에 2개가 있고 출력하는 문은 함수안에, 밖에 총 2개가 있다 어떻게 출력될까?
111줄에 a는 20 , 114줄에 a는 10이 출력된다.
만약 밖에 있던 a를 주석처리하고 함수 밖에서 a를 사용하면 error가 난다. 하지만 따로 알려주는 창이 없고..
에러 난 줄부터 </script>끝날때까지의 내용들이 실행이 안된다.
var 키워드를 사용하지 않고 변수를 사용한다면 이것이 전역변수이다.
그리고 자바스크립트는 지역변수에 대한 범위가 다르다. 다른 언어에서는 {} 안에 있는 변수를 지역변수라 하지만..
JS에서는 함수 단위이다.
JS에서 함수를 선언할때 function 함수명() {}으로 사용하지만, 함수명을 안쓰고 사용 가능하다. (익명함수)
그러나 주의할 점이 있다. 익명 함수를 사용할때, 함수명을 대체하는 변수로 사용을 하는데
변수 선언과 동시에 함수를 참조?하므로 변수 선언 전에 함수를 참조하는 변수를 사용하면 에러이다.
함수를 파라미터 갑 또는 리턴 값으로 사용 가능하다.
kkk(); 를 쓰면 함수를 호출하는 것인데, 괄호 안에 바로 익명 함수를 넣어도 가능하다.
함수를 리턴하여 호출해보자.
ttt(); 함수를 호출하면 ttt는 결국 hhh()함수이므로 hhh함수 내용이 실행된다.
hhh() 함수에는 ppp변수명으로 사용 사능한 익명 함수가 있고 리턴으로 ppp(내용은 익명함수)를 리턴했다.
결국 181줄에 ttt(); 는 ppp(); 와 같은 의미이다.
배열에 대해서 알아보자. 함수에는 매개변수를 담는 배열변수가 존재한다. (선언을 따로 안해도 존재함.)
arguments에 매개변수 값이 저장되어 있는 것을 확인해 보자.
add(); 에서는 매개변수 값이 없고
add(10); 에서는 arguments[0]에 10이 저장될 것이다.
add(10, 20); 에서는 arguments[0]에 10이 arguments[1]에 20이 저장될 것이다.
클로저 변수라는 것을 알아보자. 간단히 말하면 지역 변수를 메모리에서 없애지 않고 사용 가능하게 해준다.
<복붙용 코드>
|
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
|
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>function test</title>
<script>
// 함수 선언 및 호출 [선언적 함수라고 부름]
function aaa(){
document.write('aaa<br>');
}
aaa(); // JS에서 함수 호출
// 대부분의 작업은 html 요소에서 특정이벤트에 따라 호출
// 하는 것이 일반적임 (ex. button onclick 속성으로..)
// 특이한 점은 함수 선언하는 위치가 호출하는 위치보다
// 나중에 있어도 됨. 즉, 호출 순서에 영향이 별로 없음
bbb(); //호출문 먼저
function bbb(){
document.write('bbb<br>');
}
// 같은 스크립트 안에서는 순서 상관 없음.
// 다시말해 다른 스크립트에서는 순서를 맞추어야 함.
ccc(); // 저 아래 script에 선언된 함수 호출 // 동작 안함!!
ddd(); //body 요소안에서 선언된 함수는 호출 불가!!
</script>
<script>
bbb(); //다른 스크립트에 선언된 함수 호출가능! [위에 선언되어 있으므로..]
function ccc(){
document.write('ccc<br>');
}
</script>
<!-- 파라미터 전달 -->
<script>
document.write('<hr>');
document.write('<h4>Parameter</h4>');
//인수를 받는 파라미터는 var키워드를 사용하지 않음 -error
function eee(a){
document.write(a+"<br>");
}
eee(10);
eee("kim");
eee(new Date());
// 만약 파라미터를 전달하지 않으면??
eee();
function fff(a,b){
document.write(a+",");
document.write(b+"<br>");
var c=a+b;
document.write('결과 : '+c+'<br>');
}
fff(5,3);
fff(5); //NaN - b값이 undefined 이기에..
// 같은 함수를 또 선언하면?? - 마지막에 선언된 함수로 대체됨
function eee(a){
document.write('새로 선언한 함수 eee');
}
// 함수의 오버로딩은??? [함수명은 같고, 파라미터가 다른]
// 오버로딩이라는 개념이 존재하지 않고 함수명이 같으므로 위처럼 새로운 함수로 대체된 것임
function eee(a,b){
document.write('함수 오버로딩!!!<br>');
}
</script>
<!-- 리턴과 기타 내용 -->
<script>
document.write('<hr>');
document.write('<h4>return & etc</h4>');
function ggg(){
// return 10;
// return "aaa";
// return true;
// return 5>2;
return new Date();
}
var g=ggg();
document.write(g+'<br>');
// 객체의 리턴도 수월함(당연히 배열도)
function hhh(){
return {name:"sam", age:20};
}
var p= hhh();
document.write(p.name + " , "+ p.age+"<br>");
</script>
<!-- 지역 변수와 전역 변수 -->
<script>
document.write('<hr>');
document.write('<h4>Local Vs Global variable</h4>');
// var a= 10; //전역변수
function mmm(){
//var a=20; //지역변수
a=30; //var 키워드 없이 변수를 만들면 전역 변수!!
document.write("mmm : "+a+"<br>");
}
mmm(); //함수 호출
document.write("a : " + a +"<br>"); //전역변수가 없으면 error
// 지역변수에 대한 범위가 다른 언어와 다름
// JS의 지역변수는 변수가 선언된 {}(블럭)지역이 아니라 함수 단위임!!!
for(var i=0; i<5; i++){
document.write(i + " , ");
}
document.write('<br>');
document.write("i : "+ i + "<br>");
</script>
<!-- 익명함수 : 자바의 익명객체와 비슷한 역할 -->
<script>
document.write('<hr>');
document.write('<h4>Anonymous function 익명 함수</h4>');
// 익명 함수는 변수에 대입하여 사용하므로..
// 결국 변수를 사용한다는 것임.
// 즉, 변수가 만들어지기 전에 사용은 불가!! -error
//show(); //ERROR
// 함수의 이름이 없는 함수(익명함수)
// 익명 함수를 show라는 변수에 대입
var show = function(){
document.write('show!!<br>');
}
// 익명함수를 가진 show 변수가 함수 이름이 됨!!
show();
// 익명함수는 이벤트처리용 함수로 선호됨!![하이브리드 앱 개발에 많이 애용]
// 그 이유는 추후 객체 수업때...
</script>
<!-- 함수를 다른 함수의 매개변수 or 리턴타입으로 사용하기 -->
<script>
document.write('<hr>');
document.write('<h4>function 매개변수 전달</h4>');
function kkk(gg){
// 전달받은 함수를 함수로서 사용해보기
gg();
}
// 익명함수를 만들고 변수에 참조
var sss= function(){
document.write('sss function!! <br>');
}
// 익명함수를 매개변수로 전달!
kkk(sss);
//sss라는 변스없이 곧바로 익명함수를 넣을 수도 있음.
// 마치 android에서 리스너객체 사용하는 것과 비슷함.
kkk(function(){
document.write('Hello world<br>');
});
// 당연히 리턴도 가능함
function hhh(){
var ppp= function(){
document.write('ppp function!!<br>');
}
return ppp; //함수를 리턴
}
var ttt=hhh();
ttt();
// // 심지어 이런 표기법도 허용함
// hhh()(); //결국 ppp가 실행됨! 선호하지는 않음
</script>
<!-- arguments 배열 -->
<script>
document.write('<hr>');
document.write('<h4>arguments 배열객체</h4>');
// arguments 배열 : 함수의 매개변수를 자동으로 저장해주는 내장 배열변수
function add(){
// arguments라는 배열 변수는 만든적은 없지만 기본적으로 존재하고 있으며.. 자동으로 파라미터들을 요소로 가지고 있음.
document.write(arguments.length+"<br>"); //전달된 파라미터 개수
for(var i=0; i<arguments.length;i++){
document.write(arguments[i]+" , ");
}
document.write('<br>');
}
add();
add(10);
add(10, 20);
</script>
<!-- 클로저(Closer) -->
<!-- 클로저는 독립적인 (자유) 변수를 가리키는 함수임. -->
<!-- 흔히 함수 내에서 함수를 정의하면 클로저라고 함.[이너클래스 같은 모습] -->
<script>
document.write('<hr>');
document.write('<h4>Closer</h4>');
// 함수를 종료된 후에도 내부함수에 의해 지역변수가 남아 있는 상황
function outter(){
var cnt=0;
function inner(){
// cnt는 지역변수이므로 원래는 함수가 outter가 종료되면 없어져야 할 변수지만!!
// 다른 함수 즉, inner에서 이 지역변수 cnt를 사용하게 되면 메모리에 존속시켜주는 특징이 생김
// 이를 클로저 변수라고 부름
cnt++;
document.write('클로저변수 :'+ cnt + "<br>");
}
return inner;
}
var jj= outter(); //결국 jj변수는 리턴된 inner()함수를 참조
jj();//inner함수 호출할 수 있음.
jj();
jj();
</script>
</head>
<body>
<hr>
<h2>Body Region</h2>
<!-- body요소는 head요소의 함수를 언제나 호출할 수 있음. -->
<script>
aaa(); // 호출 가능 !
function ddd(){
document.write('ddd<br>');
}
</script>
</body>
</html>
|
'안드로이드 웹앱 콘테츠 개발자 양성(국비지원) > HTML+Java script' 카테고리의 다른 글
| HTML + Java script (기초) 프로토타입 (전역 변수,함수 처럼.. 상속처럼) (0) | 2019.12.13 |
|---|---|
| HTML+Java script (기초) 객체 사용방법 (0) | 2019.12.12 |
| HTML+ Java script (기초) dialog (0) | 2019.12.11 |
| HTML+Java script (기초) 배열 (0) | 2019.12.11 |
| HTML+Java script (기초) HTML요소와 속성을 JS객체,멤버변수처럼 사용 (0) | 2019.12.11 |
댓글