Висящие запятые

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

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

JSON, однако, не допускает висящих запятых.

Висящие запятые в литералах

Массивы

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

var arr = [
  1, 
  2, 
  3, 
];

arr; // [1, 2, 3]
arr.length; // 3

Если использовано больше одной висящей запятой, будут созданы "дырки". Массив с "дырками" называется разреженным (плотный массив не имеет "дырок"). При итерации массива при помощи, например, Array.prototype.forEach() или Array.prototype.map(), "дырки" будут пропущены.

var arr = [1, 2, 3,,,];
arr.length; // 5

Объекты

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

var object = { 
  foo: "bar", 
  baz: "qwerty",
  age: 42,
};

Висящие запятые в функциях

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

Определение параметров

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

function f(p) {}
function f(p,) {} 

(p) => {};
(p,) => {};

Висящая запятая также работает с определением методов для классов или объектов:

class C {
  one(a,) {},
  two(a, b,) {},
}

var obj = {
  one(a,) {},
  two(a, b,) {},
};

Вызов функци

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

f(p);
f(p,);

Math.max(10, 20);
Math.max(10, 20,);

Недопустимые висящие запятые

Определение параметров функции или вызов функции, содержащих только запятую будет генерировать SyntaxError. Кроме того, при использовании оставшихся параметров не допускается использовать висящие запятые:

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 ','

Висящие запятые в деструктурировании

Висящие запятые так же можно использовать слева при использовании деструктурирующего присваивания:

// массив деструктурируется с висящей запятой
[a, b,] = [1, 2];

// объект деструктурируется с висящей запятой
var o = {
  p: 42, 
  q: true,
};
var {p, q,} = o;

Ещё раз, при использовании оставшихся параметров будет сгенерирована SyntaxError:

var [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma

Висящие запятые в JSON

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

Обе строки генерируют SyntaxError:

JSON.parse('[1, 2, 3, 4, ]');
JSON.parse('{"foo" : 1, }');
// SyntaxError JSON.parse: unexpected character 
// at line 1 column 14 of the JSON data

Опустите висящие запятые, чтобы правильно проанализировать JSON:

JSON.parse('[1, 2, 3, 4 ]');
JSON.parse('{"foo" : 1 }');

Спецификации

Спецификация Статус Комментарий
ECMAScript 5.1 (ECMA-262) Стандарт Добавлены висящие запятые в объекты.
ECMAScript 2015 (6th Edition, ECMA-262) Стандарт Без изменений.
ECMAScript 2017 (ECMA-262) Стандарт Добавлены висящие запятые в список параметров функций и их вызов.
ECMAScript Latest Draft (ECMA-262) Черновик

Совместимость с браузерами

Update compatibility data on GitHub
КомпьютерыМобильныеServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung InternetNode.js
Trailing commasChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 9Opera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка 1.0nodejs Полная поддержка Да
Trailing comma in functionsChrome Полная поддержка 58Edge Полная поддержка 14Firefox Полная поддержка 52IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Полная поддержка 58Firefox Android Полная поддержка 52Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Полная поддержка 7.0nodejs Полная поддержка 8.0.0
Trailing comma in object literalsChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 9Opera Полная поддержка ДаSafari Полная поддержка ДаWebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка ДаSafari iOS Полная поддержка ДаSamsung Internet Android Полная поддержка 1.0nodejs Полная поддержка Да

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки

Смотрите также