자바스크립트 강좌 8 - 함수

7. 자바스크립트 함수

1. 함수
 

1 - 1. 함수란 일단 한 번 정의되면 임의 횟수에 걸쳐서 호출되거나 실행될 수 있는 자바스크립트 코드 블록입니다.

1 - 2. 함수 정의 와 호출

1 - 3. 중첩된 함수 (자바스크립트에서 함수는 다른 함수 안에 중첩되어 정의될 수 있다. 

1 - 4. 함수 리터럴

1 - 5. 함수 이름 붙이기

1 - 6. 함수 전달인자

1 - 7. 생략 가능한 전달인자 / arguments

1 - 8. 데이터 / 메서드로서의 함수

1 - 9. 생성자 함수

1 - 10. 함수 프로퍼티와 메서드 (peorotype)

1 - 11. 나만의 함수 프로퍼티 생성하기

1 - 12. call(), apply() 메서드 

1 - 13. 함수 유효 범위와 클로저 





2. 예제 코드 

1. /*
2.  
3. 2. [1 - 2] 예제 코드
4.  
5. */
6.  
7. // 함수 정의
8.  
9. function fn(){
10.     return this;
11. }
12.  
13. // 호출 연산자('()')를 사용해 호출한다.
14.  
15. // 함수 호출
16.  
17. alert(fn()); // object
18.  
19.  
20. /*
21.  
22. 2. [1 - 3] 예제 코드
23.  
24. */
25.  
26. // 중첩함수
27.  
28. // 중첩함수란 곧 클로저 생성과도 깊은 연관이 있습니다.
29.  
30. function fn(){
31.  
32.     function fn(){
33.        
34.         return this;
35.     }
36.  
37.     return this;
38. }
39.  
40. alert(fn()); // object
41.  
42.  
43. /*
44.  
45. 2. [1 - 4] 예제 코드
46.  
47. */
48.  
49. var fn = function(){ return this; };
50.  
51. alert(fn()) // object
52.  
53.  
54. /*
55.  
56. 2. [1 - 6] 예제 코드
57.  
58. */
59.  
60. // 함수 매개변수는 아래와 같이 생략이 가능합니다.
61. // 생략된 매개변수는 정의 되지않은 값을 나타내는 'undefined'가 반환됩니다.
62. var fn = function(x, y){
63.  
64.     return y;
65. };
66.  
67.  
68. alert(fn(1, 2)); // 2
69. alert(fn(1)); // undefined
70.  
71.  
72. /*
73.  
74. 2. [1 - 7] 예제 코드
75.  
76. */
77.  
78. // 매개변수가 가변적이라면 아래와 같이 매개변수를 나타내는 객체인 arguments을 이용할 수 있습니다.
79. var fn = function(){
80.  
81.    
82.     return arguments[arguments.length - 1];
83. };
84.  
85.  
86. alert(fn(1, 2)); // 2
87. alert(fn(1)); // 1
88.  
89.  
90. /*
91.  
92. 2. [1 - 8] 예제 코드
93.  
94. */
95.  
96. var o = {
97.     fn: function(){
98.         return this;
99.     }
100. }
101.  
102. // 여기서 o.fn() 함수가 반환하는 this는 해당 호출객체인 o를 나타내며 즉, 반환값은 true가 나온다.
103. alert(o.fn() === o) // true
104.  
105.  
106. /*
107.  
108. 2. [1 - 9] 예제 코드
109.  
110. */
111.  
112.  
113. function fn(){
114.     return this;
115. }
116.  
117. // new 연산자와 생성자 함수를 통한 객체 생성시 fn은 생성자 함수로 객체의 클래스이며 동시에 생성자 함수로 부를 수 있습니다.
118. var o = new fn();
119.  
120.  
121. /*
122.  
123. 2. [1 - 10] 예제 코드
124.  
125. */
126.  
127. function fn(x){
128.     return this;
129. }
130.  
131.  
132. // 함수의 프로토타입 맴버 생성을 위한 프로퍼티이다.
133. alert(fn.prototype);
134.  
135.  
136. /*
137.  
138. 2. [1 - 11] 예제 코드
139.  
140. */
141.  
142. function fn(x){
143.     return this;
144. }
145.  
146.  
147. // 함수의 프로토타입 맴버를 생성합니다.
148. fn.prototype = {
149.     x: 'x'
150. };
151.  
152. alert(fn.prototype.x); // x
153.  
154.  
155. /*
156.  
157. 2. [1 - 12] 예제 코드
158.  
159. */
160.  
161. // call(), apply()
162.  
163. // 다른 어떤 객체의 메서드인 것처럼 호출할 수 있게 해주는 함수 입니다.
164. // 자바스크립트 패턴중 메서드 빌려쓰기 패턴에서 유용하게 쓰일수 있습니다.
165.  
166. var o = {
167.     x: null,
168.     fn: function(x){
169.        
170.         this.x = x;
171.  
172.         return this;
173.     }
174. }
175.  
176.  
177. var o1 = {
178. }
179.  
180. alert(o.fn.call(o1, 'x').x); // x
181.  
182. // apply() 메서드는 call() 메서드와는 달리 인자값을 배열로 전달합니다.
183.  
184. var o = {
185.     x: null,
186.     y: null,
187.     fn: function(x, y){
188.        
189.         this.x = x;
190.         this.y = y;
191.         return this;
192.     }
193. }
194.  
195.  
196. var o1 = {
197. }
198.  
199. alert(o.fn.apply(o1, ['x', 'y']).x); // x
200. alert(o.fn.apply(o1, ['x', 'y']).y); // y
201.  
202.  
203. /*
204.  
205. 2. [1 - 13] 예제 코드
206.  
207. */
208.  
209. // 함수 유효범위 및 클로저에 대한 내용은 간단히 다룰수 있는 내용이 아니므로 이전 포스트를 참고 하시기 바랍니다.

함수 유효범위 및 클로저 바로가기

참고서적: (자바스크립트 핵심 가이드)