Pemrosesan pengulangan dalam JavaScript

Dalam artikel ini, kami akan menjelaskan pemrosesan pengulangan dalam JavaScript.

YouTube Video

Pernyataan for dalam JavaScript

Sintaks Dasar

1for (initialization; condition; update) {
2  // Code to repeat
3}

Pernyataan for dalam JavaScript adalah sintaks untuk melakukan iterasi. Pernyataan ini secara berulang mengeksekusi blok kode yang ditentukan selama kondisi tertentu terpenuhi. Dengan menggunakan pernyataan for, proses yang sama dapat dieksekusi dengan efisien beberapa kali.

• Inisialisasi (initialization): Bagian yang dieksekusi hanya sekali sebelum memulai perulangan. Menginisialisasi variabel seperti penghitung perulangan.
• Kondisi (condition): Kondisi yang menentukan apakah perulangan akan dilanjutkan. Jika true, perulangan berlanjut; jika false, perulangan berakhir.
• Pembaruan (update): Dieksekusi pada akhir setiap perulangan untuk memperbarui penghitung perulangan.

Contoh

1for (let i = 0; i < 5; i++) {
2    console.log(i);
3}

Dalam kasus ini, i dimulai dari 0, dan perulangan berjalan selama i < 5 adalah true. i++ meningkatkan nilai i sebesar 1 pada setiap iterasi dalam loop. Sebagai hasilnya, angka dari 0 hingga 4 ditampilkan.

Lingkup Penghitung Perulangan

Deklarasikan atau inisialisasi variabel pada bagian inisialisasi dalam pernyataan for. Variabel yang dideklarasikan di sini hanya berlaku di dalam perulangan.

1for (let i = 0; i < 3; i++) {
2    console.log(i); // Outputs 0, 1, 2
3}
4console.log(i);  // ReferenceError

• Seperti yang ditunjukkan dalam contoh ini, merujuk ke variabel di luar pernyataan for akan menghasilkan kesalahan.

Perulangan Tak Terbatas

Menetapkan sebuah kondisi yang tidak mengakhiri perulangan akan menghasilkan perulangan tak terbatas. Hal ini dapat membebani browser atau sistem, jadi diperlukan kehati-hatian.

1for (;;) {
2    console.log("Infinite loop");
3    break; // Exits the infinite loop with break
4}

Array dan Pernyataan for

Merupakan hal yang umum menggunakan pernyataan for bersama dengan array. Ini praktis untuk memproses setiap elemen dari array.

Contoh

1let fruits = ["apple", "banana", "cherry"];
2
3for (let i = 0; i < fruits.length; i++) {
4    console.log(fruits[i]);
5}
6// Outputs "apple", "banana", "cherry"

Dengan cara ini, Anda dapat memproses setiap elemen array menggunakan indeks.

Konstruksi Loop Lainnya

Pernyataan for...of

Pernyataan for...of digunakan untuk objek yang dapat diiterasi seperti array dan string.

1let fruits = ["apple", "banana", "cherry"];
2
3for (let fruit of fruits) {
4    console.log(fruit);
5}
6// Outputs "apple", "banana", "cherry"

Ini memungkinkan Anda memproses setiap elemen tanpa menggunakan indeks.

Pernyataan for...in

Pernyataan for...in digunakan untuk mengiterasi properti dari sebuah objek.

1let person = { name: "John", age: 30, city: "Tokyo" };
2
3for (let key in person) {
4    console.log(key + ": " + person[key]);
5}
6// Outputs "name: John", "age: 30", "city: Tokyo"

Dengan cara ini, Anda dapat melakukan operasi pada setiap elemen menggunakan kunci.

Ringkasan

• Pernyataan for adalah konstruksi loop dengan tiga bagian: inisialisasi, kondisi, dan pembaruan.
• Anda dapat mengontrol perilaku loop menggunakan break atau continue.
• Ketika digabungkan dengan array atau objek, elemen atau properti dapat diproses secara efisien.

Pernyataan while dalam JavaScript

Sintaks Dasar

1while (condition) {
2    // Code that repeats while the condition is true
3}

Pernyataan while dalam JavaScript adalah struktur loop yang menjalankan operasi berulang selama kondisi yang ditentukan adalah true. Mirip dengan pernyataan for, pernyataan while hanya menentukan kondisi.

• Kondisi: Tulis ekspresi kondisi yang menentukan apakah akan melanjutkan loop. Loop berlanjut saat true dan berakhir ketika menjadi false.

Contoh

1let i = 0;
2
3while (i < 5) {
4    console.log(i);
5    i++;
6}
7console.log(i);  // 5

