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
|
---
title: 함수 선언
slug: Web/JavaScript/Reference/Statements/function
tags:
- Function
- JavaScript
- Reference
- Statement
translation_of: Web/JavaScript/Reference/Statements/function
---
<div>{{jsSidebar("Statements")}}</div>
<p><strong>함수 선언(function declaration)</strong>은 지정된 매개변수(parameter)를 갖는 함수를 정의합니다.</p>
<p>{{jsxref("Function")}} 생성자나 {{jsxref("Operators/function", "함수 표현식(function expression)")}}을 사용해서 정의할 수도 있습니다.</p>
<div>{{EmbedInteractiveExample("pages/js/statement-function.html")}}</div>
<h2 id="구문">구문</h2>
<pre class="syntaxbox">function <em>name</em>([<em>param</em>[, <em>param</em>,[..., <em>param</em>]]]) { [<em>statements</em>] }
</pre>
<dl>
<dt><code>name</code></dt>
<dd>함수 이름.</dd>
</dl>
<dl>
<dt><code>param</code></dt>
<dd>함수로 전달되는 인수(argument)의 이름. 인수의 최대 개수는 엔진마다 다름.</dd>
</dl>
<dl>
<dt><code>statements</code></dt>
<dd>함수의 몸통(body)을 구성하는 문(statement).</dd>
</dl>
<h2 id="설명">설명</h2>
<p>함수 선언으로 생성된 함수는 <code>Function</code> 객체로, <code>Function</code> 객체의 모든 속성(property), 메서드 및 행위 특성(behavior)을 갖습니다. 함수에 관한 더 자세한 정보는 {{jsxref("Function")}} 참조하시기 바랍니다.</p>
<p>함수는 또한 표현식({{jsxref("Operators/function", "함수 표현식")}} 참조)을 사용하여 생성될 수 있습니다.</p>
<p>기본적으로 함수는 <code>undefined</code>를 반환합니다. 다른 값을 반환하기 위해서는, 함수는 반환값을 지정하는 {{jsxref("Statements/return", "return")}} 문이 있어야 합니다.</p>
<h3 id="조건부로_생성되는_함수">조건부로 생성되는 함수</h3>
<p>함수는 조건부로 선언될 수 있습니다. 즉, function 문은 <code>if</code> 문 안에 들어갈 수 있습니다. 하지만, 구현에 따라 결과에 일관성이 없으므로 이 패턴은 실제 코드에서는 사용해선 안됩니다. 조건부로 함수를 생성하고자 한다면, 함수 표현식(function expression)을 대신 사용하세요.</p>
<pre class="brush: js">var hoisted = "foo" in this;
console.log(`'foo' name ${hoisted ? "is" : "is not"} hoisted. typeof foo is ${typeof foo}`);
if (false) {
function foo(){ return 1; }
}
// In Chrome:
// 'foo' name is hoisted. typeof foo is undefined
//
// In Firefox:
// 'foo' name is hoisted. typeof foo is undefined
//
// In Edge:
// 'foo' name is not hoisted. typeof foo is undefined
//
// In Safari:
// 'foo' name is hoisted. typeof foo is function
</pre>
<p>결과는 참으로 평가되는 조건과 정확하게 일치합니다.</p>
<pre class="brush: js">var hoisted = "foo" in this;
console.log(`'foo' name ${hoisted ? "is" : "is not"} hoisted. typeof foo is ${typeof foo}`);
if (true) {
function foo(){ return 1; }
}
// In Chrome:
// 'foo' name is hoisted. typeof foo is undefined
//
// In Firefox:
// 'foo' name is hoisted. typeof foo is undefined
//
// In Edge:
// 'foo' name is not hoisted. typeof foo is undefined
//
// In Safari:
// 'foo' name is hoisted. typeof foo is function
</pre>
<h3 id="함수_선언_끌어올리기">함수 선언 끌어올리기</h3>
<p>자바스크립트에서 함수 선언은 그 선언을 둘러싼 함수의 최상부나 전역 범위(global scope)로 끌어올려집니다.</p>
<pre class="brush: js">hoisted(); // logs "foo"
function hoisted() {
console.log("foo");
}
</pre>
<p>{{jsxref("Operators/function", "함수 표현식")}}은 끌어올려지지 않으므로 주의하세요:</p>
<pre class="brush: js">notHoisted(); // TypeError: notHoisted is not a function
var notHoisted = function() {
console.log("bar");
};
</pre>
<h2 id="예제">예제</h2>
<h3 id="function_사용하기"><code>function</code> 사용하기</h3>
<p>다음 코드는 제품 <code>a</code>, <code>b</code> 및 <code>c</code>의 단위 판매량이 주어졌을 때, 총 판매량을 반환하는 함수를 선언합니다.</p>
<pre class="brush: js">function calc_sales(units_a, units_b, units_c) {
return units_a*79 + units_b * 129 + units_c * 699;
}
</pre>
<h2 id="명세">명세</h2>
<table class="standard-table">
<tbody>
<tr>
<th scope="col">명세</th>
<th scope="col">상태</th>
<th scope="col">설명</th>
</tr>
<tr>
<td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td>
<td>{{Spec2('ES6')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES5.1', '#sec-13', 'Function definition')}}</td>
<td>{{Spec2('ES5.1')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES3', '#sec-13', 'Function definition')}}</td>
<td>{{Spec2('ES3')}}</td>
<td> </td>
</tr>
<tr>
<td>{{SpecName('ES1', '#sec-13', 'Function definition')}}</td>
<td>{{Spec2('ES1')}}</td>
<td>초기 정의. JavaScript 1.0에서 구현됨.</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("javascript.statements.function")}}</p>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>{{jsxref("Functions", "함수 및 함수 범위")}}</li>
<li>{{jsxref("Function")}}</li>
<li>{{jsxref("Operators/function", "함수 표현식")}}</li>
<li>{{jsxref("Statements/function*", "function* 문")}}</li>
<li>{{jsxref("Operators/function*", "function* 식")}}</li>
<li>{{jsxref("Functions/Arrow_functions", "화살표 함수")}}</li>
<li>{{jsxref("GeneratorFunction")}}</li>
</ul>
|
