Hai, apa kabar? Kembali lagi di tutorial JavaScript! Di tutorial kali ini, kita akan belajar tentang Array. Array adalah cara untuk menyimpan banyak data dalam satu variabel. Kalau kamu sering merasa kesulitan menyimpan beberapa nilai, array adalah solusi yang tepat!

Apa Itu Array?

Array adalah sebuah struktur data yang memungkinkan kamu menyimpan banyak nilai di dalam satu variabel. Kamu bisa menyimpan berbagai jenis data di dalam array, seperti angka, string, atau objek. Berikut adalah cara membuat array di JavaScript:

let angka = [1, 2, 3, 4, 5];

Dalam contoh ini, angka adalah array yang berisi lima angka.

Mengakses Elemen di dalam Array

Untuk mengakses elemen di dalam array, kamu bisa menggunakan indeks. Indeks array dimulai dari angka 0, jadi elemen pertama ada di indeks 0, elemen kedua di indeks 1, dan seterusnya.

let angka = [1, 2, 3, 4, 5];
console.log(angka[0]); // Output: 1
console.log(angka[2]); // Output: 3

Menambah dan Menghapus Elemen dalam Array

Ada beberapa cara untuk menambah dan menghapus elemen dalam array. Berikut adalah beberapa metode yang sering digunakan:

1. Menambah Elemen di Akhir Array:

let angka = [1, 2, 3];
angka.push(4); // Menambah 4 di akhir array
console.log(angka); // Output: [1, 2, 3, 4]

2. Menghapus Elemen di Akhir Array:

let angka = [1, 2, 3, 4];
angka.pop(); // Menghapus elemen terakhir
console.log(angka); // Output: [1, 2, 3]

3. Menambah Elemen di Awal Array:

let angka = [2, 3, 4];
angka.unshift(1); // Menambah 1 di awal array
console.log(angka); // Output: [1, 2, 3, 4]

4. Menghapus Elemen di Awal Array:

let angka = [1, 2, 3, 4];
angka.shift(); // Menghapus elemen pertama
console.log(angka); // Output: [2, 3, 4]

Iterasi Melalui Array

Sering kali kita ingin melakukan sesuatu pada setiap elemen dalam array. Di JavaScript, kita bisa menggunakan forEach untuk iterasi melalui array.

let angka = [1, 2, 3, 4, 5];
angka.forEach(function(elemen) {
  console.log(elemen); // Output: 1, 2, 3, 4, 5 (terpisah)
});

Studi Kasus: Menyaring Angka Genap dari Array

Note : Kalian bisa mempraktekannya di CodeLab dari code80vity

Sekarang, kita akan membuat program yang menyaring angka genap dari array menggunakan metode filter.

HTML-nya:

  
  
  


  
Angka Genap dari Array
  


  

JavaScript-nya (di file script.js):

function tampilkanAngkaGenap() {
  let angka = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
  let angkaGenap = angka.filter(function(elemen) {
    return elemen % 2 === 0; // Memilih angka genap
  });

  let hasil = document.getElementById("hasil");
  angkaGenap.forEach(function(elemen) {
    let listItem = document.createElement("li");
    listItem.textContent = elemen;
    hasil.appendChild(listItem);
  });
}

tampilkanAngkaGenap();

Penjelasan:

• Di sini, kita menggunakan metode filter() untuk membuat array baru yang hanya berisi angka genap dari array yang sudah ada.
• Setelah itu, kita menampilkan angka genap tersebut ke dalam elemen
  di HTML.

  ---

  Gimana? Seru kan belajar tentang array? Dengan array, kamu bisa menyimpan dan memanipulasi data dalam jumlah banyak dengan mudah. Artikel ini sangat berguna sebelum kamu melanjutkan ke tutorial JavaScript selanjutnya di www.code80vity.com. Semoga kamu lebih jago dalam mengelola data dan memanipulasinya di programmu! ?

  Hai, kembali lagi! Di tutorial kali ini, kita akan belajar tentang perulangan atau loops. Perulangan sangat berguna ketika kamu ingin menjalankan kode yang sama berulang kali tanpa menulisnya lagi. Ada beberapa jenis perulangan di JavaScript yang akan kita pelajari.

  1. For Loop

  Perulangan for digunakan ketika kita tahu berapa kali perulangan harus dilakukan. Biasanya digunakan untuk perulangan berdasarkan angka atau indeks dalam sebuah array.

  for (let i = 0; i < 5; i++) {
    console.log("Perulangan ke-" + i);
  }
  

  Penjelasan:

  • let i = 0 adalah inisialisasi variabel (dimulai dari 0).
  • i < 5 adalah kondisi yang akan dicek di setiap iterasi. Jika kondisi ini true, maka kode dalam blok for akan dijalankan.
  • i++ adalah increment, yang berarti menambah nilai i setiap kali perulangan selesai.

  Outputnya:

  Perulangan ke-0
  Perulangan ke-1
  Perulangan ke-2
  Perulangan ke-3
  Perulangan ke-4
  

  2. While Loop

  Perulangan while digunakan ketika kita ingin perulangan berjalan selama kondisi tertentu tetap terpenuhi. Perulangan akan terus berjalan selama kondisi true.

  let i = 0;
  while (i < 5) {
    console.log("Perulangan ke-" + i);
    i++;
  }
  

  Di sini, perulangan akan terus berjalan selama i kurang dari 5, dan setiap iterasi nilai i akan bertambah satu.

  3. Do While Loop

  do while hampir sama dengan while, tetapi perbedaan utamanya adalah perulangan do akan selalu dijalankan minimal satu kali, meskipun kondisi awalnya false.

  let i = 0;
  do {
    console.log("Perulangan ke-" + i);
    i++;
  } while (i < 5);
  

  Perulangan ini juga akan menghasilkan output yang sama dengan while di atas, tapi yang membedakan adalah kondisi baru diperiksa setelah kode di dalam blok do dijalankan.

  4. For...of (untuk Array)

  Jika kita ingin melakukan perulangan pada sebuah array, kita bisa menggunakan for...of. Ini adalah cara yang lebih modern dan lebih mudah digunakan dibandingkan dengan for tradisional.

  let angka = [1, 2, 3, 4, 5];
  for (let nilai of angka) {
    console.log(nilai);
  }
  

  Outputnya:

  1
  2
  3
  4
  5
  

  Studi Kasus: Menampilkan Daftar Angka Genap

  Note : Kalian bisa mempraktekannya di CodeLab dari code80vity

  Sekarang, kita akan buat program untuk menampilkan angka genap dari 1 hingga 20 menggunakan perulangan.

  HTML-nya:

  
  
  
    
    
    
  
  
    
  Daftar Angka Genap dari 1 sampai 20
    
  
  
    
  
  
  

  JavaScript-nya (di file script.js):

  function tampilkanAngkaGenap() {
    let hasil = document.getElementById("hasil");
    for (let i = 1; i <= 20; i++) {
      if (i % 2 === 0) {  // Mengecek apakah angka genap
        let listItem = document.createElement("li");
        listItem.textContent = i;
        hasil.appendChild(listItem);
      }
    }
  }
  
  tampilkanAngkaGenap();
  

  Penjelasan:

  • Kita menggunakan perulangan for untuk menghitung angka dari 1 sampai 20.
  • Di dalam perulangan, kita cek apakah angka tersebut genap menggunakan operator modulus (%).
  • Jika angka genap, kita buat elemen list (
  • ) dan menambahkannya ke dalam daftar di HTML.

  ---

  Sekian dulu tentang perulangan di JavaScript. Dengan perulangan, kamu bisa membuat program yang bisa mengulang aksi berulang kali dengan mudah. Artikel ini sangat berguna sebelum kamu melanjutkan ke tutorial JavaScript selanjutnya di www.code80vity.com. Semoga kamu semakin jago membuat program yang membutuhkan pengulangan!