Kodealgo

Belajar Perulangan For Loop JavaScript dari Dasar

for loop merupakan salah satu bentuk perulangan yang ada di JavaScript.

Dengan menggunakan perulangan Anda dapat mengeksekusi statement secara berulang tanpa menulis ulang statement.

Mari kita lihat contoh di dunia nyata.

Anggap saja kita sedang membuat toko online, kita tentu perlu menampilkan daftar produk ke halaman.

Apa yang akan Anda lakukan? Apakah mengulang kode yang berfungsi untuk menampilkan setiap produk?

Tidak ada yang salah dengan metode ini, tapi bagaimana jika produk mencapai ribuan, Anda tentuk harus menulis ulang kode sebanyak jumlah produk.

Mari kita gunakan contoh lain yang lebih sederhana.

Misalnya, Anda diminta membuat program yang dapat menuliskan pesan hello world ke console sebanyak 5 kali.

Anda tentu bisa membuat seperti ini:

console.log('hello world');
console.log('hello world');
console.log('hello world');
console.log('hello world');
console.log('hello world');

Tapi, bagaimana jika kita diminta menampilkan pesan yang sama sebanyak 1000 kali dan setiap baris harus memiliki nomor yang berurutan.

Disinilah kita memerlukan perulangan.

Berikut topik yang akan kita pelajari terkait for loop.

  1. Sintaks
  2. Contoh
    1. Contoh Sederhana
    2. Perulangan Array Sederhana
    3. Perulangan Mencari Bilangan Bulat Dalam Array
    4. Perulangan Bersarang

Sintaks

for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) {
  statement;
}

for loop terdiri dari tiga ekspresi opsional didalam kurung lengkung yang dipisahkan dengan titik koma (( ... )), diikuti dengan blok statement yang akan dieksekusi pada setiap perulangan ({ ... }).

  • nilaiAwal: dapat berupa ekspresi atau deklarasi variabel yang akan dievaluasi sekali sebelum loop dimulai, biasanya deklarasi nilai awal.
  • kondisiTerminasi: ekspresi atau kondisi yang menghentikan perulangan. Ekspresi ini harus mengembalikan nilai false agar perulangan berhenti, jika true perulangan terus dilakukan.
  • ekspresiAkhir: dievaluasi pada akhir setiap iterasi setelah blok statement deksekusi. Biasanya digunakan untuk memperbarui atau menambah nilaiAwal.
  • statement: kode atau statement yang akan dieksekusi pada setiap iterasi selama kondisiTerminasi bernilai true.

Contoh

Contoh Sederhana

Agar lebih jelas, mari kita gunakan contoh sederhana.

Misalnya, kita ingin mencetak pesan hello world sebanyak 5 kali ke console menggunakan for loop.

for (let nilaiAwal = 0; nilaiAwal < 5; nilaiAwal++) {
  console.log('hello world');
}

/* output:
hello world
hello world
hello world
hello world
hello world
*/

Begini cara kerjanya:

  1. Kita mendeklarasikan dan menginisialisasi variabel nilaiAwal dengan 0.
  2. kondisiTerminasi dievaluasi, karena nilaiAwal saat ini 0 maka 0 < 5 menghasilkan nilai true.
  3. Karena kondisiTerminasi menghasilkan nilai true maka kode di dalam blok statement dieksekusi, dalam hal ini console.log('hello world');.
  4. Setelah semua kode statement dieksekusi, ekspresiAkhir dievaluasi, dalam hal ini nilaiAwal++ (nilaiAwal = nilaiAwal + 1), artinya sekarang variabel nilaiAwal bernilai 2. Ulangi langkah kedua dan seterusnya namun dengan nilai yang baru.

Langkah-langkah diatas terus diulang sampai kondisiTerminasi menghasilkan nilai false.

Perulangan di atas berhenti ketika variabel nilaiAwal bernilai 5 karena 5 < 5 menghasilkan nilai false.

Kita juga bisa membuat variabel dengan nama lain selain nilaiAwal, biasanya i.

Mari kita gunkaan contoh lain, dimana kita akan memulai perulangan sebanyak lima kali dimulai dari 1.

Setiap iterasi akan menampilkan nilai i dengan teks hello world yang digabungkan menggunakan template literal.

for (let i = 1; i <= 5; i++) {
  console.log(`${i}. hello world`);
}

/* output:
1. hello world
2. hello world
3. hello world
4. hello world
5. hello world
*/

Perulangan Array Sederhana

Perulangan for juga biasa digunakan untuk mengulang elemen array.

Mari kita lihat contoh sederhana untuk menampilkan setiap elemen array ke console.

const buah = ['apel', 'mangga', 'jeruk', 'pisang'];

for (let i = 0; i < buah.length; i++) {
  console.log(buah[i]);
}

/* output:
apel
mangga
jeruk
pisang
*/

Ingat, untuk mengakses elemen array kita bisa menggunakan indeks, elemen pertama memiliki indeks 0, elemen kedua 1 dan seterusnya.

Jika Anda masih kesulitan memahami kode di atas, pelajari lagi topik terkait dasar-dasar array.

Perulangan Mencari Bilangan Bulat Dalam Array

Contoh di atas kita hanya menampilkan elemen, bagaimana jika kita ingin mengakses elemen array yang spesifik.

Misalnya jika array berisi kumpulan angka, kita ingin menyeleksi bilangan bulat dalam array tersebut dan memasukkannya ke array baru.

Mari kita lihat contoh berikut.

const arr = [5, 6, 8, 4, 16, 9, 7, 12, 11];
const arrNilaiBulat = [];

for (let i = 0; i < arr.length; i++) {
  if (arr[i] % 2 === 0) {
    arrNilaiBulat.push(arr[i]);
  }
}

console.log(arrNilaiBulat); // [ 6, 8, 4, 16, 12 ]

Bagaimana jika kita ingin mencari bilangan ganjil?

Sama saja seperti di atas, hanya saja ekspresi di dalam kurung kurawal percabangan if bisa diganti dengan arr[i] % 2 !== 0, artinya kita mencari elemen array yang tidak habis dibagi 0 alias ganjil.

Perulangan Bersarang

Semua contoh di atas hanya memiliki satu buah perulangan.

Kita juga bisa membuat perulangan di dalam perulangan alias perulangan bersalang.

Lihat contoh berikut.

for (let i = 1; i <= 3; i++) {
  for (let j = 1; j <= i; j++) {
    console.log(`${i}.${j}`);
  }
}

/* output:
1.1
2.1
2.2
3.1
3.2
3.3
*/
« Sebelumnya
switchSelanjutnya »
for of