Apakah kawat gigi diperlukan dalam pernyataan satu baris dalam JavaScript?

163

Saya pernah mendengar bahwa meninggalkan kurung kurawal dalam pernyataan satu baris bisa berbahaya dalam JavaScript. Saya tidak ingat alasannya lagi dan pencarian Google tidak banyak membantu.

Apakah ada sesuatu yang membuatnya menjadi ide yang bagus untuk mengelilingi semua pernyataan dalam kurung kurawal di JavaScript?

Saya bertanya, karena semua orang tampaknya melakukannya.

Menara
sumber
5
Catatan: hanya pernyataan pertama yang mengasumsikan ruang lingkup, bahkan jika Anda memiliki beberapa pernyataan pada satu baris, jadi itu bukan "pernyataan satu baris" melainkan pernyataan tunggal
Kris Ivanov
1
Anda mungkin memikirkan masalah yang dijelaskan dalam jawaban ini
Blorgbeard keluar
@ Blorgbeard: tidak, saya benar-benar menjawab jawaban itu beberapa waktu lalu.
Menara
Hah, jadi saya mengerti. Lupakan saja :)
Blorgbeard keluar
Inilah jawaban Anda: medium.com/@jonathanabrams/…
Erwan Legrand

Jawaban:

204

Tidak

Tetapi mereka direkomendasikan. Jika Anda pernah memperluas pernyataan, Anda akan membutuhkannya.

Ini sangat valid

if (cond) 
    alert("Condition met!")
else
    alert("Condition not met!")

Namun sangat disarankan agar Anda selalu menggunakan kawat gigi karena jika Anda (atau orang lain) pernah memperluas pernyataan itu akan diperlukan.

Praktik yang sama ini mengikuti semua bahasa gaya C sintaksis dengan menguatkan. C, C ++, Java, bahkan PHP semuanya mendukung satu pernyataan baris tanpa kawat gigi. Anda harus menyadari bahwa Anda hanya menyimpan dua karakter dan dengan gaya menguatkan beberapa orang Anda bahkan tidak menyimpan garis. Saya lebih suka gaya penjepit penuh (seperti berikut) sehingga cenderung sedikit lebih lama. Pengorbanannya dipenuhi dengan fakta bahwa Anda memiliki keterbacaan kode yang sangat jelas.

if (cond) 
{
    alert("Condition met!")
}
else
{
    alert("Condition not met!")
}
Josh K.
sumber
28
+1, jawaban informatif. Namun secara pribadi, saya tidak pernah merasa berguna untuk melakukan hal yang "direkomendasikan" ini. Saya tidak pernah mengkodekan python, jadi saya tidak hanya memasukkan sesuatu dan berharap lekukan menjadi masalah. Jika saya menambahkan pernyataan, saya juga menambahkan kawat gigi. Selalu. Tidak ingat kapan saja itu menggigit saya. Tidak dalam C, tidak dalam C # tidak dalam JavaScript.
Jakob
16
@Kirk: Douglas Crockford merekomendasikannya. Saya setuju bahwa itu adalah keputusan pribadi yang subjektif, tetapi ketika bekerja dalam kelompok lebih mudah untuk mengetikkan kawat gigi.
Josh K
10
@ Astaga, oh, well Crockford mengatakannya. Itu pasti kata terakhir. ;) (hanya bercanda) Masalahnya adalah bahwa subjektivitas dari titik ini meluas di semua bahasa seperti C, dan pendapat yang kuat dapat ditemukan di seluruh (untuk kedua posisi).
Kirk Woll
11
Pengalaman pribadi saya menunjukkan bahwa tidak menempatkan gelang dapat menyebabkan kegagalan besar saat bekerja dalam tim.
Tuan
4
Merupakan praktik yang baik untuk selalu menggunakan kawat gigi {}. Seperti yang dikatakan @Arx, ada banyak ruang untuk kesalahan jika Anda membiarkannya. Apple bahkan memiliki bug di SSL SSL / TLS karena mereka tidak menggunakan kawat gigi
Keenan Lidral-Porter
94

