Mendeklarasikan Beberapa Variabel dalam JavaScript


334

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?


6
Sedangkan untuk lebih cepat , menggunakan jsperf ini saya tidak bisa melihat kenaikan kecepatan yang konsisten menggunakan satu metode atau yang lain.
Majid Fouladpour

Jawaban:


345

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.


67
Jika Anda menulis kode yang ingin Anda minify atau kemas nanti, cara kedua memungkinkan kompresor (seperti YUI Compressor) untuk memberi Anda versi yang lebih kecil. Jika ukuran adalah pertimbangan, maka saya akan menyarankan mengikuti saran JSLint sebanyak mungkin.
Lane

36
JSLINT mengklaim bahwa cara kedua lebih benar tetapi saya tidak setuju.
ThatGuy

29
Cara kedua adalah optimasi mikro. Semua deklarasi var diproses sekaligus, bukan satu per satu. Ini tidak masalah banyak di browser modern / komputer modern.
webnesto

18
@ 0xc0de: Saya ingin melihat bukti menyatakan semua variabel dalam satu pernyataan sebagai "efisien". Jika Anda hanya mengukur efisiensi karena beberapa byte yang disimpan, maka mungkin. Tetapi jika Anda mempertimbangkan keterbacaan akun dan pemeliharaan, saya pikir Anda akan menemukan bahwa optimasi prematur biasanya cara yang salah untuk pergi, terutama karena browser modern akan mengumpulkan dan menginisialisasi semua variabel dalam ruang lingkup pada pass pra-eksekusi. Secara pribadi, saya menemukan semua variabel dideklarasikan dalam satu baris atau pernyataan untuk membuat kode pemahaman lebih cepat dan lebih rentan kesalahan.
ogradyjd

9
Mengenai efisiensi, baik uglifyjs dan kompilator penutupan google akan secara otomatis memecah pernyataan var berurutan menjadi satu, menjadikan titik itu dapat diperdebatkan (sejauh yang saya tahu YUI tidak akan melakukan ini, namun saya belum diuji secara luas).
bhuber

215

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

4
Poin yang bagus. Jika mereka pendek, kemudian menulis pada satu baris akan menghindari masalah ini: var variable1 = "Hello World!", variable2 = "Testing...", variable3 = 42;. Orang yang hilang ,akan jatuh, tetapi saya setuju itu berisiko
Aram Kocharyan

14
Jika Anda menggunakan mode ketat, Anda tidak akan dapat membuat global seperti ini.
Danyal Aytekin

1
Saya penggemar menyatakan beberapa variabel pada satu baris karena saya pikir itu terlihat lebih bersih. Yang mengatakan, tidak sengaja mendeklarasikan variabel global adalah bahaya nyata. Sambil memburu kebocoran memori, saya menemukan banyak contoh di mana saya secara tidak sengaja mendeklarasikan beberapa variabel global sekaligus karena saya menggunakan tanda titik koma alih-alih koma.
smabbott

+1 hanya menghabiskan setengah hari dan bahkan mulai bertanya-tanya mengapa ada perbedaan tidak berdokumen antara dua deklarasi ini. Kemudian baca jawaban ini, periksa kode super dengan hati-hati dan temukan kesalahannya. Butuh liburan ...
Giedrius

1
Editor teks saya memberi saya Possible Fatal Errorjika saya kehilangan koma, hore for me!

33

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.


6
Anda dapat menyimpan deklarasi bersama tanpa membuatnya membagikan deklarasi 'var' yang sama. Saya mengerti dan menerima penjelasan yang diberikan di jslint (tautan Anda) tetapi saya tidak membagikan kesimpulannya. Seperti dikatakan di atas, ini lebih merupakan masalah gaya daripada hal lainnya. Di dunia Java (antara lain), kebalikannya (satu deklarasi per baris) direkomendasikan untuk keterbacaan.
PhiLho

Lebih mudah dibaca? Satu-satunya alasan orang menempatkan mereka pada satu baris adalah alasan spesifik JS yang Anda sebutkan: JS memindahkan semua deklarasi ke atas. Jika tidak melakukan itu, kita semua akan mendeklarasikan vars kami paling dekat ke titik di mana mereka digunakan.
Danyal Aytekin

