Tutorial JavaScript: Perulangan For dan Bentuk Lainnya Pada JavaScript

8 Oktober 2025

Tutorial JavaScript: Perulangan For dan Bentuk Lainnya Pada JavaScript

Dalam dunia pemrograman, Tutorial JavaScript tentang perulangan merupakan fondasi yang harus dikuasai setiap developer. Bayangkan situasi dimana Anda perlu menampilkan pesan yang sama sebanyak 100 kali di halaman web—tanpa perulangan, Anda harus menulis kode yang sama berulang-ulang secara manual, suatu proses yang tidak efisien dan rentan error .

Perulangan atau looping adalah konsep pemrograman yang memungkinkan eksekusi blok kode secara berulang sampai kondisi tertentu terpenuhi. Dalam konteks Tutorial JavaScript, pemahaman mendalam tentang perulangan sangat penting karena memungkinkan pengembang untuk menangani tugas-tugas repetitif dengan efisien, mengolah koleksi data, dan membuat logika program yang dinamis .

Dalam pengembangan web modern, perulangan JavaScript berperan crucial dalam berbagai skenario nyata: memproses data array dari API, membuat elemen DOM secara dinamis, menganimasikan komponen antarmuka, hingga mengimplementasikan algoritma kompleks. Tutorial JavaScript ini akan membahas secara mendalam semua bentuk perulangan, dilengkapi contoh praktis dan panduan implementasi yang dapat langsung diaplikasikan dalam project development .

Mengapa Perulangan Penting dalam JavaScript?

Perulangan merupakan salah satu konsep paling fundamental dalam Tutorial JavaScript karena beberapa alasan penting:

Efisiensi Kode: Daripada menulis instruksi yang sama berulang kali, perulangan memungkinkan kita menulisnya sekali dan menjalankannya sebanyak yang diperlukan .
Penanganan Data Terstruktur: Perulangan memungkinkan iterasi melalui elemen array atau properti object—kebutuhan umum dalam pemrosesan data .
Dinamisme Konten Web: Dengan perulangan, developer dapat membuat konten web yang dinamis, seperti men-generate tabel HTML dari data array atau membuat galeri gambar secara otomatis.
Optimasi Performance: Menggunakan perulangan yang tepat untuk situasi yang tepat dapat meningkatkan performa aplikasi JavaScript secara signifikan.

Kategori Perulangan dalam JavaScript

Secara umum, perulangan dalam JavaScript dapat dikategorikan menjadi dua jenis utama:

1. Counted Loop

Counted loop merupakan perulangan yang jumlah iterasi-nya sudah diketahui sebelumnya. Perulangan ini ditandai dengan penggunaan counter yang secara eksplisit mengontrol berapa kali blok kode akan diulang . Contoh perulangan yang termasuk counted loop adalah for, forEach, dan repeat().

2. Uncounted Loop

Uncounted loop adalah perulangan yang jumlah iterasi-nya tidak diketahui di awal eksekusi. Perulangan ini akan terus berjalan selama kondisi tertentu terpenuhi . Yang termasuk uncounted loop adalah while dan do/while.

Perulangan For: Counted Loop yang Paling Populer

Sintaks Dasar dan Komponen

Perulangan for adalah yang paling umum digunakan dalam Tutorial JavaScript dan memiliki sintaks berikut :

for ([inisialisasi]; [kondisi]; [ekspresi akhir]) {
  // blok kode yang akan diulang
}

Mari kita uraikan masing-masing komponen:

Inisialisasi: Dieksekusi sekali di awal perulangan, biasanya untuk mendeklarasikan dan menginisialisasi variabel counter .
Kondisi: Dievaluasi sebelum setiap iterasi. Jika bernilai true, blok kode dieksekusi; jika false, perulangan berhenti .
Ekspresi Akhir: Dieksekusi setelah setiap iterasi, biasanya untuk menambah atau mengurangi nilai counter .
Blok Kode: Kode yang akan dieksekusi berulang kali selama kondisi terpenuhi.

Contoh Implementasi For Loop

// Contoh 1: Perulangan ascending
for (let i = 0; i < 5; i++) {
  console.log(`Iterasi ke-${i}`);
}

// Contoh 2: Perulangan descending
for (let i = 10; i > 0; i--) {
  console.log(`Hitungan mundur: ${i}`);
}

// Contoh 3: Increment lebih dari 1
for (let i = 0; i <= 20; i += 2) {
  console.log(`Angka genap: ${i}`);
}

Perulangan For dengan Array

