3 Cara Penulisan Blok Fungsi Javascript

Yang dimaksud blok fungsi adalah sebuah penulisan function yang dibuat dalam sebuah kerangka tersendiri agar tidak mengacaukan variable-variable yang ada di root document atau di root window. Variable yang di deklarasikan di dalam blok fungsi ini tidak akan bisa diakses dari root dokumen, namun yang ada di dalam bisa mengakses variable yang ada di root atau di kerangka luarnya, karena blok fungsi bisa bertingkat.

Dalam sebuah blok fungsi, variable yang yang memiliki nama sama antara yang ada didalam blok fungsi dan di root, maka akan dipakai yang ada di dalam blok, namun ini tidak disarankan sebab akan membuat kira bingung sendiri kalau suatu saat akan membaca kembali alur sebuah fungsi.

Berikut ini 3 cara yang bisa digunakan dalam membuat blok fungsi, meskipun ketiganya bisa memiliki perbedaan, namun secara umum tidak ada efek yang besar.

// parens on the inside
(function() {
  console.log( 'Tes variable dalam fungsi' );
}());

// parentheses on the outside
(function() {
  console.log( 'Tes variable dalam fungsi' );
})();

// Using the exclamation mark operator
!function() {
  console.log( 'Tes variable dalam fungsi' );
}();

Jika ketiga cara diatas menggunakan variable di root atau induknya, disarankan menuliskannya seperti berikut ini:

var ___root_variable = 'Tes variable root diakses dari dalam fungsi';

// parens on the inside
(function( A ) {
  console.log( A );
}( ___root_variable ));

// parentheses on the outside
(function( A ) {
  console.log( A );
})( ___root_variable );

// Using the exclamation mark operator
!function( A ) {
  console.log( A );
}( ___root_variable );

Walaupun tanpa penulisan seperti itu masih bisa, namun keakuratannya berbeda.

Untuk membuat function berbasis jQuery penulisan seperti dibawah ini sangat disarankan:

// parens on the inside
(function( $ ) {
  console.log( 'tes jQuery type: ' + typeof $ );
}( jQuery ));

// parentheses on the outside
(function( $ ) {
  console.log( 'tes jQuery type: ' + typeof $ );
})( jQuery );

// Using the exclamation mark operator
!function( $ ) {
  console.log( 'tes jQuery type: ' + typeof $ );
}( jQuery );

Penulisan blok kode seperti diatas adalah cara meminimalisasi terjadinya konfilk antar kode javascript, sebab kalau tidak begitu, maka kita jadi terpaksa menamakan variable dengan nama yang panjang agar kemungkinan ada konfilk kecil, dan ini memperbesar ukuran byte dari script function.

Dengan blok function, kita bisa mengulang variable dengan nama var a berulang-ulang meski memiliki identitas berbeda sama sekali asal ada di blok function berbeda

Ini hanya catatan saja, karena saya kuatir lupa jika suatu saat ingin membaca kembali script-script yang telah dibuat.

Jika ada yang kesasar kemari, semoga penjelasan diatas bisa dimengerti, bukan untuk yang tahap paling dasar dalam belajar javascript.