Ada aspek keterbacaan - bahwa ketika Anda memiliki pernyataan majemuk itu bisa sangat membingungkan. Indentasi membantu tetapi tidak berarti apa-apa bagi kompiler / juru bahasa.

var a;
var b;
var c;

//Indenting is clear
if (a===true)
  alert(a); //Only on IF
alert(b); //Always

//Indenting is bad
if (a===true)
  alert(a); //Only on IF
  alert(b); //Always but expected?

//Nested indenting is clear
if (a===true)
  if (b===true)
    alert(a); //Only on if-if
alert (b); //Always

//Nested indenting is misleading
if (a===true)
  if (b===true)
    alert(a); //Only on if-if
  alert (b); //Always but expected as part of first if?

//Compound line is misleading
//b will always alert, but suggests it's part of if
if (a===true) alert(a);alert(b); 
else alert(c); //Error, else isn't attached

Dan kemudian ada aspek ekstensibilitas:

//Problematic
if (a===true)
  alert(a);
  alert(b); //We're assuming this will happen with the if but it'll happen always
else       //This else is not connected to an if anymore - error
  alert(c);

//Obvious
if (a===true) {
  alert(a); //on if
  alert(b); //on if
} else {
  alert(c); //on !if
} 

Berpikir bahwa jika Anda selalu memiliki tanda kurung maka Anda tahu untuk memasukkan pernyataan lain di dalam blok itu.

Rudu
sumber
4
Itulah mengapa kita harus selalu menggunakannya sebagai satu-kapal: if (a===true) alert(a);. Sekarang sudah jelas!
João Pimentel Ferreira
1
Menggunakan braket keriting-kiri dan braket keriting-kanan membuat persyaratan jelas. Bagi para pemimpi di antara kita, juga disebut sebagai burung terbang kiri dan kanan.
HalfMens
61

Pertanyaan itu menanyakan tentang pernyataan pada satu baris. Namun, banyak contoh yang diberikan menunjukkan alasan untuk tidak meninggalkan kawat gigi berdasarkan beberapa pernyataan garis. Benar-benar aman untuk tidak menggunakan tanda kurung pada satu baris, jika itu adalah gaya pengkodean yang Anda inginkan.

Misalnya, pertanyaannya adalah apakah ini ok:

 if (condition) statement;

Tidak bertanya apakah ini ok:

 if (condition)
   statement;

Saya pikir meninggalkan tanda kurung lebih disukai karena membuat kode lebih mudah dibaca dengan sintaks yang tidak berlebihan.

Gaya pengkodean saya adalah jangan pernah menggunakan tanda kurung kecuali kodenya blok. Dan untuk tidak pernah menggunakan banyak pernyataan pada satu baris (dipisahkan oleh titik koma). Saya menemukan ini mudah dibaca dan dihapus dan tidak pernah memiliki masalah pelingkupan pada pernyataan 'jika'. Akibatnya, menggunakan tanda kurung pada satu jika pernyataan kondisi akan membutuhkan 3 baris. Seperti ini:

 if (condition) {
   statement;
 }

Menggunakan satu baris jika pernyataan lebih disukai karena menggunakan lebih sedikit ruang vertikal dan kode lebih kompak.

Saya tidak akan memaksa orang lain untuk menggunakan metode ini, tetapi itu bekerja untuk saya dan saya tidak bisa lebih tidak setuju dengan contoh yang diberikan tentang bagaimana meninggalkan tanda kurung mengarah ke kesalahan pengkodean / pelingkupan.

