Mengapa saya harus menggunakan titik koma setelah setiap fungsi di javascript?

282

Saya telah melihat pengembang yang berbeda menyertakan titik koma setelah fungsi dalam javascript dan beberapa tidak. Yang merupakan praktik terbaik?

function weLikeSemiColons(arg) {
   // bunch of code
};

atau

function unnecessary(arg) {
  // bunch of code
}
macca1
sumber

Jawaban:

424

Titik koma setelah deklarasi fungsi yang tidak diperlukan .

Tata bahasa a FunctionDeclarationdijelaskan dalam spesifikasi sebagai berikut:

function Identifier ( FormalParameterListopt ) { FunctionBody }

Tidak ada titik koma secara tata bahasa yang diperlukan, tetapi mungkin bertanya-tanya mengapa?

Titik koma berfungsi untuk memisahkan pernyataan satu sama lain, dan a FunctionDeclarationbukan pernyataan .

FunctionDeclarationsdievaluasi sebelum kode dimasukkan ke dalam eksekusi, mengangkat adalah kata yang umum digunakan untuk menjelaskan perilaku ini.

Istilah "pernyataan fungsi" dan "pernyataan fungsi" sering salah digunakan secara bergantian, karena tidak ada pernyataan fungsi yang dijelaskan dalam Spesifikasi Naskah ECMAS, namun ada beberapa implementasi yang menyertakan pernyataan fungsi dalam tata bahasa mereka, - terutama Mozilla - tapi sekali lagi ini tidak standar.

Namun titik koma selalu disarankan di tempat Anda menggunakan FunctionExpressions, misalnya:

var myFn = function () {
  //...
};

(function () {
  //...
})();

Jika Anda menghilangkan tanda koma setelah fungsi pertama dalam contoh di atas, Anda akan mendapatkan hasil yang benar-benar tidak diinginkan:

var myFn = function () {
  alert("Surprise!");
} // <-- No semicolon!

(function () {
  //...
})();

Fungsi pertama akan dieksekusi segera, karena tanda kurung di sekitar yang kedua, akan ditafsirkan sebagai Argumentspanggilan fungsi.

Rekomendasi kuliah:

CMS
sumber
2
Diedit untuk memperjelas, artikel itu berbicara tentang ekspresi fungsi
CMS
1
Tidak sepenuhnya akrab dengan ECMA, tapi itu standar yang saya gunakan juga. Pos yang bagus. Sebagian besar tuts yang saya lihat online dan sampel kode I DL menggunakan standar itu, jadi saya baru saja beradaptasi dengannya.
regex
1
Beberapa kebingungan di sini mungkin dipengaruhi oleh kurangnya kata dalam bahasa Inggris yang baik untuk "diizinkan karena akan diabaikan". Kami kembali mengatakan "opsional", tapi itu menyesatkan karena menunjukkan bahwa tidak termasuk titik koma setelah deklarasi jatuh dalam kategori yang sama dengan tidak termasuk titik koma setelah pernyataan. Yang terakhir adalah opsional dalam arti yang sama sekali berbeda: itu karena parser akan menambahkan tanda titik koma yang hilang yang dihilangkan , sedangkan dalam kasus ini, itu karena parser akan mengabaikan tanda titik koma yang Anda sertakan . Dengan kata lain: jika ada yang opsional, begitu juga delapan .
Titik koma
Tautan "Named function expressions demystified" tautan ke url mati sekarang, arsip web memiliki salinan di sini: web.archive.org/web/20100426173335/http://yura.thinkweb2.com/…
Tony
Contoh terakhir adalah contoh yang bagus. Menghilangkan titik koma dalam kasus ini mengarah ke bug yang sangat aneh dan sulit di-debug. Pemungutan suara sepenuh hati.
Yan Yankowski
38

Saya menggunakannya setelah deklarasi fungsi-sebagai-variabel:

var f = function() { ... };

tetapi tidak setelah definisi gaya klasik:

function f() {
    ...
}
Gabe Moothart
sumber
NetBeans, serta IDE lain ingin melihat titik koma setelah fungsi-sebagai-variabel seperti this.animaton_fun = function () {...};
Lance Cleveland
6
Tapi - untuk si penanya - mengapa ?
Luke
ini membantu selama langkah pembangunan. Ketika skrip uglifier melihat tanda titik koma, ia tidak perlu menambahkan jeda baris ke file output, jika tidak, jeda baris akan dihasilkan dan file akan sedikit lebih besar.
autoboxer
20

JS Lint adalah konvensi de-facto, dan ia mengatakan tidak ada titik koma setelah fungsi tubuh. Lihat bagian "Titik Koma" .

David Hedlund
sumber
10
Saya telah menyaksikan langsung fungsi yang gagal karena kurangnya titik koma. Saya sepenuhnya tidak setuju bahwa meninggalkannya adalah sebuah konvensi. Sementara 99,99% dari waktu itu tidak akan rusak, ada beberapa situasi di mana saya perhatikan IE tidak dapat mem-interpet JavaScript tanpa titik koma.
MillsJROSS
8
Respons saya hanya berurusan dengan definisi fungsi seperti dalam dua contoh pertanyaan. Dalam kasus ini, titik koma penghentian tidak diperlukan di browser apa pun , dalam situasi apa pun . Saya kira Anda mungkin berpikir tentang ekspresi fungsi. Mereka adalah masalah yang sama sekali berbeda, dan bukan masalah yang dibahas dalam pertanyaan awal.
David Hedlund
var myFunction = function (arg) {console.log (arg); } (function () {console.log ('fungsi yang sama sekali tidak terkait'); kembali 'lihat apa yang terjadi';} ());
Maciej Krawczyk
@ MillsJROSS Saya kedua tanggapan David, dan akan senang jika Anda menguraikan kegagalan yang Anda temui. Apakah itu memang ekspresi fungsi atau bug dari IE?
wlnirvana
7