Dalam contoh ini, loop dimulai dengan variabel i pada 0 dan dieksekusi selama i < 5 adalah true. Pada setiap iterasi loop, i ditambah 1, dan ketika i menjadi 5, kondisi berubah menjadi false dan loop berakhir. Sebagai hasilnya, pernyataan while menampilkan dari 0 hingga 4.

Berbeda dengan pernyataan for, pada pernyataan while, inisialisasi dan pembaruan variabel ditulis sebagai pernyataan terpisah. Anda juga dapat merujuk ke variabel setelah pernyataan while. Dalam kasus ini, 5 ditampilkan setelah pernyataan while selesai.

Perulangan Tak Terbatas

Jika kondisinya selalu true, loop tak berujung terjadi dan tidak berakhir. Loop tak berujung harus dihindari, tetapi jika digunakan dengan sengaja, Anda dapat menghentikan loop dengan pernyataan break.

Contoh

1while (true) {
2    console.log("Infinite loop");
3    break;  // Ends the loop with `break`
4}

Memproses Array dengan Loop while

Anda juga dapat memproses array dengan pernyataan while.

Contoh

1let fruits = ["apple", "banana", "cherry"];
2let i = 0;
3
4while (i < fruits.length) {
5    console.log(fruits[i]);
6    i++;
7}
8// Outputs "apple", "banana", "cherry"

Pernyataan do...while

Sintaks Dasar

1do {
2    // Code that is executed at least once
3} while (condition);

Pernyataan do...while, varian dari pernyataan while, memeriksa kondisi setelah menjalankan loop setidaknya sekali. Sementara pernyataan while memeriksa kondisi terlebih dahulu, pernyataan do...while menjalankan proses sekali sebelum memverifikasi kondisi.

Contoh

1let i = 0;
2
3do {
4    console.log(i);
5    i++;
6} while (i < 5);

Dalam contoh ini, i ditampilkan dari 0 hingga 4. Pernyataan do...while berbeda dari pernyataan while karena selalu dieksekusi sekali, bahkan jika kondisinya false.

Ringkasan

• Pernyataan while digunakan untuk menjalankan kode secara berulang selama kondisinya true.
• Berhati-hatilah terhadap loop tak berujung, tetapi Anda dapat mengontrol alur loop menggunakan break dan continue.
• Pernyataan do...while berguna ketika Anda ingin menjalankan loop setidaknya sekali.

break dan continue

Anda dapat menggunakan break dan continue di dalam loop.

• break digunakan untuk mengakhiri loop lebih awal.
• continue melewati iterasi saat ini dan melanjutkan ke iterasi berikutnya.

