Mendeklarasikan Beberapa Variabel dalam JavaScript

Dalam JavaScript, dimungkinkan untuk mendeklarasikan beberapa variabel seperti ini:

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

... atau seperti ini:

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

Apakah satu metode lebih baik / lebih cepat dari yang lain?

Cara pertama lebih mudah dipertahankan. Setiap deklarasi adalah pernyataan tunggal pada satu baris, sehingga Anda dapat dengan mudah menambahkan, menghapus, dan menyusun ulang deklarasi.

Dengan cara kedua, menjengkelkan untuk menghapus deklarasi pertama atau terakhir karena mengandung varkata kunci dan titik koma. Dan setiap kali Anda menambahkan deklarasi baru, Anda harus mengubah titik koma di baris lama menjadi koma.

Selain rawatan, cara pertama menghilangkan kemungkinan penciptaan variabel global kecelakaan:

(function () {
var variable1 = "Hello World!" // semicolon is missed out accidently
var variable2 = "Testing..."; // still a local variable
var variable3 = 42;
}());

Sementara cara kedua kurang memaafkan:

(function () {
var variable1 = "Hello World!" // comma is missed out accidently
    variable2 = "Testing...", // becomes a global variable
    variable3 = 42; // a global variable as well
}());

Adalah umum untuk menggunakan satu varpernyataan per ruang lingkup untuk organisasi. Cara semua "cakupan" mengikuti pola yang sama membuat kode lebih mudah dibaca. Selain itu, mesin "mengangkat" mereka semua ke atas pula. Jadi, menjaga deklarasi Anda bersama meniru apa yang sebenarnya akan terjadi lebih dekat.

Ini jauh lebih mudah dibaca ketika melakukannya dengan cara ini:

var hey = 23;
var hi = 3;
var howdy 4;

Tetapi membutuhkan lebih sedikit ruang dan baris kode dengan cara ini:

var hey=23,hi=3,howdy=4;

Ini bisa ideal untuk menghemat ruang, tetapi biarkan kompresor JavaScript menanganinya untuk Anda.

Mungkin seperti ini

var variable1 = "hello world"
, variable2 = 2
, variable3 = "how are you doing"
, variable4 = 42;

Kecuali ketika mengubah variabel pertama atau terakhir mudah untuk mempertahankan dan membaca.

Ini hanya masalah preferensi pribadi. Tidak ada perbedaan antara kedua cara ini, selain beberapa byte yang disimpan dengan bentuk kedua jika Anda menghapus spasi.

ECMAScript6 memperkenalkan penugasan penghancuran yang bekerja cukup bagus:

[a, b] = [1, 2] aakan sama 1dan bakan sama 2.

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

lebih mudah dibaca daripada:

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

Tetapi mereka melakukan hal yang sama.

Gunakan tugas Destrukturisasi ES6 : Ini akan membongkar nilai dari array, atau properti dari objek, ke dalam variabel yang berbeda.

let [variable1 , variable2, variable3] = 
["Hello World!", "Testing...", 42];

console.log(variable1); // Hello World!
console.log(variable2); // Testing...
console.log(variable3); // 42

Penggunaan saya satu-satunya, namun penting untuk koma adalah dalam for loop:

for (var i = 0, n = a.length; i < n; i++) {
  var e = a[i];
  console.log(e);
}

Saya pergi ke sini untuk mencari tahu apakah ini OK di JavaScript.

Sekalipun melihatnya bekerja, pertanyaan tetap ada apakah n lokal pada fungsi.

Ini memverifikasi, n adalah lokal:

a=[3,5,7,11];
(function l () { for (var i = 0, n = a.length; i < n; i++) {
  var e = a[i];
  console.log(e);
}}) ();
console.log(typeof n == "undefined" ?
  "as expected, n was local" : "oops, n was global");

Sejenak saya tidak yakin, beralih antar bahasa.

Meskipun keduanya valid, menggunakan kedua mencegah pengembang tidak berpengalaman dari menempatkan pernyataan var di semua tempat dan menyebabkan masalah mengangkat. Jika hanya ada satu var per fungsi, di bagian atas fungsi, maka lebih mudah untuk men-debug kode secara keseluruhan. Ini bisa berarti bahwa garis-garis di mana variabel-variabel dideklarasikan tidak sejelas yang diinginkan beberapa orang.