Salah satu penggunaan paling umum for loop adalah untuk iterasi melalui elemen array :

const buah = ['Apel', 'Mangga', 'Pisang', 'Jeruk'];

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

Pada contoh di atas, buah.length mengembalikan panjang array (4), dan kita mengakses setiap elemen menggunakan notasi bracket buah[i] dengan i sebagai indeks.

Studi Kasus: Filter Data dengan For Loop

const numbers = [5, 12, 8, 130, 44, 3, 17];
const numbersGreaterThanTen = [];

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 10) {
    numbersGreaterThanTen.push(numbers[i]);
  }
}

console.log(numbersGreaterThanTen); // [12, 130, 44, 17]

Perulangan For In dan For Of

For...In Loop

Perulangan for...in digunakan untuk mengiterasi properti enumerable dari sebuah object :

const person = {
  name: 'John',
  age: 30,
  occupation: 'Developer'
};

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

// Output:
// name: John
// age: 30
// occupation: Developer

Perlu diperhatikan bahwa for...in juga dapat digunakan untuk array, tetapi akan mengembalikan indeks array, bukan nilainya :

const fruits = ['Apple', 'Mango', 'Banana'];

for (let index in fruits) {
  console.log(index); // 0, 1, 2
  console.log(fruits[index]); // Apple, Mango, Banana
}

For...Of Loop

Diperkenalkan di ES6, for...of digunakan untuk mengiterasi objek yang dapat diiterasi seperti Array, String, Map, Set, dll :

// Iterasi array
const fruits = ['Apple', 'Mango', 'Banana'];
for (let fruit of fruits) {
  console.log(fruit); // Apple, Mango, Banana
}

// Iterasi string
const text = 'Hello';
for (let char of text) {
  console.log(char); // H, e, l, l, o
}

Perbedaan For...In vs For...Of

Perulangan While: Uncounted Loop yang Fleksibel

Konsep dan Sintaks Dasar

Perulangan while menjalankan blok kode selama kondisi yang diberikan bernilai true . Sintaksnya adalah:

while (kondisi) {
  // blok kode yang akan diulang
}

Berbeda dengan for loop yang termasuk counted loop, while loop biasanya digunakan sebagai uncounted loop dimana kita tidak tahu pasti berapa kali perulangan akan dilakukan .

Contoh Implementasi While Loop

// Contoh 1: Counter dengan while
let count = 1;
while (count <= 5) {
  console.log(`Count: ${count}`);
  count++;
}

// Contoh 2: Validasi input pengguna
let userInput;
while (!userInput) {
  userInput = prompt('Masukkan nama Anda:');
}
console.log(`Halo, ${userInput}!`);

While Loop dengan Kondisi Kompleks

// Simulasi pencarian dalam dataset
const data = [12, 45, 67, 23, 89, 34];
let found = false;
let index = 0;
let target = 67;

while (!found && index < data.length) {
  if (data[index] === target) {
    found = true;
    console.log(`Data ditemukan pada indeks: ${index}`);
  }
  index++;
}

if (!found) {
  console.log('Data tidak ditemukan');
}

Perulangan Do/While: Eksekusi Minimal Satu Kali

Konsep dan Perbedaan dengan While Loop

Perulangan do/while mirip dengan while loop, namun dengan perbedaan krusial: kondisi diperiksa setelah eksekusi blok kode, yang menjamin blok kode dieksekusi setidaknya sekali .

do {
  // blok kode yang akan diulang
} while (kondisi);

Contoh Implementasi Do/While

// Contoh 1: Minimal satu kali eksekusi
let i = 10;
do {
  console.log(`Nilai i: ${i}`);
  i++;
} while (i < 5);

// Output: Nilai i: 10
// Meskipun kondisi false sejak awal, blok kode tetap dieksekusi sekali

// Contoh 2: Menu interaktif
let pilihan;
do {
  pilihan = prompt(
    'Pilih menu:\n1. Tambah Data\n2. Edit Data\n3. Hapus Data\n0. Kelir'
  );
  
  switch(pilihan) {
    case '1':
      console.log('Menambah data...');
      break;
    case '2':
      console.log('Mengedit data...');
      break;
    case '3':
      console.log('Menghapus data...');
      break;
    case '0':
      console.log('Keluar dari aplikasi...');
      break;
    default:
      console.log('Pilihan tidak valid!');
  }
} while (pilihan !== '0');

Method Perulangan Modern dalam JavaScript

ForEach Method

