Cara Membuat Pola Diamond dengan JavaScript

Pernahkah kamu melihat output program yang menampilkan bentuk-bentuk unik di konsol? Salah satu pola yang cukup populer dan menarik untuk dibuat adalah pola diamond atau berlian. Kelihatannya rumit, padahal kalau kita pahami logikanya, sebenarnya cukup sederhana dan menyenangkan untuk dipecahkan. Yuk, kita bedah bareng cara membuat pola diamond ini menggunakan JavaScript!

Kenapa Pola Diamond Menarik?

Membuat pola diamond itu seperti menyelesaikan puzzle kecil. Ini melatih kemampuan kita dalam berpikir logis, memecah masalah menjadi bagian-bagian yang lebih kecil, dan tentunya memahami bagaimana loop bekerja dalam pemrograman. Bagi pemula, ini adalah latihan yang bagus untuk mengasah skill fundamental kamu.

Memahami Struktur Diamond: Dua Segitiga Digabung

Pada dasarnya, sebuah diamond terdiri dari dua bagian utama:

1. Bagian atas: Segitiga bintang yang mengembang.
2. Bagian bawah: Segitiga bintang yang menyusut.

Jika kita bisa membuat kedua bagian ini secara terpisah, menggabungkannya menjadi diamond utuh akan menjadi mudah.

Program Sederhana Menampilkan Pola Diamond dengan JavaScript

Berikut ini adalah kode untuk membuat pola diamond.

var i,j,count = 1, number;

number = 4;
count = number - 1;

for(j = 1; j <= number; j++) {

    let text = "";

    for(i = 1; i <= count; i++) {
        text += " ";
    }

    count--;

    for(i = 1; i <= (2 * j) - 1; i++) {
        text += "*";
    }

    console.log(text);
}


count = 1;

for(j = 1; j <= number - 1; j++) {

    let text = "";

    for(i = 1; i <= count; i++) {
        text += " ";
    }
    
    count++;
    
    for(i = 1; i <= 2 * (number - j) - 1; i++) {
        text += "*";
    }
    
    console.log(text);

}

Mari kita bedah kode JavaScript di atas agar mudah dipahami.

1. Inisialisasi Variabel

var i,j,count = 1, number;

number = 4;

i dan j: Ini adalah variabel counter yang biasa kita gunakan dalam loop for.

count: Variabel ini sangat penting untuk mengatur jumlah spasi di awal setiap baris.

number = 4: Ini menentukan "ukuran" diamond kita. Jika number adalah 4, maka bagian atas diamond akan memiliki 4 baris.

2. Bagian Atas Diamond (Segitiga Mengembang)

count = number - 1; // Dimulai dengan 3 spasi jika number = 4

for(j = 1; j <= number; j++) { // Loop untuk setiap baris
    let text = "";
    
    // Menambahkan spasi
    for(i = 1; i <= count; i++) {
        text += " ";
    }

    count--; // Spasi berkurang, membuat bintang "bergerak" ke tengah

    // Menambahkan bintang
    for(i = 1; i <= (2 * j) - 1; i++) {
        text += "*";
    }

    console.log(text);
}

Loop terluar (for j): Ini adalah loop yang mengontrol berapa banyak baris yang akan dicetak di bagian atas. Ini akan berjalan sebanyak number kali.

Menambahkan Spasi (for i <= count): Di setiap baris, kita perlu menambahkan sejumlah spasi di depannya. count akan terus berkurang (count--), yang berarti spasi akan semakin sedikit di setiap baris berikutnya, sehingga bintang bisa center.

Menambahkan Bintang (for i <= (2 * j) - 1):

Rumus (2 * j) - 1 adalah kuncinya.

Ketika j = 1 (baris pertama), bintangnya adalah (2 * 1) - 1 = 1 bintang.

Ketika j = 2 (baris kedua), bintangnya adalah (2 * 2) - 1 = 3 bintang.

Dan seterusnya, menghasilkan deret ganjil bintang (1, 3, 5, 7, ...), yang membentuk segitiga mengembang.

3. Bagian Bawah Diamond (Segitiga Menyusut)

count = 1; // Reset count untuk spasi di bagian bawah

for(j = 1; j <= number - 1; j++) { // Loop untuk setiap baris (number-1 karena puncak sudah ada)
    let text = "";

    // Menambahkan spasi
    for(i = 1; i <= count; i++) {
        text += " ";
    }

    count++; // Spasi bertambah, membuat bintang "bergerak" ke pinggir

    // Menambahkan bintang
    for(i = 1; i <= 2 * (number - j) - 1; i++) {
        text += "*";
    }

    console.log(text);
}

Loop terluar (for j): Kali ini, loop berjalan sebanyak number - 1 kali. Kenapa number - 1? Karena baris terpanjang (pusat diamond) sudah dicetak oleh bagian atas. Kita tidak ingin menduplikasinya.

Menambahkan Spasi (for i <= count): Kebalikan dari bagian atas, count akan terus bertambah (count++). Ini membuat spasi semakin banyak di setiap baris, mendorong bintang untuk kembali menyusut ke arah pinggir.

Menambahkan Bintang (for i <= 2 * (number - j) - 1):

Rumus 2 * (number - j) - 1 adalah kunci untuk bagian bawah.

Ketika j = 1 (baris pertama bagian bawah), bintangnya adalah 2 * (4 - 1) - 1 = 5 bintang.

Ketika j = 2 (baris kedua bagian bawah), bintangnya adalah 2 * (4 - 2) - 1 = 3 bintang.

Ini menghasilkan deret ganjil yang menyusut (5, 3, 1, ...), membentuk segitiga menyusut.

Sekarang, silahkan coba kode ini melalui konsol browser kamu (F12) atau jalankan melalui Node.js dan lihat hasilnya.

Cobalah juga untuk mengubah nilai number. Apa yang terjadi jika number adalah 5 atau 10. Itu adalah cara terbaik untuk belajar dalam dunia pemrograman.

Kesimpulan

Membuat pola diamond dengan JavaScript mungkin terlihat menantang di awal, tetapi dengan memecahnya menjadi dua bagian (for loop) dan memahami logika di balik perhitungan spasi dan bintang, kamu bisa membuatnya dengan mudah. Ini adalah contoh yang bagus untuk melatih bagaimana menggunakan loop dan logika matematika sederhana untuk menghasilkan output yang menarik dalam pemrograman. Semoga artikel ini bermanfaat dan membantu kamu semua.