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
|
---
title: Trailing commas
slug: Web/JavaScript/Reference/Trailing_commas
tags:
- Comma
- ECMAScript
- ECMAScript2017
- ECMAScript5
- JavaScript
- Language feature
- Syntax
- Trailing comma
- 구문
- 자바스크립트
- 콤마
- 트레일링 콤마
translation_of: Web/JavaScript/Reference/Trailing_commas
---
<div>{{JsSidebar("More")}}</div>
<p><strong>Trailing commas</strong> ("final commas"라고도 불립니다)는 새로운 엘리먼트나 매개변수, 속성을 JavaScript 코드에 추가할 때 유용합니다. 새로운 속성을 추가할 때, 마지막 줄에 trailing comma가 있다면 그 줄을 수정 없이 그대로 복사해 쓸 수 있습니다. 이외에도 버전 관리 이력이 간단해지고 코드 편집이 더 편해진다는 장점이 있습니다.</p>
<p>JavaScript는 초기부터 배열 리터럴에 trailing comma를 허용했으며, ECMAScript 5부터는 객체 리터럴, ECMAScript 2017부터는 함수의 매개변수에도 허용하기 시작했습니다.</p>
<p>그러나 {{Glossary("JSON")}}에서는 trailing comma를 허용하지 않습니다.</p>
<h2 id="리터럴에서의_trailing_comma">리터럴에서의 trailing comma</h2>
<h3 id="배열">배열</h3>
<p>JavaScript는 배열에 나타나는 trailing comma를 무시합니다.</p>
<pre class="brush: js notranslate">var arr = [
1,
2,
3,
];
arr; // [1, 2, 3]
arr.length; // 3</pre>
<p>trailing comma가 여러 개 있을 경우 빈 슬롯("구멍")이 생깁니다. 구멍이 있는 배열을 성기다(sparse)고 합니다(조밀한(dense) 배열에는 구멍이 없습니다). {{jsxref("Array.prototype.forEach()")}}나 {{jsxref("Array.prototype.map()")}}을 이용해 배열을 순회할 때는 빈 슬롯을 무시합니다.</p>
<pre class="brush: js notranslate">var arr = [1, 2, 3,,,];
arr.length; // 5
</pre>
<h3 id="객체">객체</h3>
<p>ECMAScript 5부터는 객체 리터럴에도 trailing comma를 사용할 수 있습니다.</p>
<pre class="brush: js notranslate">var object = {
foo: "bar",
baz: "qwerty",
age: 42,
};</pre>
<h2 id="함수에서의_trailing_comma">함수에서의 trailing comma</h2>
<p>ECMAScript 2017에서는 함수의 매개변수 목록에 trailing comma를 허용합니다.</p>
<h3 id="매개변수_정의">매개변수 정의</h3>
<p>아래의 두 함수 정의는 모두 유효하며, 서로 같습니다. Trailing comma는 함수 정의의 <code>length</code> 속성이나 <code>arguments</code> 객체에 영향을 주지 않습니다.</p>
<pre class="brush: js notranslate">function f(p) {}
function f(p,) {}
(p) => {};
(p,) => {};
</pre>
<p>Trailing comma는 클래스나 객체의 <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">메소드 정의</a>에도 사용할 수 있습니다.</p>
<pre class="brush: js notranslate">class C {
one(a,) {},
two(a, b,) {},
}
var obj = {
one(a,) {},
two(a, b,) {},
};
</pre>
<h3 id="함수_호출">함수 호출</h3>
<p>아래의 두 함수 호출은 모두 유효하며, 서로 같습니다.</p>
<pre class="brush: js notranslate">f(p);
f(p,);
Math.max(10, 20);
Math.max(10, 20,);
</pre>
<h3 id="잘못된_trailing_comma">잘못된 trailing comma</h3>
<p>함수의 매개변수 정의나 호출에 쉼표만 있을 경우 {{Jsxref("SyntaxError")}}가 발생합니다. 또한, <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest 매개변수</a>를 사용할 때는 trailing comma를 사용할 수 없습니다.</p>
<pre class="brush: js example-bad notranslate">function f(,) {} // SyntaxError: missing formal parameter
(,) => {}; // SyntaxError: expected expression, got ','
f(,) // SyntaxError: expected expression, got ','
function f(...p,) {} // SyntaxError: parameter after rest parameter
(...p,) => {} // SyntaxError: expected closing parenthesis, got ','
</pre>
<h2 id="구조_분해_할당에서의_trailing_comma">구조 분해 할당에서의 trailing comma</h2>
<p><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">구조 분해 할당</a>의 좌변에도 trailing comma를 사용할 수 있습니다.</p>
<pre class="brush: js notranslate">// Trailing comma가 있는 배열 구조 분해
[a, b,] = [1, 2];
// Trailing comma가 있는 객체 구조 분해
var o = {
p: 42,
q: true,
};
var {p, q,} = o;
</pre>
<p>Rest 원소가 있을 경우 역시 {{jsxref("SyntaxError")}}가 발생합니다.</p>
<pre class="brush: js example-bad notranslate">var [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma</pre>
<h2 id="JSON에서의_trailing_comma">JSON에서의 trailing comma</h2>
<p>객체 안에서의 trailing comma는 ECMAScript 5에 와서야 추가되었습니다. JSON은 ES5 이전의 JavaScript 문법을 기초로 하므로 <strong>JSON에서는 trailing comma를 사용할 수 없습니다</strong>.</p>
<p>아래의 두 줄 모두 <code>SyntaxError</code>를 발생합니다.</p>
<pre class="brush: js example-bad notranslate">JSON.parse('[1, 2, 3, 4, ]');
JSON.parse('{"foo" : 1, }');
// SyntaxError JSON.parse: unexpected character
// at line 1 column 14 of the JSON data
</pre>
<p>JSON을 올바르게 파싱하려면 trailing comma를 제거해야 합니다.</p>
<pre class="brush: js example-good notranslate">JSON.parse('[1, 2, 3, 4 ]');
JSON.parse('{"foo" : 1 }');</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('ES5.1')}}</td>
<td>{{Spec2('ES5.1')}}</td>
<td>객체 리터럴 trailing comma 추가</td>
</tr>
<tr>
<td>{{SpecName('ES6')}}</td>
<td>{{Spec2('ES6')}}</td>
<td>변화 없음</td>
</tr>
<tr>
<td>{{SpecName('ESDraft')}}</td>
<td>{{Spec2('ESDraft')}}</td>
<td>ES2017에서 함수 trailing comma 추가</td>
</tr>
</tbody>
</table>
<h2 id="브라우저_호환성">브라우저 호환성</h2>
<div>
<p>{{Compat("javascript.grammar.trailing_commas")}}</p>
</div>
<h2 id="같이_보기">같이 보기</h2>
<ul>
<li>Initial ECMAScript proposal: <a href="https://github.com/tc39/proposal-trailing-function-commas">trailing function commas</a> by Jeff Morrison</li>
</ul>
|