Method forEach merupakan bagian dari prototype Array yang memungkinkan iterasi melalui setiap elemen array dengan syntax yang lebih bersih :

const numbers = [1, 2, 3, 4, 5];

// Menggunakan function biasa
numbers.forEach(function(number) {
  console.log(number * 2);
});

// Menggunakan arrow function (ES6)
numbers.forEach(number => {
  console.log(number * 2);
});

// Dengan akses index
numbers.forEach((number, index) => {
  console.log(`Elemen ${index}: ${number}`);
});

Repeat Method

Method repeat() khusus digunakan untuk mengulang string sebanyak jumlah yang ditentukan :

// Tanpa repeat()
for (let i = 0; i < 5; i++) {
  console.log('Hello');
}

// Dengan repeat()
console.log('Hello\n'.repeat(5));

Perulangan Bersarang (Nested Loop)

Nested loop adalah konsep dimana sebuah perulangan berada di dalam perulangan lainnya. Teknik ini berguna untuk menangani struktur data multidimensi atau membuat pola tertentu .

Contoh Nested Loop

// Membuat pola segitiga siku-siku
for (let i = 1; i <= 5; i++) {
  let baris = '';
  for (let j = 1; j <= i; j++) {
    baris += '* ';
  }
  console.log(baris);
}

// Output:
// *
// * *
// * * *
// * * * *
// * * * * *

// Iterasi melalui array multidimensi
const matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

for (let i = 0; i < matrix.length; i++) {
  for (let j = 0; j < matrix[i].length; j++) {
    console.log(`matrix[${i}][${j}] = ${matrix[i][j]}`);
  }
}

Kontrol Perulangan: Break dan Continue

Menggunakan Break

Pernyataan break digunakan untuk menghentikan perulangan secara paksa, biasanya ketika kondisi tertentu terpenuhi :

// Mencari angka tertentu dalam array
const numbers = [2, 5, 8, 11, 15, 19, 22];
let target = 15;
let foundIndex = -1;

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] === target) {
    foundIndex = i;
    break; // Menghentikan perulangan sekali ditemukan
  }
}

console.log(`Angka ${target} ditemukan di indeks: ${foundIndex}`);

Menggunakan Continue

Pernyataan continue digunakan untuk melewati iterasi saat ini dan melanjutkan ke iterasi berikutnya :

// Menampilkan hanya angka ganjil
for (let i = 1; i <= 10; i++) {
  if (i % 2 === 0) {
    continue; // Lewati angka genap
  }
  console.log(i); // Hanya menampilkan 1, 3, 5, 7, 9
}

Labeled Statements

JavaScript mendukung labeled statements untuk break dan continue, berguna dalam nested loop :

outerLoop: for (let i = 0; i < 5; i++) {
  innerLoop: for (let j = 0; j < 5; j++) {
    if (i === 2 && j === 2) {
      break outerLoop; // Keluar dari kedua perulangan
    }
    console.log(`i=${i}, j=${j}`);
  }
}

Infinite Loop dan Cara Menghindarinya

Infinite loop terjadi ketika perulangan tidak pernah berhenti karena kondisi selalu bernilai true. Ini adalah situasi yang harus dihindari karena dapat menyebabkan browser hang atau crash .

Contoh Infinite Loop

// HATI-HATI: Jangan jalankan kode ini!
// while (true) {
//   console.log('Ini akan berjalan selamanya!');
// }

// let i = 0;
// while (i < 5) {
//   console.log(i);
//   // Lupa increment i - infinite loop!
// }

Tips Menghindari Infinite Loop

Pastikan ada mekanisme exit: Kondisi perulangan harus bisa menjadi false di suatu titik
Update variabel counter dengan benar: Pastikan variabel kondisi di-update di dalam blok perulangan
Gunakan break condition: Tambahkan kondisi tambahan dengan break untuk menghentikan perulangan

Tips dan Praktik Terbaik Perulangan JavaScript

1. Pilih Jenis Perulangan yang Tepat

Gunakan for ketika tahu berapa kali perulangan needed
Gunakan while atau do/while ketika jumlah iterasi tidak pasti
Gunakan for...of untuk iterasi nilai array/iterable
Gunakan for...in untuk iterasi properti object

2. Optimasi Performance

// Kurangi perhitungan dalam kondisi perulangan
// Tidak optimal:
for (let i = 0; i < document.getElementsByTagName('div').length; i++) {
  // ...
}

// Optimal:
const divCount = document.getElementsByTagName('div').length;
for (let i = 0; i < divCount; i++) {
  // ...
}

