Definisi variabel JavaScript: Koma vs. Titik Koma

Apa perbedaan dan / atau keuntungan, jika ada, menggunakan koma saat mendeklarasikan sekelompok variabel daripada titik koma.

Sebagai contoh:

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

melawan

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

Saya tahu bahwa jika Anda menentukan varkata kunci pada variabel pertama pada contoh pertama , kata kunci tersebut tetap ada di semua variabel, sehingga keduanya menghasilkan hasil akhir yang sama terkait ruang lingkup. Apakah ini hanya preferensi pribadi, atau adakah manfaat kinerja untuk melakukannya dengan cara apa pun?

Tidak ada keuntungan kinerja, hanya soal pilihan dan gaya pribadi.

Versi pertama hanya lebih ringkas.

Memperbarui:

Dalam hal jumlah data yang melewati kawat, tentu saja lebih sedikit lebih baik, namun Anda akan membutuhkan banyak sekali vardeklarasi yang dihapus untuk melihat dampak yang nyata.

Minifikasi telah disebutkan sebagai sesuatu yang contoh pertama akan membantu untuk minifikasi yang lebih baik, namun, seperti yang ditunjukkan Daniel Vassallo di komentar, penambang yang baik akan secara otomatis melakukannya untuk Anda, jadi dalam hal itu tidak ada dampak apa pun.

Setelah membaca Crockford dan lainnya, saya mulai merangkai variabel saya dengan koma secara eksklusif. Kemudian, saya benar-benar kesal dengan debugger Chrome DevTools yang tidak berhenti pada definisi variabel dengan koma. Untuk debugger, definisi variabel yang dirantai dengan koma adalah pernyataan tunggal, sedangkan beberapa pernyataan var adalah beberapa pernyataan yang dapat dihentikan debugger. Oleh karena itu, saya beralih kembali dari:

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

Untuk:

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

Sekarang, saya menemukan varian kedua jauh lebih bersih, belum lagi keuntungannya dalam menyelesaikan masalah debugger.

Argumen "kurangi kode melalui kabel" tidak persuasif, karena ada minifier.

Saya lebih suka var-per-variablenotasi:

var a = 2
var b = 3

karena comma-instead-of-another-varnotasi lain memiliki tiga kekurangan berikut:

1. Sulit untuk dipelihara
Perhatikan kode ini:

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

Tapi, hei, apa yang dilakukan mogrify? Mari cetak b untuk mencari tahu:

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

merusak barang

2. Sulit dibaca

Variabel dalam mengemis baris dengan jelas mengkomunikasikan bahwa akan ada variabel baru yang dimulai.

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

Apa yang c = 3dilakukan di sana kan?

3. Tidak konsisten

Pertimbangkan ini:

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

Dengan var-per-variablesetiap deklarasi, ikuti struktur yang sama. Dengan comma-instead-of-another-varvariabel pertama dideklarasikan dengan cara yang berbeda dari yang lain. Jika Anda memutuskan untuk, katakanlah, pindahkan variabel pertama ke dalam a for cycle, Anda harus menambahkan var ke tengah deklarasi

Selain preferensi, sepertinya sebagian besar proyek terkenal menggunakan var-per-variablenotasi

Saya setuju dengan penjawab lain bahwa ini terutama masalah gaya pribadi. Tetapi untuk membawa opini "Otoritatif" ke dalam diskusi, inilah yang dikatakan Douglas Crockford di situs web alat JSLint yang populer :

Tetapi karena JavaScript tidak memiliki cakupan blok, lebih bijaksana untuk mendeklarasikan semua variabel fungsi di bagian atas fungsi. Direkomendasikan bahwa satu pernyataan var digunakan per fungsi. Ini dapat diterapkan dengan onevaropsi.

Seperti yang telah dicatat orang lain, ini adalah preferensi gaya. JSLint mungkin memberitahu Anda untuk hanya memiliki satu varper fungsi (jika Anda menggunakan "Good Parts"). Jadi, jika menggunakan JSLint untuk memeriksa kode Anda (bukan ide yang buruk, IMHO), Anda akan lebih sering menggunakan format pertama daripada yang terakhir.

Di sisi lain, penulis yang sama, Douglas Crockford , mengatakan untuk menempatkan setiap variabel di barisnya sendiri dalam konvensi pengkodeannya . Jadi, Anda mungkin ingin menghapus centang pada kotak centang "Semua satu varper fungsi" di JSLint jika Anda menggunakannya. ;-)

Saya rasa tidak ada perbedaan yang mencolok, sejauh yang saya tahu itu hanya preferensi pribadi.

Saya benci memiliki beberapa deklarasi var, jadi saya biasanya melakukan:

var 
   one
  ,two
  ,three
  ,four
;

Karena lebih pendek dan bisa dibilang lebih mudah dibaca, tidak ada varsuara untuk dilihat.

Karena saya tidak melihat referensi apa pun, berikut adalah tautan ke spesifikasi ECMA-262, yang merupakan spesifikasi dasar untuk JavaScript. Tata bahasa dari halaman itu mengatakan:

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

Apa yang dapat Anda peroleh dari ini menggunakan koma atau tidak, tidak masalah. Either way, itu akhirnya diurai sebagai VariableDeclarationdan diperlakukan persis sama. Seharusnya tidak ada perbedaan tentang cara mesin skrip memperlakukan kedua deklarasi tersebut. Satu-satunya perbedaan adalah yang telah disebutkan dalam jawaban lain - menghemat lebih banyak ruang dan perbedaan praktis tak terukur dalam jumlah waktu yang diperlukan untuk menerapkan tata bahasa untuk menemukan semua VariableDeclarationssaat skrip dikompilasi.

Yang pertama menyimpan beberapa karakter - jadi ada penghematan yang sangat kecil dalam hal ukuran file JS dan karenanya konsumsi bandwidth. Satu-satunya saat hal ini menjadi penting adalah dalam kasus yang ekstrim.

Saya lebih suka versi kedua (masing-masing memiliki versi sendiri var). Saya pikir itu karena saya berasal dari latar belakang C ++. Dalam C ++, Anda dapat mendeklarasikan variabel seperti yang Anda lakukan pada contoh pertama Anda, tetapi tidak disukai (ini dengan mudah menyebabkan kesalahan saat Anda mencoba membuat petunjuk seperti itu).

Jika Anda memperkecil javascript, ada keuntungan yang cukup besar:

var one, two, three, four;

menjadi

var a, b, c, d;

Dimana

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

menjadi

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

Itu adalah tiga contoh tambahan var, yang dapat bertambah seiring waktu.

Lihat seri artikel "A List Apart" "Better Javascript Minification" Bagian 1 dan Bagian 2