Объявление нескольких переменных в JavaScript

Question

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

var variable1 = "Hello World!";
var variable2 = "Testing...";
var variable3 = 42;

... или как это:

var variable1 = "Hello World!",
    variable2 = "Testing...",
    variable3 = 42;

Один метод лучше / быстрее другого?

Answer 1

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

Я чувствую, что компромисс стоит того, если это означает отучить разработчика от отбрасывания 'var' везде, где он чувствует себя.

Люди могут жаловаться на JSLint, я тоже так думаю, но большая часть его направлена ​​не на исправление проблем с языком, а на исправление вредных привычек кодеров и, следовательно, на предотвращение проблем в коде, который они пишут. Поэтому:

"В языках с областью видимости блока обычно рекомендуется объявлять переменные на сайте первого использования. Но поскольку JavaScript не имеет области видимости блока, разумнее объявить все переменные функции в верхней части функции. . Рекомендуется использовать один оператор var для каждой функции. " - http://www.jslint.com/lint.html#scope

Answer 2

Я думаю, что это вопрос личных предпочтений. Я предпочитаю делать это следующим образом:

   var /* Vars */
            me = this, that = scope,
            temp, tempUri, tempUrl,
            videoId = getQueryString()["id"],
            host = location.protocol + '//' + location.host,
            baseUrl = "localhost",
            str = "Visit W3Schools",
            n = str.search(/w3schools/i),
            x = 5,
            y = 6,
            z = x + y
   /* End Vars */;

Answer 3

Еще одна причина, по которой следует избегать использования одной версии оператора (одной var ), - отладка. Если исключение выдается в любой строк назначения, трассировка стека показывает только одну строку.

Если у вас было 10 переменных, определенных с помощью синтаксиса запятой, у вас нет возможности напрямую узнать, кто из них был виновником.

Версия отдельного утверждения не страдает от этой неопределенности.

Answer 4

Понятие «Сплоченность через сцепление» может применяться более широко, чем просто объекты / модули / функции. Может также служить в этой ситуации:

Во втором примере, предложенном ОП, все переменные объединены в одно и то же утверждение, что делает невозможным взять одну из строк и переместить ее куда-нибудь еще, не разбивая вещи (высокая связь). В первом примере, который он привел, присвоения переменных не зависят друг от друга (слабая связь).

«Низкая связь часто является признаком хорошо структурированной компьютерной системы и хорошего дизайна, а в сочетании с высокой когезией поддерживает общие цели высокой читаемости и удобства обслуживания».

http://en.wikipedia.org/wiki/Coupling_(computer_programming)

Итак, выберите первый.

Answer 5

Я считаю, что до того, как мы начали использовать ES6, подход с объявлением единой переменной не был ни хорошим, ни плохим (в случае, если у вас есть линтеры и 'use strict'. Это было действительно вкусовое предпочтение. Но теперь все изменилось для меня. мысли в пользу многострочного объявления:

1. Теперь у нас есть два новых типа переменных, и var устарел. Хорошей практикой является использование const везде, пока вам действительно не нужно let. Поэтому довольно часто ваш код будет содержать объявления переменных с присваиванием в середине кода, и из-за видимости блока вы часто будете перемещать переменные между блоками в случае небольших изменений. Я думаю, что это более удобно делать с многострочными объявлениями.

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

Answer 6

Старый пост, я знаю, но добавлю небольшую деталь перспективы для коллег по Google:

Проблема с ремонтопригодностью может быть легко решена с помощью небольшого форматирования, например.

let
  my_var1 = 'foo',
  my_var2 = 'bar',
  my_var3 = 'baz'
;

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

Answer 7

Я думаю, что первый способ (несколько переменных) лучше, так как в противном случае вы можете получить это (из приложения, использующего Knockout), которое, на мой взгляд, трудно прочитать:

    var categories = ko.observableArray(),
        keywordFilter = ko.observableArray(),
        omniFilter = ko.observable('').extend({ throttle: 300 }),
        filteredCategories = ko.computed(function () {
            var underlyingArray = categories();
            return ko.utils.arrayFilter(underlyingArray, function (n) {
                return n.FilteredSportCount() > 0;
            });
        }),
        favoriteSports = ko.computed(function () {
            var sports = ko.observableArray();
            ko.utils.arrayForEach(categories(), function (c) {
                ko.utils.arrayForEach(c.Sports(), function (a) {
                    if (a.IsFavorite()) {
                        sports.push(a);
                    }
                });
            });
            return sports;
        }),
        toggleFavorite = function (sport, userId) {
            var isFavorite = sport.IsFavorite();

            var url = setfavouritesurl;

            var data = {
                userId: userId,
                sportId: sport.Id(),
                isFavourite: !isFavorite
            };

            var callback = function () {
                sport.IsFavorite(!isFavorite);
            };

            jQuery.support.cors = true;
            jQuery.ajax({
                url: url,
                type: "GET",
                data: data,
                success: callback
            });
        },
        hasfavoriteSports = ko.computed(function () {
            var result = false;
            ko.utils.arrayForEach(categories(), function (c) {
                ko.utils.arrayForEach(c.Sports(), function (a) {
                    if (a.IsFavorite()) {
                        result = true;
                    }
                });
            });
            return result;
        });