blob: b7afe67563441891111aa1e5bb70c49952ec0dd8 (
plain)
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
|
---
title: 'SyntaxError: function statement requires a name'
slug: Web/JavaScript/Reference/Errors/Unnamed_function_statement
tags:
- IIEF
- 객체 메소드
- 구문 에러
- 자바스크립트
- 콜백 함수
- 함수 이름
translation_of: Web/JavaScript/Reference/Errors/Unnamed_function_statement
---
<div>{{jsSidebar("Errors")}}</div>
<h2 id="메세지">메세지</h2>
<pre class="syntaxbox">Syntax Error: Expected identifier (Edge)
SyntaxError: function statement requires a name [Firefox]
SyntaxError: Unexpected token ( [Chrome]
</pre>
<h2 id="에러_타입">에러 타입</h2>
<p>{{jsxref("SyntaxError")}}</p>
<h2 id="무엇이_잘못되었을까">무엇이 잘못되었을까?</h2>
<p><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/function">함수 구문</a>(Function statement)은 이름이 필수입니다. 함수가 정의된 방법에 따라 함수의 이름을 짓거나 함수 표현식(Function expression) {{Glossary("IIFE")}}으로 작성하거나, 함수가 맥락에 맞게 제대로 작성되었는지 확인해야 합니다.</p>
<h2 id="예제">예제</h2>
<h3 id="구문_vs_표현식">구문 vs 표현식</h3>
<p><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/function">함수 구문</a>(또는 함수 선언)은 이름이 필요하므로 아래 예제는 동작하지 않습니다:</p>
<pre class="brush: js example-bad">function () {
return 'Hello world';
}
// SyntaxError: function statement requires a name
</pre>
<p>대신 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/function">함수 표현식</a>을 사용할 수 있습니다:</p>
<pre class="brush: js example-good">var greet = function() {
return 'Hello world';
};</pre>
<p>또는, 선언하자마자 바로 실행되는 <a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression">IIFE</a> (Immediately Invoked Function Expression)를 사용할 수 있습니다. 이 경우 몇 개의 괄호가 더 필요합니다:</p>
<pre class="brush: js example-good">(function () {
})();</pre>
<h3 id="레이블을_붙인_함수">레이블을 붙인 함수</h3>
<p>만약 함수 <a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/label">레이블</a>을 사용하는 경우 <code>function</code> 키워드 뒤에 함수 이름이 필요하므로 아래 예제는 동작하지 않습니다:</p>
<pre class="brush: js example-bad">function Greeter() {
german: function () {
return "Moin";
}
}
// SyntaxError: function statement requires a name
</pre>
<p>아래 예제는 동작합니다:</p>
<pre class="brush: js example-good">function Greeter() {
german: function g() {
return "Moin";
}
}</pre>
<h3 id="객체_메소드">객체 메소드</h3>
<p>만약 객체 메소드를 만드는 경우 먼저 객체를 만들어야 합니다. 객체 메소드의 경우 아래 예제와 같이 <code>function</code> 키워드 뒤에 이름이 없어도 정상적으로 동작합니다.</p>
<pre class="brush: js example-good">var greeter = {
german: function () {
return "Moin";
}
};</pre>
<h3 id="콜백_구문">콜백 구문</h3>
<p>콜백을 사용하는 경우 구문을 확인해야 합니다. 괄호와 쉼표는 구문을 어렵게 만듭니다.</p>
<pre class="brush: js example-bad">promise.then(
function() {
console.log("success");
});
function() {
console.log("error");
}
// SyntaxError: function statement requires a name
</pre>
<p>올바르게 변경하면:</p>
<pre class="brush: json example-good">promise.then(
function() {
console.log("success");
},
function() {
console.log("error");
}
);
</pre>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/%ED%95%A8%EC%88%98">함수</a></li>
<li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/function">함수 구문</a></li>
<li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/function">함수 표현식</a></li>
<li><a href="https://en.wikipedia.org/wiki/Immediately-invoked_function_expression">IIFE</a></li>
<li><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/label">레이블</a></li>
</ul>
|