peawormsworth
sumber
1
Saya selalu merasa orang harus selalu memasukkan kawat gigi ... tapi saya memikirkannya kembali sekarang. Anda memiliki panduan gaya airbnb di sisi Anda!
pengirim
1
Namun Anda lupa bahwa sebagian besar pembuat kode mengubahnya menjadi format 2-baris dan Anda kembali ke kode bermasalah. Argumen ruang vertikal hanya konyol. Keterbacaan selalu menang, dan layar saat ini sangat besar.
Kim
1
2-baris ditambahkan untuk setiap braket, untuk mengelilingi pernyataan satu-baris Anda bukan biaya besar dibandingkan dengan potensi kerusakan yang dapat disebabkan oleh - bahkan pengembang yang sangat hati-hati - menjaga kode Anda. Anda sendiri dapat menjadi pengembang yang hebat dengan keterampilan mitos, tetapi Anda tidak dapat berasumsi bahwa rekan Anda. KISS, bungkus sesuatu dengan konteks dan buat semudah mungkin untuk orang lain atau Anda akhirnya akan mendapat masalah.
Maciej Tokarz
@senderle Aturan eslint untuk mengontrol ini dapat ditemukan di sini: eslint.org/docs/rules/curly#multi /*eslint curly: ["error", "multi"]*/
silkfire
15

Secara teknis tidak, tetapi sebaliknya benar-benar Ya !!!

