path: root/files/ru/web/javascript/reference/trailing_commas/index.html

---
title: Висящие запятые
slug: Web/JavaScript/Reference/Trailing_commas
tags:
  - ECMAScript2017
  - ECMAScript5
  - Висящая запятая
  - Запятая
  - Синтаксис
translation_of: Web/JavaScript/Reference/Trailing_commas
---
<div>{{JsSidebar("More")}}</div>

<p><strong>Висящие запятые</strong> (или "последние запятые") могут быть полезны при добавлении новых элементов, параметров или свойств в код JavaScript. Если вы хотите добавить новое свойство, вы просто добавляете новую строчку без изменения предыдущей, если в ней уже использована висящая запятая. Это делает различия в контроле версий чище и изменение кода может быть менее хлопотным.</p>

<p>JavaScript с самого начала допускает использовать висящих запятых в литералах массива, а затем добавлял их в литералы объекта (ECMAScript 5) и, совсем недавно (ECMAScript 2017), к параметрам функций.</p>

<p>{{Glossary("JSON")}}, однако, не допускает висящих запятых.</p>

<h2 id="Висящие_запятые_в_литералах">Висящие запятые в литералах</h2>

<h3 id="Массивы">Массивы</h3>

<p>JavaScript игнорирует висящие запятые в массивах:</p>

<pre class="brush: js">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">var arr = [1, 2, 3,,,];
arr.length; // 5
</pre>

<h3 id="Объекты">Объекты</h3>

<p>Начиная с ECMAScript 5, висящие запятые в объектах также допустимы:</p>

<pre class="brush: js">var object = {
  foo: "bar",
  baz: "qwerty",
  age: 42,
};</pre>

<h2 id="Висящие_запятые_в_функциях">Висящие запятые в функциях</h2>

<p>ECMAScript 2017 допускает висящие запятые в списке параметров функции.</p>

<h3 id="Определение_параметров">Определение параметров</h3>

<p>Следующие определения параметров функций допустимы и равнозначны друг другу. Висящие запятые не влияют на свойство <code>length</code> функции или их объект <code>arguments</code>.</p>

<pre class="brush: js">function f(p) {}
function f(p,) {}

(p) =&gt; {};
(p,) =&gt; {};
</pre>

<p>Висящая запятая также работает с <a href="/ru/docs/Web/JavaScript/Reference/Functions/Определиние_методов">определением методов</a> для классов или объектов:</p>

<pre class="brush: js">class C {
  one(a,) {},
  two(a, b,) {},
}

var obj = {
  one(a,) {},
  two(a, b,) {},
};
</pre>

<h3 id="Вызов_функции">Вызов функции</h3>

<p>Следующие вызовов функций допустимы и равнозначны друг другу.</p>

<pre class="brush: js">f(p);
f(p,);

Math.max(10, 20);
Math.max(10, 20,);
</pre>

<h3 id="Недопустимые_висящие_запятые">Недопустимые висящие запятые</h3>

<p>Определение параметров функции или вызов функции, содержащих только запятую будет генерировать {{Jsxref("SyntaxError")}}. Кроме того, при использовании <a href="/ru/docs/Web/JavaScript/Reference/Functions/Rest_parameters">оставшихся параметров</a> не допускается использовать висящие запятые:</p>

<pre class="brush: js example-bad">function f(,) {} // SyntaxError: missing formal parameter
(,) =&gt; {};       // SyntaxError: expected expression, got ','
f(,)             // SyntaxError: expected expression, got ','

function f(...p,) {} // SyntaxError: parameter after rest parameter
(...p,) =&gt; {}        // SyntaxError: expected closing parenthesis, got ','
</pre>

<h2 id="Висящие_запятые_в_деструктурировании">Висящие запятые в деструктурировании</h2>

<p>Висящие запятые так же можно использовать слева при использовании <a href="/ru/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">деструктурирующего присваивания</a>:</p>

<pre class="brush: js">// массив деструктурируется с висящей запятой
[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">var [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma</pre>

<h2 id="Висящие_запятые_в_JSON">Висящие запятые в JSON</h2>

<p>Висящие запятые в объекте допустимы только в ECMAScript 5. Так как JSON основан на синтаксисе JavaScript старше, чем ES5, <strong>висящие запятые не допускаются в JSON</strong>.</p>

<p>Обе строки генерируют <code>SyntaxError</code>:</p>

<pre class="brush: js example-bad">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">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>Добавлены висящие запятые в объекты.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES6')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td>Без изменений.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES2017')}}</td>
   <td>{{Spec2('ES2017')}}</td>
   <td>Добавлены висящие запятые в список параметров функций и их вызов.</td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></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>