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
|
---
title: 함수 표현식
slug: Web/JavaScript/Reference/Operators/function
tags:
- Function
- JavaScript
- Operator
- Primary Expressions
translation_of: Web/JavaScript/Reference/Operators/function
---
<div>{{jsSidebar("Operators")}}</div>
<p><strong><code>function</code></strong> 키워드는 어떤 표현식(expression) 내에서 함수를 정의하는 데 사용될 수 있습니다.</p>
<p>또한 <a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a> 생성자와 <a href="/ko/docs/Web/JavaScript/Reference/Statements/function">함수 선언(function declaration)</a>을 이용해 함수를 정의할 수도 있습니다. </p>
<div>{{EmbedInteractiveExample("pages/js/expressions-functionexpression.html")}}</div>
<h2 id="구문">구문</h2>
<pre class="syntaxbox">var myFunction = function [<em>name</em>]([<em>param1</em>[, <em>param2[</em>, ..., <em>paramN</em>]]]) { <em>statements </em>};</pre>
<p><a href="/ko/docs/">ES2015</a>에서 <a href="/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98">화살표 함수(arrow functions)</a>를 사용할 수도 있습니다.</p>
<h3 id="매개변수">매개변수</h3>
<dl>
<dt><code>name</code></dt>
<dd>함수 이름. 함수가 이름 없는(anonymous) 함수인 경우, 생략될 수 있음. 이 함수 이름은 함수의 몸통 내에서만 사용할 수 있습니다.</dd>
<dt><code>paramN</code></dt>
<dd>함수로 전달되는 인수(argument) 의 이름.</dd>
<dt><code>statements</code></dt>
<dd>함수 몸통을 구성하는 문(statement).</dd>
</dl>
<h2 id="설명">설명</h2>
<p>함수 표현식(function expression)은 function 문과 매우 비슷하고 구문(syntax)이 거의 같습니다 (자세한 사항은 <a href="/ko/docs/Web/JavaScript/Reference/Statements/function">function 문</a> 참조). 함수 표현식과 function 문 사이의 주요 차이점은 함수 이름으로, 함수 표현식으로 <em>익명</em> 함수를 만들 경우 이 이름을 생략할 수 있습니다. 함수 표현식은 정의하자마자 실행되는 <a href="https://developer.mozilla.org/en-US/docs/Glossary/IIFE">IIFE (즉시 호출되는 함수 표현식)</a>로 사용될 수 있습니다. 더 자세한 정보는 <a href="/ko/docs/Web/JavaScript/Reference/Functions">함수</a> 장 참조.</p>
<h3 id="Function_expression_끌어올리기">Function expression 끌어올리기</h3>
<p>자바스크립트에서 함수 표현식은 {{jsxref("Statements/function", "함수 선언", "#Function_declaration_hoisting")}}과는 달리 끌어올려지지 않습니다. 함수 표현식을 정의하기 전에는 사용할 수 없습니다.</p>
<pre><code>console.log(notHoisted) // undefined
//even the variable name is hoisted, the definition wasn't. so it's undefined.
notHoisted(); // TypeError: notHoisted is not a function
var notHoisted = function() {
console.log('bar');
};</code></pre>
<h3 id="유명(named)_함수_표현식">유명(named) 함수 표현식</h3>
<p>함수 몸통 안 쪽에서 현재 함수를 참고하고 싶다면, 유명 함수를 생성해야 합니다. <u><strong>이 함수 이름은 함수의 몸통(범위) 안에서만 사용할 수 있습니다</strong></u>. 이로써 비표준 <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments/callee">arguments.callee</a></code> 속성을 사용하는 것을 피할 수도 있습니다.</p>
<pre><code>var math = {
'factit': function factorial(n) {
console.log(n)
if (n <= 1)
return 1;
return n * factorial(n - 1);
}
};
math.factit(3) //3;2;1;</code>
</pre>
<p>함수가 할당된 변수는 <code>name</code> 속성을 가지게됩니다. 다른 변수에 할당되더라도 그 name 속성의 값은 변하지 않습니다. 함수의 이름이 생략되었다면, name 속성의 값은 그 변수의 이름(암묵적 이름)이 될 것입니다. 함수의 이름이 있다면 name 속성의 값은 그 함수의 이름(명시적 이름)이 될 것입니다. 이는 <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">화살표 함수(arrow functions)</a>에도 적용됩니다 (화살표 함수는 이름을 가지지 않으므로 해당 변수에 암묵적인 이름만 줄 수 있습니다).</p>
<pre><code>var foo = function() {}
foo.name // "foo"
var foo2 = foo
foo2.name // "foo"
var bar = function baz() {}
bar.name // "baz"
console.log(foo === foo2); // true
console.log(typeof baz); // undefined
console.log(bar === baz); // false (errors because baz == undefined)</code>
</pre>
<p> </p>
<h2 id="Examples">Examples</h2>
<p>다음 예제는 이름 없는 함수를 정의하고 그 함수를 <code>x</code>에 할당합니다. 함수는 인수의 제곱을 반환합니다:</p>
<pre><code>var x = function(y) {
return y * y;
};</code></pre>
<p><a href="https://developer.mozilla.org/ko/docs/Glossary/Callback_function">callback</a>으로 더 자주 사용됩니다:</p>
<pre><code>button.addEventListener('click', function(event) {
console.log('button is clicked!')
})</code></pre>
<p> </p>
<p> </p>
<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>초기 정의. JavaScript 1.5에서 구현됨.</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<p>{{Compat("javascript.operators.function")}}</p>
<h2 id="참조">참조</h2>
<ul>
<li>{{jsxref("Arrow_functions", "Arrow functions")}}</li>
<li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li>
<li>{{jsxref("Function")}}</li>
<li>{{jsxref("Statements/function", "function statement")}}</li>
<li>{{jsxref("Statements/function*", "function* statement")}}</li>
<li>{{jsxref("Operators/function*", "function* expression")}}</li>
<li>{{jsxref("GeneratorFunction")}}</li>
<li>{{jsxref("Statements/async_function", "async function")}}</li>
<li>{{jsxref("Operators/async_function", "async function expression")}}</li>
</ul>
|