Saya merasa bahwa trade-off sepadan, jika itu berarti menyapih pengembang agar tidak menjatuhkan 'var' di mana pun mereka suka.

Orang-orang mungkin mengeluh tentang JSLint, saya juga melakukannya, tetapi banyak yang diarahkan bukan untuk memperbaiki masalah dengan bahasa, tetapi dalam memperbaiki kebiasaan buruk para pembuat kode dan karena itu mencegah masalah dalam kode yang mereka tulis. Karena itu:

"Dalam bahasa dengan cakupan blok, biasanya disarankan agar variabel dideklarasikan di situs penggunaan pertama. Tetapi karena JavaScript tidak memiliki cakupan blok, lebih bijaksana untuk mendeklarasikan semua variabel fungsi di bagian atas fungsi. Itu adalah merekomendasikan bahwa pernyataan var tunggal digunakan per fungsi. " - http://www.jslint.com/lint.html#scope

Saya pikir ini masalah preferensi pribadi. Saya lebih suka melakukannya dengan cara berikut:

   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 */;

Alasan lain untuk menghindari versi pernyataan tunggal (single var ) adalah debugging. Jika pengecualian dilemparkan ke salah satu garis penugasan, jejak tumpukan hanya menampilkan satu baris.

Jika Anda memiliki 10 variabel yang didefinisikan dengan sintaks koma, Anda tidak memiliki cara untuk mengetahui secara langsung yang mana pelakunya.

Versi pernyataan individual tidak menderita dari ambiguitas ini.

Konsep "Kohesi atas Kopling" dapat diterapkan lebih umum daripada hanya objek / modul / fungsi. Itu juga dapat melayani dalam situasi ini:

Contoh kedua OP yang disarankan telah menggabungkan semua variabel ke dalam pernyataan yang sama, yang membuatnya tidak mungkin untuk mengambil salah satu baris dan memindahkannya ke tempat lain tanpa merusak barang (high coupling). Contoh pertama yang dia berikan membuat penugasan variabel independen satu sama lain (kopling rendah).

"Kopling rendah sering merupakan tanda dari sistem komputer yang terstruktur dengan baik dan desain yang baik, dan ketika dikombinasikan dengan kohesi yang tinggi, mendukung tujuan umum keterbacaan dan pemeliharaan yang tinggi."

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

Jadi pilih yang pertama.

Posting lama, saya tahu, tetapi untuk menambahkan detail perspektif kecil untuk sesama Google:

Masalah pemeliharaan dapat dengan mudah diatasi dengan sedikit format, seperti itu.

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

Saya menggunakan format ini secara ketat karena masalah preferensi pribadi. Saya melewatkan format ini untuk deklarasi tunggal, tentu saja, atau di mana hanya gusi up karya.

Saya percaya bahwa sebelum kita mulai menggunakan ES6, pendekatan dengan deklarasi var tunggal tidak baik atau buruk (kalau-kalau Anda memiliki linter dan 'use strict'. Itu benar-benar preferensi rasa. Tapi sekarang hal-hal berubah untuk saya. Ada pikiran saya yang mendukung deklarasi multiline :

1. Sekarang kami memiliki dua jenis variabel baru, dan varmenjadi usang. Ini adalah praktik yang baik untuk digunakan di constmana saja sampai Anda benar-benar membutuhkannya let. Jadi cukup sering kode Anda akan berisi deklarasi variabel dengan asistensi di tengah kode, dan karena pelingkupan blok Anda cukup sering akan memindahkan variabel antar blok jika terjadi perubahan kecil. Saya pikir itu lebih nyaman untuk melakukan itu dengan deklarasi multiline.

2. Sintaks ES6 menjadi lebih beragam, kami mendapat destruktor, string templat, fungsi panah, dan tugas opsional. Ketika Anda banyak menggunakan semua fitur itu dengan deklarasi var tunggal itu menyakitkan keterbacaan.

Saya pikir cara pertama (multi vars) adalah yang terbaik, karena Anda bisa berakhir dengan ini (dari aplikasi yang menggunakan Knockout), yang sulit dibaca menurut saya:

    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;
        });