Beberapa gaya penulisan javascript (studi kasus pembuatan tabel)

Salah satu teknik akselerasi belajar programming adalah menyelesaikan masalah apapun yang dihadapi dengan pemrograman. Misalnya ketika kita dihadapkan pada masalah pembuatan tabel secara otomatis, tanpa harus mengetik manual tag per tag dalam html.

Untuk kasus tersebut kita bisa menyelesaikannya dengan looping dalam javascript. Dan kebanyakan kasus pemrograman adalah sesuatu yang diulang secara terus menerus dalam suatu batasan tertentu. Demikian halnya dengan pembuatan tabel, ketika membuat tabel dalam html sebenarnya kita melakukan pengulangan secara terus menerus sampai data akhir tabel yang kita buat habis. Looping tersebut berlangsung pada tag tr (baris) dan didalam tag tr terjadi perulangan lagi yaitu dalam pembentukan tag td (kolom). Lebih lengkap tentang penjelasan ini bisa kamu baca generate tabel dengan javascript.

Tulisan ini bukan tentang logika penulisan looping atau pengenalan tentang syntax looping for dalam javascript. Namun tulisan ini hanya sekedar memberikan gambaran beberapa gaya penulisan kode dalam javascript. Hal ini penting sebab gaya koding seseorang berhubungan erat dengan logika dan pemahaman orang tersebut terhadap masalah yang di hadapi.

Dari artikel tentang generate tabel yang telah kamu baca, penulisan kode javascript tersebut kurang lebih seperti ini

var tinggi = 10;
var lebar = 15;
var tbl = '';

tbl += '<table>';

for(var i = 0;i < tinggi; i++) {
 tbl += '<tr>';
 
 for(var j = 0;j < lebar; j++) {
  tbl += '<td>';
  tbl += i + j;
  tbl += '</td>';
 }
 
 tbl += '</tr>';
}

tbl += '<table>';

document.getElementById('build-tabel').innerHTML = tbl;

Karena javascript juga merupakan sebuah bahasa yang mendukung paradigma objek maka kode di atas juga dapat dituliskan dalam bentuk objek seperti di bawah:

// menggunakan object
var tts = {
 tinggi: 10,
 lebar: 15,
 tbl: '<table>',
 build: function() {
  for(var i = 0;i < this.tinggi; i++) {
   this.tbl += '<tr>';
   
   for(var j = 0;j < this.lebar; j++) {
    this.tbl += '<td>';
    this.tbl += '</td>';
   }
   
   this.tbl += '</tr>';
  }
  this.tbl += '</table>';
  return this.tbl;
 }
};

document.getElementById('build-tabel').innerHTML = tts.build();

atau dapat juga kamu tulis dengan gaya kedua namun masih tetap menggunakan objek.

// menggunakan object gaya 2
var tts = {};
tts.tinggi = 10;
tts.lebar = 15;
tts.tbl = '<table>';
tts.build = function() {
   for(var i = 0;i < tts.tinggi; i++) {
    tts.tbl += '<tr>';
    
    for(var j = 0;j < tts.lebar; j++) {
     tts.tbl += '<td>';
     tts.tbl += '</td>';
    }
    
    tts.tbl += '</tr>';
   }
   tts.tbl += '</table>';
   return tts.tbl;
   };


document.getElementById('build-tabel').innerHTML = tts.build();

Silahkan pilih gaya penulisan kode javascript yang sesuai dengan style kamu.