Days
Hours
Minutes
Seconds

Promo Grand Opening

15% OFF

Khusus Pelanggan Baru

Tutorial JavaScript #11: Perulangan for

Tentu, ini adalah artikel untuk tutorial JavaScript Anda yang ke-11, membahas perulangan for.


 

 

Selamat datang di tutorial JavaScript! Setelah kita membahas berbagai struktur kondisi, saatnya kita masuk ke salah satu konsep fundamental lainnya dalam pemrograman: perulangan (looping). Perulangan memungkinkan Anda untuk mengeksekusi blok kode berulang kali. Pada artikel ini, kita akan fokus pada jenis perulangan yang paling umum dan sering digunakan: perulangan for.

 

Apa Itu Perulangan for?

 

Perulangan for digunakan ketika Anda tahu persis berapa kali Anda ingin mengulang sebuah blok kode. Ini adalah cara yang ringkas dan terstruktur untuk mengulang kode dengan jumlah iterasi yang telah ditentukan.

 

Sintaks Dasar

 

Perulangan for terdiri dari tiga bagian utama, yang semuanya diletakkan di dalam tanda kurung () dan dipisahkan oleh titik koma (;).

JavaScript

for (statement1; statement2; statement3) {
  // Kode yang akan diulang
}

Mari kita pecah setiap bagiannya:

  • statement1 (Inisialisasi): Dijalankan satu kali di awal perulangan. Biasanya digunakan untuk mendeklarasikan dan menginisialisasi variabel counter.
  • statement2 (Kondisi): Didefinisikan sebagai kondisi yang harus true agar perulangan terus berjalan. Perulangan akan berhenti ketika kondisi ini bernilai false.
  • statement3 (Ekspresi Akhir): Dijalankan setiap kali setelah blok kode di dalam perulangan selesai dieksekusi. Biasanya digunakan untuk menaikkan atau menurunkan nilai variabel counter.

 

Contoh Perulangan for

 

Mari kita lihat contoh paling sederhana: mencetak angka dari 0 hingga 4.

JavaScript

for (let i = 0; i < 5; i++) {
  console.log("Nomor: " + i);
}

Penjelasan Alur Kode di Atas:

  1. let i = 0; : Perulangan dimulai dengan menginisialisasi variabel i dengan nilai 0. Ini hanya terjadi satu kali.
  2. i < 5; : JavaScript memeriksa apakah i kurang dari 5. Pada iterasi pertama, 0 < 5 adalah true, jadi perulangan berlanjut.
  3. console.log("Nomor: " + i); : Blok kode dieksekusi. Output pertama adalah “Nomor: 0”.
  4. i++ : Setelah blok kode selesai, nilai i dinaikkan menjadi 1.
  5. Proses kembali ke langkah 2. 1 < 5 masih true. Blok kode dieksekusi lagi. Output “Nomor: 1”.
  6. Proses berlanjut hingga i menjadi 5.
  7. Ketika i adalah 5, kondisi i < 5 menjadi false. Perulangan pun berhenti.

Output lengkapnya akan terlihat seperti ini:

Nomor: 0
Nomor: 1
Nomor: 2
Nomor: 3
Nomor: 4

 

Tips Menggunakan Perulangan for

 

 

Mengakses Elemen Array

 

Perulangan for sangat efektif untuk mengakses setiap elemen dalam sebuah array. Anda bisa menggunakan properti length dari array untuk menentukan batas perulangan.

JavaScript

let buah = ["Apel", "Mangga", "Jeruk", "Pisang"];

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

Output:

Saya suka Apel
Saya suka Mangga
Saya suka Jeruk
Saya suka Pisang

 

Mengubah Arah Perulangan

 

Anda juga bisa membuat perulangan berjalan mundur dengan mengubah statement1 dan statement3.

JavaScript

for (let i = 5; i > 0; i--) {
  console.log("Hitung mundur: " + i);
}

Output:

Hitung mundur: 5
Hitung mundur: 4
Hitung mundur: 3
Hitung mundur: 2
Hitung mundur: 1

 

for...in dan for...of (Bonus)

 

Selain perulangan for klasik, JavaScript juga memiliki varian lain yang lebih spesifik:

  • for...in: Untuk mengulang properti dari sebuah objek.
  • for...of: Untuk mengulang elemen dari objek yang dapat diulang (iterable), seperti array.
JavaScript

let warna = ["merah", "biru", "hijau"];

// Perulangan for...of
for (let item of warna) {
  console.log(item);
}

 

Kesimpulan

 

Perulangan for adalah alat yang sangat kuat dan serbaguna dalam JavaScript. Dengan menguasai sintaks dasarnya, Anda dapat mengeksekusi kode berulang kali untuk berbagai tujuan, mulai dari mencetak angka hingga memanipulasi data di dalam array.

Pada tutorial selanjutnya, kita akan membahas jenis perulangan lainnya, yaitu perulangan while, dan perbedaannya dengan for. Sampai jumpa!

Wawasan Terbaru

Gemini_Generated_Image_wfw5uwwfw5uwwfw5
Mengenal Dunia Grafis: Dari Piksel Hingga Vektor, Kekuatan Visual di Era Digital
Gemini_Generated_Image_b6dimfb6dimfb6di
Mengenal Foundation: Kerangka Kerja Front-End Profesional untuk Web Responsif
Gemini_Generated_Image_sx3ztpsx3ztpsx3z
CSS
Mempercantik Website dengan CSS: Seniman di Balik Tampilan Web 🎨
Gemini_Generated_Image_e013qke013qke013
Mengenal HTML: Fondasi dari Setiap Halaman Website 🌐
Gemini_Generated_Image_ldki4nldki4nldki
Menyelami Dunia Coding: Seni Berbicara dengan Komputer
Gemini_Generated_Image_dpvliydpvliydpvl
Menguasai GIT: Fondasi Penting dalam Dunia Pengembangan Perangkat Lunak
Gemini_Generated_Image_sqcib9sqcib9sqci
Tutorial Python #12: Mengenal Jenis-jenis Operator dalam Python
Gemini_Generated_Image_o1bw3do1bw3do1bw
Memahami Tipe Data Dictionary dalam Python
Gemini_Generated_Image_ko4ixfko4ixfko4i
Mengenal Tipe Data Set dalam Python
Gemini_Generated_Image_1xop7m1xop7m1xop
Tuple dalam Python: Pengenalan dan Tutorial

Wawasan Serupa

Gemini_Generated_Image_jqzcx1jqzcx1jqzc
Gemini_Generated_Image_4y7hx34y7hx34y7h
Gemini_Generated_Image_8u3is88u3is88u3i
Gemini_Generated_Image_sif5j6sif5j6sif5

Ceritakan Detail Proyekmu

Mulai dari 30K aja, solusi IT kamu langsung jalan tanpa drama.

Kata Mereka Tentang Solusi Coding

Dipercaya oleh lebih dari 200++ client untuk menyelesaikan proyeknya dengan total 250++ proyek dari berbagai jenis proyek