@ vol7ron bukan itu masalahnya, dan merupakan kesalahpahaman yang mencolok dari varpernyataan itu. kebalikannya adalah benar. lihat dokumentasi dan contoh ini
jackweirdy

@ jackweirdy Anda benar dan itu masalahnya, implementasi yang buruk, atau bug di browser lama. Sejak itu saya menghapus komentar saya.
vol7ron

29

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.


15

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.


6
Biasanya, menggunakan koma-pertama, titik koma melanjutkan baris baru untuk mencegah masalah itu. var variable1 = "hello world" \ n, variable2 = 2 \ n, variable3 = "apa kabar" \ n, variable4 = 42 \ n; \ n
BrianFreud

2
Ini adalah sintaksis Haskell. Saya merasa bahwa entah bagaimana itu tidak dianjurkan / praktik umum dalam javascript
shamanSK

14

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


Yang kedua menyimpan beberapa byte.
Sophie Alpert

Ben Alpert: Bagaimana pendapat Anda?
Josh Stodola

Jika Anda menghapus spasi, daripada 'var foo = "hello", bar = "world";' deklarasi memakan lebih sedikit karakter daripada 'var foo = "hello"; var bar = "world";' Jika Anda memiliki situs populer, menyimpan beberapa byte di JS dapat membantu (Anda juga akan ingin meminimalkan nama variabel, dll)
Brian Campbell

Saya melihat ini byte yang disimpan tidak relevan pada saat ini, karena munculnya JavaScript minifiers, terutama mode sederhana Google Closer Compiler (disebut).
Lapangan Bryan

1
@webnesto tidak pernah ada kinerja dari sintaks ketika semantik sintaksnya sama. Seseorang tidak akan langsung mengeksekusi kode tetapi menguraikannya dan melakukan analisis semantik - ini adalah di mana kedua gaya deklarasi disamakan.
Esailija

14

ECMAScript6 memperkenalkan penugasan penghancuran yang bekerja cukup bagus:

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


tidak menjawab pertanyaan, tetapi bisa menjadi alternatif yang lebih baik untuk kedua pendekatan yang dijelaskan.
svarog

1
Saya pikir pendekatan Anda tidak benar-benar layak jika Anda memiliki daftar variabel yang panjang. Sulit untuk mengatakan ke variabel mana nilai terkait dan Anda tidak memiliki perlindungan dari kesalahan adalah kasus penggabungan buruk di mana Anda secara tidak sengaja dapat menghapus satu elemen dari array. Contoh: let [aVar, bVar, cVar, xVar, yVar, zVar] = [10, 20, 30, 40, 50]; Jadi, secara pribadi saya tidak merekomendasikannya.
Kirill Reznikov

1
berguna jika Anda ingin mengatur banyak variabel dengan nilai yang sama. Misalnya, mengatur ulang ke nol dalam satu lingkaran.
Nick

Iya! ini yang saya cari. Terutama jika Anda ingin mendefinisikan pasangan dua dimensi, atau nilai multi-dimensi, namun tidak array.
Eugene Kardash

11
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.


Lebih sedikit menggunakan "ruang file"? Saya pikir Anda memiliki beberapa penjelasan yang harus dilakukan.
Josh Stodola

@JoshStodola terlihat ruang file yang sama dengan saya. Sejak daripada var<space>, itu<space><space><space><space>
WORMSS

@WORMSS kecuali itu var<space>atau var<tab>vs <tab>. Sebagian besar masih bisa diperdebatkan.
mpag

9

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


4
Ini adalah ide yang buruk, terutama jika Anda perlu menetapkan sekitar 10 variabel.
Kirill Reznikov

7

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.


7

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


6

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

6

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.


2

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.


1
Saya gagal melihat bagaimana ini terkait dengan kopling atau kohesi. Mau menguraikan?
Edson Medina

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).
Magne

Kopling adalah tentang saling ketergantungan antara berbagai modul / objek / fungsi, BUKAN baris kode!
Edson Medina

1
Awalnya itu tentang modul, ya, tetapi konsepnya dapat diterapkan secara lebih umum, karena bahkan Anda sendiri memasukkan objek / fungsi ke dalam definisi menunjukkan.
Magne

2

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.


1

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.


0

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;
        });
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.