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
|
---
title: Кінцеві коми
slug: Web/JavaScript/Reference/Trailing_commas
tags:
- ECMAScript2017
- ECMAScript5
- JavaScript
- Синтаксис
- кома
- кінцева кома
translation_of: Web/JavaScript/Reference/Trailing_commas
---
<div>{{JsSidebar("More")}}</div>
<p><strong>Кінцеві коми</strong> (іноді їх називають "заключними комами") можуть бути корисними для додавання нових елементів, параметрів чи властивостей у коді JavaScript. Якщо ви хочете додати нову властивість, ви можете просто додати новий рядок, не змінюючи перед цим попередній рядок, якщо цей рядок вже використовує кінцеву кому. Це робить контроль версій зрозумілішим, а редагування коду може бути менш проблемним.</p>
<p>Кінцеві коми були дозволені у масивних літералах JavaScript з самого початку, а пізніше вони були додані до об'єктних літералів (ECMAScript 5) та нещодавно (ECMAScript 2017) до параметрів функцій.</p>
<p><a href="/uk/docs/Glossary/JSON">JSON</a>, однак, не дозволяє кінцеві коми.</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox notranslate">,</pre>
<h2 id="Приклади">Приклади</h2>
<h3 id="Кінцеві_коми_у_літералах">Кінцеві коми у літералах</h3>
<h4 id="Масиви">Масиви</h4>
<p>JavaScript ігнорує кінцеві коми у масивах:</p>
<pre class="brush: js notranslate">var arr = [
1,
2,
3,
];
arr; // [1, 2, 3]
arr.length; // 3</pre>
<p>Якщо використовується більше однієї кінцевої коми, утворюється пропуск (або діра). Масив з дірами називається <em>розрідженим</em> (<em>щільний</em> масив не має дір). Під час перебору масивів, наприклад, за допомогою {{jsxref("Array.prototype.forEach()")}} або {{jsxref("Array.prototype.map()")}}, діри в масивах пропускаються.</p>
<pre class="brush: js notranslate">var arr = [1, 2, 3,,,];
arr.length; // 5
</pre>
<h4 id="Обєкти">Об'єкти</h4>
<p>Починаючи з ECMAScript 5, кінцеві коми у об'єктних літералах також дозволені:</p>
<pre class="brush: js notranslate">var object = {
foo: "bar",
baz: "qwerty",
age: 42,
};</pre>
<h3 id="Кінцеві_коми_у_функціях">Кінцеві коми у функціях</h3>
<p>ECMAScript 2017 дозволяє кінцеві коми у списку параметрів функцій.</p>
<h4 id="Визначення_параметрів">Визначення параметрів</h4>
<p>Наступні пари визначень функцій є дозволеними та еквівалентні одне одному. Кінцеві коми не впливають на властивість <code>length</code> оголошень функцій або на їхній об'єкт <code>arguments</code>.</p>
<pre class="brush: js notranslate">function f(p) {}
function f(p,) {}
(p) => {};
(p,) => {};
</pre>
<p>Кінцеві коми також працюють у <a href="/uk/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>
<h4 id="Виклики_функцій">Виклики функцій</h4>
<p>Наступні пари викликів функцій є дозволеними та еквівалентні один одному.</p>
<pre class="brush: js notranslate">f(p);
f(p,);
Math.max(10, 20);
Math.max(10, 20,);
</pre>
<h4 id="Недозволені_кінцеві_коми">Недозволені кінцеві коми</h4>
<p>Визначення параметрів функцій або виклики функцій, які містять лише кому, викинуть {{Jsxref("SyntaxError")}}. Крім того, при використанні <a href="/uk/docs/Web/JavaScript/Reference/Functions/решта_параметрів">залишкових параметрів</a> кінцеві коми недозволені:</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>
<h3 id="Кінцеві_коми_у_деструктуризації">Кінцеві коми у деструктуризації</h3>
<p>Кінцеві коми також дозволені по ліву сторону при використанні <a href="/uk/docs/Web/JavaScript/Reference/Operators/Деструктуризація">деструктуризаційного присвоєння</a>:</p>
<pre class="brush: js notranslate">// деструктуризація масиву з кінцевою комою
[a, b,] = [1, 2];
// деструктуризація об'єкта з кінцевою комою
var o = {
p: 42,
q: true,
};
var {p, q,} = o;
</pre>
<p>Знову ж таки, при використання залишкового елемента, буде викинуто {{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>
<h3 id="Кінцеві_коми_у_JSON">Кінцеві коми у JSON</h3>
<p>Кінцеві коми у об'єктах були введені лише починаючи з ECMAScript 5. Оскільки JSON базується на синтаксисі JavaScript, що існував до ES5, <strong>кінцеві коми не дозволені у JSON</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 коректно:</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>
</tr>
<tr>
<td>{{SpecName('ESDraft')}}</td>
</tr>
</tbody>
</table>
<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>
<div>
<p>{{Compat("javascript.grammar.trailing_commas")}}</p>
</div>
<h2 id="Див._також">Див. також</h2>
<ul>
<li>Початкова пропозиція ECMAScript: <a href="https://github.com/tc39/proposal-trailing-function-commas">кінцеві коми у функції</a>, автор Jeff Morrison</li>
</ul>
|
