Определение переменной JavaScript: запятые или точка с запятой

Каковы различия и / или преимущества использования запятых при объявлении группы переменных вместо точки с запятой, если таковые имеются.

Например:

var foo = 'bar', bar = 'foo';

против

var foo = 'bar';
var bar = 'foo';

Я знаю, что если вы укажете varключевое слово для первой переменной в первом примере, оно будет сохраняться во всех переменных, так что обе они дают одинаковый конечный результат в отношении области действия. Это просто личные предпочтения или есть ли преимущество в производительности в любом случае?

Никакого улучшения производительности, только вопрос личного выбора и стиля.

Первая версия просто более лаконична.

Обновить:

С точки зрения количества данных, передаваемых по сети, конечно, лучше меньше, однако вам понадобится чертовски много удаленных varобъявлений, чтобы увидеть реальное влияние.

Минификация была упомянута как то, что первый пример поможет с лучшей минификацией, однако, как указывает Даниэль Вассалло в комментариях, хороший минификатор в любом случае автоматически сделает это за вас, так что в этом отношении никакого воздействия не будет.

Прочитав Крокфорда и других, я начал связывать свои переменные исключительно запятыми. Позже меня действительно раздражал отладчик Chrome DevTools, который не останавливался на определениях переменных через запятую. Для отладчика определения переменных, объединенные запятой, представляют собой один оператор, а несколько операторов var - это несколько операторов, на которых отладчик может остановиться. Поэтому я вернулся с:

var a = doSomethingA,
    b = doSomethignB,
    c = doSomethingC;

Кому:

var a = doSomethingA;
var b = doSomethignB;
var c = doSomethingC;

К настоящему времени я считаю второй вариант намного чище, не говоря уже о его преимуществе в решении проблемы отладчика.

Аргумент «меньше кода по сети» неубедителен, поскольку есть минификаторы.

Я предпочитаю var-per-variableобозначения:

var a = 2
var b = 3

потому что у других comma-instead-of-another-varобозначений есть эти три недостатка:

1. Трудно поддерживать.
Рассмотрим этот код:

var a = 1,
    b = mogrify(2),
    c = 3

Но эй, а что делает могрифи? Напечатаем b, чтобы узнать:

var a = 1,
    b = mogrify(2),
    console.log(b)
    c = 3

ломает вещи

2. Трудно читать

Переменная в начале строки ясно сообщает, что будет инициирована новая переменная.

var get_all_unicorn_promise = db.get_all_unicorns((unicorn) => {
        unicorn.legs.map((leg) => {
            leg.log('yes')
        })
    }).sort(),
    c = 3

Что, черт возьми, там c = 3делаешь?

3. Не соответствует

Учти это:

var a = 1,
    b = 2,
    c = 3

С var-per-variableкаждым объявлением следуйте одной и той же структуре. При comma-instead-of-another-varэтом первая переменная объявляется иначе, чем другие. Если вы решите, скажем, переместить первую переменную внутри цикла for, вам нужно будет добавить var в середину объявлений.

Помимо предпочтений, похоже, что большинство известных проектов используют var-per-variableнотацию

Я согласен с другими ответчиками, что это в основном вопрос личного стиля. Но чтобы внести в обсуждение «авторитетное» мнение, вот что говорит Дуглас Крокфорд на веб-сайте популярного инструмента JSLint :

Но поскольку JavaScript не имеет области видимости блока, разумнее объявить все переменные функции в верхней части функции. Рекомендуется использовать один оператор var для каждой функции. Это может быть выполнено с помощью onevarопции.

Как отмечали другие, это предпочтение стиля. JSLint может сказать вам иметь только одну varфункцию для каждой (если вы используете «Хорошие части»). Таким образом, если вы используете JSLint для проверки вашего кода (неплохая идея, IMHO), вы в конечном итоге будете использовать первый формат больше, чем второй.

С другой стороны, тот же автор, Дуглас Крокфорд , советует помещать каждую переменную в отдельную строку в своих соглашениях о кодировании . Так что вы можете снять флажок «Все по одному varна функцию» в JSLint, если вы его используете. ;-)

Я не думаю, что есть какая-то заметная разница, насколько я понимаю, это просто личные предпочтения.

Я ненавижу иметь несколько объявлений var, поэтому обычно делаю:

var 
   one
  ,two
  ,three
  ,four
;

Поскольку он короче и, возможно, более читабелен, varшума нет .

Поскольку я не вижу на него ссылок, вот ссылка на спецификацию ECMA-262, которая является базовой спецификацией для JavaScript. Грамматика с этой страницы гласит:

12.2 Variable Statement

Syntax

  VariableStatement :
    var VariableDeclarationList ;

  VariableDeclarationList :
    VariableDeclaration
    VariableDeclarationList , VariableDeclaration

  VariableDeclarationListNoIn :
    VariableDeclarationNoIn
    VariableDeclarationListNoIn , VariableDeclarationNoIn

  VariableDeclaration :
    Identifier Initialiseropt

  VariableDeclarationNoIn :
    Identifier InitialiserNoInopt

  Initialiser :
    = AssignmentExpression
  InitialiserNoIn :
    = AssignmentExpressionNoIn

То, что вы можете извлечь из этого, использовать запятые или нет, не имеет значения. В любом случае он анализируется как a VariableDeclarationи обрабатывается точно так же. Не должно быть разницы в том, как обработчик сценариев обрабатывает эти два объявления. Единственными отличиями могут быть те, которые уже упоминались в других ответах - экономия места и практически неизмеримые различия в количестве времени, необходимом для применения грамматики, чтобы найти все, VariableDeclarationsкогда скрипт скомпилирован.

Первый сохраняет несколько символов - так что это очень небольшая экономия с точки зрения размера файла JS и, следовательно, потребления полосы пропускания. Единственный раз, когда это станет заметным, - это крайний случай.

Я предпочитаю второй вариант (у каждого свой var). Я думаю, это потому, что я вырос в C ++. В C ++ вы можете объявлять переменные, как в первом примере, но это не одобряется (это легко приводит к ошибкам, когда вы пытаетесь создать указатели таким образом).

Если вы уменьшаете свой javascript, это дает довольно большое преимущество:

var one, two, three, four;

становится

var a, b, c, d;

В то время как

var one;
var two;
var three;
var four;

становится

var a;
var b;
var c;
var d;

Это еще три экземпляра var, которые со временем могут накапливаться.

См. Серию статей "A List Apart" "Лучшая минификация Javascript", часть 1 и часть 2.