3. Hindari Callback dalam Perulangan

Hindari menggunakan fungsi asynchronous dalam perulangan synchronous unless dihandle dengan benar:

// Problematic:
for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // Selalu mencetak 5
  }, 100);
}

// Solution:
for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i); // Mencetak 0, 1, 2, 3, 4
  }, 100);
}

Studi Kasus Real-World: Aplikasi Perulangan JavaScript

Membuat Dynamic HTML Table dari Data Array

// Data contoh
const employees = [
  { id: 1, name: 'John Doe', position: 'Developer', salary: 5000 },
  { id: 2, name: 'Jane Smith', position: 'Designer', salary: 4500 },
  { id: 3, name: 'Mike Johnson', position: 'Manager', salary: 6000 },
  { id: 4, name: 'Sarah Wilson', position: 'Developer', salary: 5200 }
];

// Fungsi untuk membuat tabel
function renderEmployeeTable(employees) {
  const table = document.createElement('table');
  table.border = '1';
  
  // Buat header tabel
  let tableHTML = '<tr><th>ID</th><th>Name</th><th>Position</th><th>Salary</th></tr>';
  
  // Isi data dengan perulangan
  employees.forEach(employee => {
    tableHTML += `
      <tr>
        <td>${employee.id}</td>
        <td>${employee.name}</td>
        <td>${employee.position}</td>
        <td>$${employee.salary}</td>
      </tr>
    `;
  });
  
  table.innerHTML = tableHTML;
  document.body.appendChild(table);
}

// Jalankan fungsi
renderEmployeeTable(employees);

Implementasi Search Filter

function filterEmployees(employees, searchTerm) {
  const results = [];
  
  for (let employee of employees) {
    // Cari di semua properti
    for (let key in employee) {
      if (employee[key].toString().toLowerCase().includes(searchTerm.toLowerCase())) {
        results.push(employee);
        break; // Tidak perlu cek properti lain
      }
    }
  }
  
  return results;
}

// Contoh penggunaan
const filtered = filterEmployees(employees, 'dev');
console.log(filtered); // Karyawan dengan position mengandung 'dev'

Perbandingan Performa Berbagai Jenis Perulangan

Berikut perbandingan singkat performa berbagai jenis perulangan:

Kesimpulan

Dalam Tutorial JavaScript ini, kita telah menjelajahi secara mendalam berbagai jenis perulangan yang tersedia dalam JavaScript. Mulai dari for loop yang paling fundamental, while dan do/while untuk kondisi tidak pasti, hingga metode modern seperti for...of, for...in, dan forEach. Penguasaan konsep perulangan adalah kunci untuk menjadi developer JavaScript yang kompeten. Pemahaman yang solid tentang kapan dan bagaimana menggunakan masing-masing jenis perulangan akan memungkinkan Anda menulis kode yang lebih efisien, mudah dibaca, dan mudah dipelihara.

Praktikkan contoh-contoh dalam Tutorial JavaScript ini, eksperimen dengan variasi dan skenario berbeda, dan terapkan dalam project nyata untuk semakin memantapkan pemahaman Anda tentang perulangan dalam JavaScript. Dalam Tutorial JavaScript ini Anda telah mempelajari konsep fundamental perulangan. Namun, jalan menjadi full-stack developer yang kompeten masih panjang. Jika Anda serius ingin membangun karir di bidang web development, pertimbangkan untuk mengikuti Kelas Fullstack di Codepolitan.

Program intensif ini akan membimbing Anda menguasai seluruh stack teknologi web development, dari frontend hingga backend, dengan kurikulum yang dirancang sesuai kebutuhan industri. Anda akan belajar:

JavaScript tingkat lanjut dan framework modern seperti React atau Vue
Backend development dengan Node.js
Database management dan API design
Best practices dan software engineering principles
Deployment dan DevOps basics

KelasFullstack Codepolitan cocok untuk Anda yang ingin:

Memiliki karir sebagai web developer profesional
Menguasai skill yang benar-benar dibutuhkan industri
Meningkatkan potensi penghasilan dengan kemampuan teknis yang solid
Membangun website atau aplikasi untuk mengembangkan bisnis online

Jangan berhenti di Tutorial JavaScript dasar ini—wujudkan impian Anda menjadi full-stack developer yang kompeten!

Referensi Bacaan Lanjutan:

Tags:

#TutorialJavaScript #KelasFullstack #array

What do you think?

Reactions

Baca Artikel Lainnya

Learning

RuangAI

KelasFullstack

JagoanSiber