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.
Sintaks
for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; }for loop terdiri dari tiga ekspresi opsional didalam kurung lengkung yang dipisahkan dengan titik koma (for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 1), diikuti dengan blok statement yang akan dieksekusi pada setiap perulangan (for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 2).
- for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 3: dapat berupa ekspresi atau deklarasi variabel yang akan dievaluasi sekali sebelum loop dimulai, biasanya deklarasi nilai awal.
- for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 4: ekspresi atau kondisi yang menghentikan perulangan. Ekspresi ini harus mengembalikan nilai for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 5 agar perulangan berhenti, jika for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 6 perulangan terus dilakukan.
- for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 7: dievaluasi pada akhir setiap iterasi setelah blok for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 8 deksekusi. Biasanya digunakan untuk memperbarui atau menambah for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 3.
- for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 8: kode atau statement yang akan dieksekusi pada setiap iterasi selama for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 4 bernilai for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 6.
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.
Begini cara kerjanya:
- Kita mendeklarasikan dan menginisialisasi variabel for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 3 dengan for (let nilaiAwal = 0; nilaiAwal < 5; nilaiAwal++) { console.log('hello world'); } /* output: hello world hello world hello world hello world hello world */ 6.
- for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 4 dievaluasi, karena for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 3 saat ini for (let nilaiAwal = 0; nilaiAwal < 5; nilaiAwal++) { console.log('hello world'); } /* output: hello world hello world hello world hello world hello world */ 6 maka 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 */ 0 menghasilkan nilai for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 6.
- Karena for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 4 menghasilkan nilai for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 6 maka kode di dalam blok statement dieksekusi, dalam hal ini 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 */ 4.
- Setelah semua kode statement dieksekusi, for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 7 dievaluasi, dalam hal ini 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 */ 6 (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 */ 7), artinya sekarang variabel for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 3 bernilai 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 */ 9. Ulangi langkah kedua dan seterusnya namun dengan nilai yang baru.
Langkah-langkah diatas terus diulang sampai for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 4 menghasilkan nilai for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 5.
Perulangan di atas berhenti ketika variabel for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 3 bernilai const buah = ['apel', 'mangga', 'jeruk', 'pisang']; for (let i = 0; i < buah.length; i++) { console.log(buah[i]); } /* output: apel mangga jeruk pisang */ 3 karena const buah = ['apel', 'mangga', 'jeruk', 'pisang']; for (let i = 0; i < buah.length; i++) { console.log(buah[i]); } /* output: apel mangga jeruk pisang */ 4 menghasilkan nilai for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 5.
Kita juga bisa membuat variabel dengan nama lain selain for (nilaiAwal; kondisiTerminasi; ekspresiAkhir) { statement; } 3, biasanya const buah = ['apel', 'mangga', 'jeruk', 'pisang']; for (let i = 0; i < buah.length; i++) { console.log(buah[i]); } /* output: apel mangga jeruk pisang */ 7.
Mari kita gunkaan contoh lain, dimana kita akan memulai perulangan sebanyak lima kali dimulai dari const buah = ['apel', 'mangga', 'jeruk', 'pisang']; for (let i = 0; i < buah.length; i++) { console.log(buah[i]); } /* output: apel mangga jeruk pisang */ 8.
Setiap iterasi akan menampilkan nilai const buah = ['apel', 'mangga', 'jeruk', 'pisang']; for (let i = 0; i < buah.length; i++) { console.log(buah[i]); } /* output: apel mangga jeruk pisang */ 7 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 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 ] 2 bisa diganti dengan 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 ] 3, artinya kita mencari elemen array yang tidak habis dibagi 0 alias ganjil.