Lupakan "Ini preferensi pribadi", "kodenya akan berjalan dengan baik", "telah berfungsi dengan baik untuk saya", "lebih mudah dibaca" yada yada BS. Ini dapat dengan mudah menyebabkan masalah yang sangat serius jika Anda membuat kesalahan dan percayalah, sangat mudah untuk membuat kesalahan saat Anda membuat kode (Don't belive ?, lihat Apple yang terkenal bug yang gagal ).

Argumen: "Ini pilihan pribadi"

Tidak, bukan. Kecuali jika Anda adalah tim satu orang yang berangkat dari mars, tidak. Sebagian besar waktu akan ada orang lain membaca / memodifikasi kode Anda. Dalam tim pengkodean yang serius ini akan menjadi cara yang disarankan, jadi ini bukan 'preferensi pribadi'.

Argumen: "kode akan berjalan dengan baik"

Begitu juga kode spageti! Apakah ini berarti tidak masalah untuk membuatnya?

Argumen: "sudah bekerja dengan baik untuk saya"

Dalam karir saya, saya telah melihat banyak bug yang dibuat karena masalah ini. Anda mungkin tidak ingat berapa kali Anda berkomentar 'DoSomething()'dan bingung mengapa 'SomethingElse()'dipanggil:

if (condition) 
    DoSomething();
SomethingElse();

Atau menambahkan 'SomethingMore' dan tidak menyadari itu tidak akan dipanggil (meskipun lekukan menyiratkan sebaliknya):

if (condition)
  DoSomething();
  SomethingMore();

Ini adalah contoh kehidupan nyata yang saya miliki. Seseorang ingin mengaktifkan semua pencatatan sehingga mereka menjalankan find & replace "console.log"=> //"console.log":

if (condition) 
   console.log("something");
SomethingElse();

Lihat masalahnya?

Bahkan jika Anda berpikir, "ini sangat sepele, saya tidak akan pernah melakukan itu"; ingat bahwa akan selalu ada anggota tim dengan keterampilan pemrograman yang lebih rendah daripada Anda (semoga Anda bukan yang terburuk di tim!)

Argumen: "lebih mudah dibaca"

Jika saya belajar sesuatu tentang pemrograman, hal-hal sederhana menjadi sangat kompleks dengan sangat cepat. Sangat umum bahwa ini:

if (condition) 
    DoSomething();

berubah menjadi yang berikut setelah diuji dengan berbagai browser / lingkungan / use case atau fitur baru ditambahkan:

if (a != null)
   if (condition) 
      DoSomething();
   else
      DoSomethingElse(); 
      DoSomethingMore();
else 
    if (b == null)
         alert("error b");
    else 
         alert("error a");

Dan bandingkan dengan ini:

 if (a != null) {
    if (condition) { 
       DoSomething();
    }
    else {
       DoSomethingElse();
       DoSomethingMore();
    }
 } else if (b == null) {
    alert("error b");
 } else {
    alert("error a");
 }

PS: Poin bonus pergi ke siapa yang melihat bug dalam contoh di atas.

Caner
sumber
2
baik bug yang jelas adalah DoSomethingMore (); Tetapi ada juga bug lain. jika a adalah nol dan b adalah nol, Anda hanya mendapatkan "kesalahan b", Anda tidak pernah mendapatkan "kesalahan a".
Rocketsarefast
Dengan contoh Anda, tim pengembang Anda tidak tahu cara membuat kode sama sekali, kawat gigi tidak akan membantu mereka ...
Carlos ABS
beberapa contoh berasal dari tim pengembang Apple
Caner
13

Tidak ada masalah rawatan!

Masalah dengan Anda semua adalah Anda meletakkan tanda titik koma di mana-mana. Anda tidak perlu kurung kurawal untuk banyak laporan. Jika Anda ingin menambahkan pernyataan, cukup gunakan koma.

if (a > 1)
 alert("foo"),
 alert("bar"),
 alert("lorem"),
 alert("ipsum");
else
 alert("blah");

Ini adalah kode yang valid yang akan berjalan seperti yang Anda harapkan!

william malo
sumber
2
Anda tidak berarti if, elsedan alertdan tidak If, Elsedan Alert?
Anish Gupta
Wow, saya tidak tahu ini, terima kasih telah memberi tahu saya! Sepertinya kebanyakan orang mengabaikan detail penting ini.
Hendeca
13
Meskipun ini berfungsi dalam JavaScript, itu di luar saya mengapa Anda ingin melakukannya. Saya berani menebak bahwa sebagian besar pengembang tidak menyadari hal ini (termasuk saya sebelum membaca ini), yang saya curigai kemudian akan dengan cepat menjadi masalah pemeliharaan di antara pengembang. Terkadang, cara yang paling pintar bukanlah yang terbaik.
Simon
14
Ini mengerikan. Jika seseorang menambahkan pernyataan dan lupa untuk mengubah titik koma menjadi koma pada pernyataan sekarang kedua hingga terakhir di blok, Anda memiliki bug yang bisa sangat sulit dikenali karena koma dan titik koma di akhir baris juga terlihat. serupa.
Ingo Bürk
1
Saya lebih suka pendekatan "Hemingwayian" : sangat bersih. Dan tanpa ruang antaraif dan (, sepertiif(true) doSomething();
victorf
8

Tidak ada alasan pemrograman untuk menggunakan kurung kurawal pada pernyataan satu baris.

Ini hanya tergantung pada preferensi dan keterbacaan coders.

Kode Anda tidak akan rusak karenanya.

Yahel
sumber
7

Selain alasan yang disebutkan oleh @ Josh K (yang juga berlaku untuk Java, C dll), satu masalah khusus dalam JavaScript adalah penyisipan titik koma otomatis . Dari contoh Wikipedia:

return
a + b;

// Returns undefined. Treated as:
//   return;
//   a + b;

Jadi, ini juga dapat menghasilkan hasil yang tidak terduga, jika digunakan seperti ini:

if (x)
   return
   a + b;

Tidak terlalu baik untuk menulis

if (x) {
   return
   a + b;
}

tapi mungkin di sini kesalahannya sedikit lebih mudah dideteksi (?)

Chris Lercher
sumber
Semua contoh itu tampak mengerikan bagi saya, kecuali jika penulisnya sementara dan dibayar per baris atau sampai berhasil.
Cees Timmerman
6

Ini masalah gaya, tetapi kurung kurawal baik untuk mencegah kemungkinan menggantung yang lain .

pault
sumber
4

Ada banyak jawaban bagus, jadi saya tidak akan mengulangi, kecuali untuk mengatakan "aturan" saya ketika kawat gigi dapat dihilangkan: pada kondisi yang 'kembali' atau 'melempar' (misalnya) sebagai satu-satunya pernyataan mereka . Dalam hal ini kontrol aliran sudah jelas bahwa itu berhenti:

Bahkan "kasus buruk" dapat dengan cepat diidentifikasi (dan diperbaiki) karena kontrol aliran terminasi. Konsep / struktur "aturan" ini juga berlaku untuk sejumlah bahasa.

if (x)
    return y;
    always();

Tentu saja, ini juga mengapa orang dapat menggunakan linter ..

pengguna2864740
sumber
3

Inilah mengapa dianjurkan

Katakanlah saya menulis

if(someVal)
    alert("True");

Kemudian pengembang berikutnya datang dan berkata "Oh, saya perlu melakukan sesuatu yang lain", jadi mereka menulis

if(someVal)
    alert("True");
    alert("AlsoTrue");

Sekarang seperti yang Anda lihat "AlsoTrue" akan selalu benar, karena pengembang pertama tidak menggunakan kawat gigi.

Amir Raminfar
sumber
Itu tidak benar, Anda kehilangan tanda 'lain': if (someVal) waspada ("Benar"); lansiran lain ("AlsoTrue"); akan benar. Saya tidak akan menggunakannya karena saya suka {} karena jauh lebih baik dibaca.
Gerrit B
1
Hah? Saya tidak punya pernyataan lain. Saya mengatakan bahwa tanpa kawat gigi keriting, itu dapat menyebabkan bug jika seseorang menambahkan baris baru. Saya pikir Anda tidak mengerti maksud saya.
Amir Raminfar
Saya pikir apa yang dia katakan adalah bahwa, baris ke-2 akan dieksekusi tidak peduli apa. Pernyataan If tanpa kawat gigi hanya bisa menjalankan 1 baris.
PostCodeism
3

Saat ini saya sedang mengerjakan minifier. Bahkan sekarang saya memeriksanya di dua skrip besar. Secara eksperimental saya menemukan: Anda dapat menghapus kurung kurawal di belakang untuk, jika, selain itu, berfungsi * jika kurung kurawal tidak termasuk ';', 'kembali', 'untuk', 'jika', 'lain-lain', 'while', 'do', 'function'. Sambungan terlepas baris.

function a(b){if(c){d}else{e}} //ok  
function a(b){if(c)d;else e}   //ok

Tentu saja Anda perlu mengganti kurung kurawal dengan titik koma jika tidak diikuti oleh kurung kurawal lainnya.

Fungsi tidak boleh diakhiri dengan koma.

var a,b=function()c;  //ok *but not in Chrome
var b=function()c,a;  //error  

Diuji pada Chrome dan FF.

BF
sumber
2

Selalu menemukan itu

if(valid) return;

lebih mudah di mata saya daripada

if(valid) {
  return;
}

juga bersyarat seperti

(valid) ? ifTrue() : ifFalse();

lebih mudah dibaca (pendapat pribadi saya) daripada

if(valid) {
  ifTrue();
} else {
  ifFalse();
}

tapi saya kira itu turun ke gaya pengkodean

Yogi
sumber
2

Tidak menjawab pertanyaan secara langsung, tetapi di bawah ini adalah sintaks singkat tentang apakah kondisi pada satu baris

Ex:

var i=true;
if(i){
  dosomething();
}

Dapat ditulis seperti ini:

var i=true;
i && dosomething();
Menuju searah dgn angin
sumber
1

Ada banyak masalah dalam javascript. Lihatlah arsitek JavaScript Douglas Crockford berbicara tentang hal itu The jika pernyataan tampaknya baik-baik saja tapi kembali pernyataan dapat memperkenalkan masalah.

return
{
    ok:false;
}
//silent error (return undefined)

return{
    ok:true;
}
//works well in javascript
kamayd
sumber
1

Saya menemukan jawaban ini mencari tentang pengalaman serupa sehingga saya memutuskan untuk menjawabnya dengan pengalaman saya.

Pernyataan tanpa bracket berfungsi di sebagian besar browser, namun, saya menguji bahwa metode tanpa bracket sebenarnya tidak berfungsi di beberapa browser.

Pada 26 Februari 2018, pernyataan ini berfungsi di Pale Moon, tetapi tidak Google Chrome.

function foo()
   return bar;
Gabriel I.
sumber
0

Level indentasi awal dari sebuah pernyataan harus sama dengan jumlah kawat gigi terbuka di atasnya. (tidak termasuk kawat gigi yang dikutip atau dikomentari atau yang dalam arahan preprosesor)

Kalau tidak, K&R akan menjadi gaya lekukan yang bagus. Untuk memperbaiki gaya mereka, saya sarankan menempatkan pernyataan sederhana pendek jika pada satu baris.

if (foo) bar();    // I like this. It's also consistent with Python FWIW

dari pada

if (foo)
   bar();   // not so good

Jika saya sedang menulis editor, saya akan membuat tombol format otomatisnya menyedot bilah ke baris yang sama dengan foo, dan saya akan membuatnya memasukkan kawat gigi di sekitar bilah jika Anda menekan kembali sebelum seperti ini:

if (foo) {
  bar();    // better
}

Maka mudah dan konsisten untuk menambahkan pernyataan baru di atas atau di bawah bilah di dalam tubuh pernyataan if

if (foo) {
  bar();    // consistent
  baz();    // easy to read and maintain
}
Toku
sumber
-1

Terkadang mereka tampaknya dibutuhkan! Saya sendiri tidak bisa percaya, tapi kemarin terpikir oleh saya dalam sesi Firebug (Firefox 22.0 terbaru) itu

if (! my.condition.key)
    do something;

dieksekusi melakukan sesuatu walaupun my.condition.key itu benar . Menambahkan kawat gigi:

if (! my.condition.var) {
    do something;
}

memperbaiki masalah itu. Ada banyak sekali contoh di mana ia tampaknya bekerja tanpa kawat gigi, tetapi dalam kasus ini jelas tidak.

Orang-orang yang cenderung lebih dari satu pernyataan pada satu baris harus sangat pasti selalu menggunakan kawat gigi, tentu saja, karena hal-hal seperti

if (condition)
    do something; do something else;

sulit ditemukan.

Tobias
sumber
Saya ingin tahu dalam skenario apa kurangnya kawat gigi membuat kondisi jika benar, dapatkah Anda mengingat atau memberikan contoh nyata tentang itu?
gitsitgo
Ekspresi bersyarat selalu dievaluasi sebelum pernyataan. Saya juga sangat penasaran melihat contoh nyata dari ini karena itu akan mewakili bug pada penerjemah.
Titik koma
-1

Saya hanya ingin mencatat bahwa Anda juga bisa membiarkan kurung kurawal terlepas dari yang lain. Seperti yang terlihat dalam artikel ini oleh John Resig's .

if(2 == 1){
    if(1 == 2){
        console.log("We will never get here")
    }
} else 
    console.log("We will get here")
Johnston
sumber
The [Qt braces style] [1] membutuhkan blok di kedua sisi elseuntuk mencocokkan penggunaan brace - contoh ini akan membutuhkan kawat gigi pada elseblok untuk lulus tinjauan kode. [1]: wiki.qt.io/Qt_Coding_Style#Braces
pixelgrease
Mengapa downvote? Pernyataan di atas adalah 100% akurat.
Johnston
-1

Ada cara untuk mencapai beberapa baris kawat gigi non curly jika pernyataan .. (Wow apa bahasa Inggris ..) tetapi agak membosankan:

if(true)
   funcName();
else
   return null;


function funcName(){
  //Do Stuff Here...
}
amanuel2
sumber
Anda tidak harus memiliki begitu banyak baris baru saat menghilangkan kurung kurawal. Di atas juga dapat ditulis pada dua baris sebagai: if (true) funcName()dan else return null
phobos