Tetap konsisten! Mereka tidak diperlukan, tetapi saya pribadi menggunakannya karena sebagian besar teknik minifikasi mengandalkan semi-colon (misalnya, Packer ).

Josh Stodola
sumber
5

Benar-benar hanya tergantung pada preferensi Anda. Saya suka mengakhiri baris kode dengan titik dua karena saya terbiasa dengan Java, C ++, C #, dll, jadi saya menggunakan standar yang sama untuk pengkodean dalam javascript.

Saya biasanya tidak mengakhiri deklarasi fungsi dalam tanda titik dua, tapi itu hanya preferensi saya.

Browser akan menjalankannya dengan cara apa pun, tetapi mungkin suatu hari nanti mereka akan datang dengan beberapa standar yang lebih ketat yang mengatur hal ini.

Contoh kode yang akan saya tulis:

function handleClickEvent(e)
{
     // comment
     var something = true;  // line of code
     if (something)  // code block
     {
        doSomething();  // function call
     }
}
regex
sumber
1
garis pasti harus diakhiri dengan titik koma, tho. jika tidak, sebuah minifier mungkin merusak fungsionalitas sepenuhnya
David Hedlund
9
@david: dalam hal itu minifier rusak, pasti?
DisgruntledGoat
Sepakat. Ini adalah cara alami pengkodean untuk orang (seperti saya) yang berasal dari latar belakang C / C ++. Itu juga membuat kode lebih mudah dibaca.
Anshuman Manral
3

Ini sebenarnya lebih dari masalah konvensi atau konsistensi.

Saya cukup yakin itu tidak menempatkan titik koma setelah setiap pernyataan memperlambat pengurai internal karena harus mencari tahu di mana akhir pernyataan itu. Saya berharap saya memiliki beberapa nomor berguna untuk Anda mengonfirmasi hal itu secara positif, tetapi mungkin Anda dapat mencari sendiri di Google. :)

Juga, ketika Anda mengompresi atau mengecilkan kode, kurangnya semi-titik dua dapat menyebabkan versi kecil dari skrip Anda yang tidak melakukan apa yang Anda inginkan karena semua ruang putih hilang.

Tukang batu
sumber
3
Pertanyaan itu diarahkan apakah titik koma harus setelah fungsi, tidak setiap pernyataan. Saya setuju bahwa Anda harus menempatkan titik koma setelah setiap pernyataan, dan saya telah melihat konsensus stackoverflow lainnya mengatakan hal yang sama.
macca1
1
Setuju, dan gagal menempatkan titik koma setelah fungsi akan menghasilkan masalah minifikasi yang saya sebutkan. Semoga beruntung, Tuan.
Mason
Suara positif yang
1

Ketika saya mengecilkan skrip saya, saya menyadari bahwa saya perlu menggunakan titik koma untuk fungsi yang dimulai dengan tanda sama dengan. jika Anda mendefinisikan fungsi sebagai var, ya Anda harus menggunakan titik koma.

butuh titik koma

var x = function(){};
var x = new function(){};
this.x = function(){};

tidak perlu titik koma

function x(){}
senera
sumber
0

SEDERHANA:

Ini adalah praktik yang baik untuk meninggalkan titik koma ;setelah kurung fungsi berakhir. Mereka telah dianggap sebagai praktik terbaik selama bertahun-tahun.

Satu keuntungan dari selalu menggunakannya adalah jika Anda ingin memperkecil JavaScript Anda.

Sebagai mengecilkan Javascript, membantu mengurangi ukuran file sedikit.

Tetapi untuk praktik terbaik dan jawaban di atas, tidak disarankan untuk menggunakannya setelah tag fungsi.

Jika Anda TIDAK menggunakan tanda titik koma, dan jika Anda ingin memperkecil (seperti banyak pengembang ingin lakukan jika situs mereka melayani banyak JavaScript) Anda bisa mendapatkan semua jenis Kesalahan / Peringatan.

Shaze
sumber
0

titik koma setelah suatu fungsi tidak perlu digunakan atau tidak, tidak menyebabkan kesalahan dalam program Anda. namun, jika Anda berencana untuk mengecilkan kode Anda, maka menggunakan titik koma setelah fungsi adalah ide yang bagus. katakan misalnya Anda memiliki kode seperti di bawah ini

//file one
var one=1;
var two=2;
function tryOne(){}
function trytwo(){}

dan

//file two
var one=1;
var two=2;
function tryOne(){};
function trytwo(){};

ketika Anda mengecilkan keduanya, Anda akan mendapatkan yang berikut sebagai output

Perhatikan bahwa komentar hanya untuk ilustrasi

//file one
var one=1;var two=2;function tryOne(){}
function trytwo(){}

dan

//file two
var one=1;var two=2;function tryOne(){};function trytwo(){};
DilanTasi
sumber