Contoh break

 1for (let i = 0; i < 10; i++) {
 2    if (i === 5) {
 3        break;  // Exits the loop when i is 5
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 2, 3, 4
 8
 9let i = 0;
10
11while (i < 10) {
12    if (i === 5) {
13        break;  // Ends the loop when i is 5
14    }
15    console.log(i++);
16}
17// Outputs 0, 1, 2, 3, 4

Dalam kasus ini, break dieksekusi ketika i menjadi 5. Sebagai hasilnya, angka dari 0 hingga 4 ditampilkan.

Contoh continue

 1for (let i = 0; i < 5; i++) {
 2    if (i === 2) {
 3        continue;  // Skips when i is 2
 4    }
 5    console.log(i);
 6}
 7// Outputs 0, 1, 3, 4
 8
 9let i = 0;
10while (i < 5) {
11    i++;
12    if (i === 3) {
13        continue;  // Skips when i is 3
14    }
15    console.log(i);
16}
17// Outputs 1, 2, 4, 5

Dalam kasus ini, continue dieksekusi ketika i bernilai 2. Akibatnya, angka selain 2 ditampilkan.

Loop Bersarang dalam JavaScript

Dalam pemrograman JavaScript, loop bersarang adalah struktur di mana satu loop berada di dalam loop lainnya. Loop semacam itu sangat efektif ketika algoritma atau proses tertentu melibatkan beberapa dimensi atau lapisan. Misalnya, memproses array multidimensi dengan array di dalam array adalah kasus yang umum.

Di sini, kami akan menjelaskan struktur dasar loop bersarang, contoh penggunaan, kehati-hatian, dan pertimbangan optimasi.

Struktur Dasar Loop Bersarang

Struktur dasar dari loop bersarang adalah bentuk di mana satu atau lebih loop berada di dalam loop lainnya. Setiap kali loop luar dieksekusi sekali, loop dalam akan dieksekusi sebanyak itu.

Berikut adalah contoh dasar dua loop bersarang.

 1for (let i = 0; i < 3; i++) {
 2    console.log(`Outer loop iteration: ${i}`);
 3
 4    for (let j = 0; j < 2; j++) {
 5        console.log(`  Inner loop iteration: ${j}`);
 6    }
 7}
 8// Output:
 9// Outer loop iteration: 0
10//   Inner loop iteration: 0
11//   Inner loop iteration: 1
12// Outer loop iteration: 1
13//   Inner loop iteration: 0
14//   Inner loop iteration: 1
15// Outer loop iteration: 2
16//   Inner loop iteration: 0
17//   Inner loop iteration: 1

Pada kode di atas, i dihitung di loop luar, dan j dihitung di loop dalam. Setiap kali loop luar dieksekusi sekali, loop dalam dieksekusi dua kali.

Contoh Praktis dari Loop Bersarang

Loop bersarang sangat berguna untuk menangani array multidimensional. Sebagai contoh, saat memproses array dua dimensi, Anda perlu menangani baris (loop luar) dan kolom (loop dalam).

Dalam contoh berikut, kita menangani array dua dimensi dan mencetak setiap elemen.

 1const matrix = [
 2  [1, 2, 3],
 3  [4, 5, 6],
 4  [7, 8, 9]
 5];
 6
 7for (let row = 0; row < matrix.length; row++) {
 8    for (let col = 0; col < matrix[row].length; col++) {
 9        console.log(`Element at [${row}][${col}] is: ${matrix[row][col]}`);
10    }
11}
12// Output:
13// Element at [0][0] is: 1
14// Element at [0][1] is: 2
15// Element at [0][2] is: 3
16// Element at [1][0] is: 4
17// Element at [1][1] is: 5
18// Element at [1][2] is: 6
19// Element at [2][0] is: 7
20// Element at [2][1] is: 8
21// Element at [2][2] is: 9

Dengan cara ini, menggunakan loop bersarang memungkinkan akses ke setiap elemen dari array dua dimensi.

Catatan

Ada beberapa hal yang harus diperhatikan saat menggunakan loop bersarang.

1. Masalah Kinerja

   Saat loop bersarang semakin dalam, waktu eksekusi meningkat tajam. Sebagai contoh, jika loop luar dieksekusi 100 kali dan loop dalam 100 kali, total 10.000 operasi dilakukan. Oleh karena itu, jika terdapat banyak iterasi loop, Anda harus mempertimbangkan optimasi loop untuk efisiensi.

2. Penerapan pada Algoritma Kompleks

   Loop bersarang sangat kuat, tetapi saat pemrosesan menjadi kompleks, kode dapat menjadi sulit untuk dipahami. Oleh karena itu, untuk menjaga keterbacaan kode, penting untuk mengatur pemrosesan dengan komentar dan fungsi yang tepat.

Pertimbangan Optimasi

Saat menggunakan loop bersarang, optimasi berikut dapat dipertimbangkan.

1. Penghentian Loop Dini

   Jika kondisi tertentu terpenuhi di dalam loop, Anda dapat menggunakan pernyataan break untuk keluar dari loop. Ini dapat menghindari loop yang tidak perlu dan meningkatkan kinerja.

1for (let i = 0; i < 5; i++) {
2    for (let j = 0; j < 5; j++) {
3        if (i + j > 5) {
4            break;
5        }
6        console.log(`i: ${i}, j: ${j}`);
7    }
8}

2. Pindahkan Perhitungan ke Luar

   Daripada melakukan perhitungan yang sama di dalam loop setiap kali, Anda dapat melakukannya sekali di luar loop dan menggunakan hasilnya untuk membuat proses lebih efisien.

 1let array = [1, 2, 3, 4, 5];
 2
 3// Inefficient example (calculating every time)
 4for (let i = 0; i < array.length; i++) {
 5    for (let j = 0; j < array.length; j++) {
 6        let sum = array[i] + array[j];
 7        console.log(sum);
 8    }
 9}
10
11// Efficient example (calculating outside)
12let arrayLength = array.length;
13for (let i = 0; i < arrayLength; i++) {
14    for (let j = 0; j < arrayLength; j++) {
15        let sum = array[i] + array[j];
16        console.log(sum);
17    }
18}

Ringkasan

Loop bersarang sangat berguna untuk menangani struktur data dan algoritma yang kompleks dalam JavaScript. Namun, jika tidak digunakan dengan benar, mereka dapat menyebabkan penurunan kinerja dan mengurangi keterbacaan kode. Untuk menggunakan loop bersarang secara efektif, penting untuk mengupayakan pengoptimalan loop dan pengorganisasian kode, serta mengambil pendekatan yang sesuai tergantung pada situasi.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video