Setiap Jenis Loop JavaScript Dijelaskan: [With Codeblocks and Examples]

JavaScript adalah salah satu bahasa pemrograman yang paling banyak digunakan. Pengembang yang ingin menjadi insinyur JavaScript harus mempelajari dasar-dasar loop, tipenya, dan cara kerjanya.

Loop JavaScript adalah alat yang digunakan untuk melakukan tugas berulang berdasarkan kondisi tertentu. Di sisi lain, ‘iterate’ adalah istilah umum, yang berarti pengulangan dalam konteks perulangan. Sebuah loop akan terus mengulang hingga kondisi berhenti terpenuhi.

Untuk memahaminya dengan lebih baik, Anda dapat menganggapnya sebagai permainan terkomputerisasi di mana Anda diperintahkan untuk mengambil X langkah ke utara dan kemudian Y langkah ke kiri.

Anda dapat mewakili mengambil 7 langkah ke utara sebagai;

for (let step = 0; step < 7; step++) {

  // Runs 7 times, with values of steps 0 through 6.

  console.log("Walking northwards one step");

}

ketika blok kode di atas dijalankan, Anda akan mendapatkan ini;

Mengapa loop biasanya digunakan?

• Lakukan tugas berulang: Anda dapat menggunakan loop untuk menjalankan instruksi hingga kondisi tertentu terpenuhi.
• Ulangi objek atau larik: Dengan loop, Anda dapat mengulang properti objek atau elemen larik, memungkinkan Anda melakukan tindakan tertentu untuk setiap properti atau elemen.
• Filter data: Anda dapat menggunakan loop untuk memfilter data berdasarkan kondisi tertentu.

Loop JavaScript tersedia dalam berbagai bentuk; Untuk, Sementara, Lakukan…Sementara, Untuk…dari, dan Untuk…di. Mari kita jelajahi secara rinci dan tunjukkan cara kerja masing-masing.

Untuk putaran

Perulangan for akan berulang hingga kondisi tertentu bernilai benar. A for loop memiliki tiga ekspresi opsional, diikuti dengan blok kode.

for (initialization; condition; finalExpression) {

  // code

}

• Ekspresi inisialisasi muncul sebelum loop pertama dijalankan. Ekspresi ini biasanya menginisialisasi satu atau lebih penghitung.
• Ekspresi kondisi diperiksa setiap kali sebelum for loop berjalan. Kode dalam loop atau pernyataan dijalankan setiap kali ekspresi bernilai benar. Di sisi lain, perulangan berhenti ketika ekspresi bernilai false. Namun, jika ekspresi dihilangkan, ekspresi akan dievaluasi menjadi true secara otomatis.
• Ekspresi akhir dijalankan setelah setiap iterasi loop. Ekspresi ini sebagian besar digunakan untuk menambah penghitung.

Anda bisa menggunakan {}, memblokir pernyataan, untuk mengelompokkan dan mengeksekusi beberapa pernyataan. Jika Anda ingin keluar dari loop lebih awal sebelum ekspresi kondisi bernilai false, gunakan pernyataan break.

Contoh for loop dengan kode

Gunakan for loop untuk mengulang;

for (let i = 0; i < 7; i++) {

  console.log(i);

}

Di blok kode ini;

• Variabel i diinisialisasi ke nol (misalkan i=0).
• Syaratnya adalah i harus kurang dari 7 (i=7).
• Perulangan akan berulang kali mengulang jika nilai i kurang dari 7 (i<7>.
• Iterasi akan menambahkan 1 ke nilai i setelah setiap iterasi (++1).

Gunakan pernyataan break untuk keluar dari loop sebelum kondisi bernilai false;

for (let i = 1; i < 11; i += 2) {

  if (i === 9) {

    break;

  }

  console.log('Total developers: ' + i);

}

• Blok kode beriterasi dari 1 hingga 10 (i<11).
• Loop menginisialisasi variabel i dengan nilai 1 (misalkan i = 1).
• Kondisi pengulangan akan terus dijalankan jika nilai i kurang dari 11 (i < 11).
• Nilai i bertambah 2 setelah setiap iterasi (i += 2).

Pernyataan if mengevaluasi apakah nilai i=9. Jika kondisinya benar, pernyataan break dieksekusi, dan loop berakhir.

(gambar)

Untuk… dari loop

Perulangan for…of mengiterasi objek yang dapat diubah seperti Map, Array, Arguments, dan Set. Loop ini memanggil pengait iterasi khusus dengan pernyataan yang dijalankan untuk nilai setiap properti yang berbeda.

Struktur dasar dari for…loop adalah;

for (variable of object)

  statement

Contoh for…of loop dalam aksi

For…of loop mengulangi array

const frontendLanguages = [ "HTML", "CSS", "JavaScript" , “React”];

for (let i of frontendLanguages) {

  console.log(i);

}

Dalam kode ini;

• Kami mendefinisikan array bernama frontendLanguages
• Array memiliki tiga elemen; “HTML”, “CSS”, “JavaScript” dan “Bereaksi”.
• for…of loop berulang pada setiap elemen di frontendLanguages.
• i di blok kode mengambil nilai setiap elemen selama setiap iterasi dan nilai yang dicetak di konsol.

For…of loop berulang pada sebuah Set

const s = new Set();

s.add(2);

s.add("grey");

for (let n of s) {

  console.log(n);

}

Dalam blok kode ini;

• Kami mendeklarasikan variabel s, yang kami tetapkan ke Set baru menggunakan konstruktor Set().
• Dua elemen ditambahkan ke kode menggunakan metode add()
• for….of mengulangi objek elemen.
• Loop menetapkan elemen saat ini ke n sebelum mengeksekusi pernyataan console.log(n).

For…of loop iterasi di atas Peta

const m = new Map();

m.set(4, "rabbit");

m.set(6, "monkey");

m.set(8, "elephant");

m.set(10, "lion");

m.set(12, "leopard");

for (let n of m) {

  console.log(n);

}

Di blok kode ini;

• Kami menggunakan konstruktor Map() untuk membuat objek Peta baru.
• Variabel m dideklarasikan.
• Menggunakan metode .set(), kami menambahkan lima pasangan kunci-nilai.
• A for…of loop mengiterasi elemen objek Map m.

Untuk… dalam lingkaran

A for…in loop digunakan untuk mengulangi properti objek. Struktur dasar dari for…in loop adalah;

for (property in object) {

  // code

}

Anda dapat menggunakan for…in loop untuk mengulangi array dan objek seperti array.

const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };

for (const vegetable in shoppingList) {

  console.log(vegetable);

}

Di blok kode ini;

• Kami memperkenalkan objek JavaScript dan menamainya shoppingList.
• Kami menggunakan for loop untuk mengulangi setiap properti di daftar belanja menggunakan operator in.
• Di setiap iterasi, loop memberikan nama properti saat ini di shoppingList.

Ketika

Perulangan while mengevaluasi suatu kondisi, jika ternyata benar, blok kode dijalankan. Namun, jika kondisi salah, perulangan berakhir, dan blok kode tidak akan dieksekusi.

Ini adalah struktur dasar dari while loop;

while (condition)

    Statement

Kondisi pengujian harus terjadi sebelum eksekusi pernyataan di loop. Anda bisa mengeksekusi beberapa pernyataan menggunakan {} atau memblokir pernyataan.

Contoh while loop dalam aksi

let n = 0;

while (n < 9) {

  console.log(n);

  n++;

}

Dalam kode ini;

• Variabel n diinisialisasi dengan nilai nol (misalkan n=0).
• Loop akan dieksekusi selama nilai n kurang dari 9 (n<9)
• Nilai n ditampilkan di konsol dan bertambah 1 setelah setiap iterasi (n++)
• Kode akan berhenti dieksekusi pada 8.

Lakukan … While Loop

Perulangan do…while diulang sampai kondisi tertentu bernilai false.

Struktur umum dari pernyataan do…while adalah;

do

  statement

while (condition);

Pernyataan dijalankan sekali tetapi sebelum memeriksa kondisi. Pernyataan akan dijalankan jika kondisi benar. Namun, jika kondisi yang dievaluasi salah, eksekusi akan berhenti, dan kontrol diteruskan ke pernyataan setelah do..while. Kode dalam do…while loop dijamin berjalan setidaknya sekali, bahkan jika kondisi bernilai true.

Contoh do… while

let n = 0;

do {

  n += 1;

  console.log(n);

} while (n < 7);

Dalam kode ini;

• Kami memperkenalkan variabel n dan menetapkan nilai awalnya sebagai 0 (biarkan n = 0).
• Variabel kami n memasuki do… while loop di mana nilainya bertambah 1 setelah setiap iterasi (n+=1)
• Nilai n dicatat.
• Perulangan akan terus dijalankan selama nilai n kurang dari 7 (n<7).

Saat Anda menjalankan kode ini, konsol akan menampilkan nilai n mulai dari 1 hingga 7 saat loop dieksekusi sebanyak 7 kali.

Lingkaran Bersarang

Sebuah loop bersarang adalah situasi dimana kita memiliki sebuah loop di dalam sebuah loop. Misalnya, kita dapat memiliki for loop yang bersarang di dalam for loop lainnya.

for (let outer = 0; outer < 5; outer += 2) {

  for (let inner = 0; inner < 6; inner += 2) {

    console.log(`${outer}-${inner}`);

  }

}

• Ada dua variabel; outer dan inner dan keduanya diinisialisasi dengan nilai nol.
• Kedua variabel bertambah 2 setelah setiap iterasi
• Loop luar dan dalam masing-masing diulang tiga kali.

pernyataan kontrol loop

Pernyataan kontrol loop, kadang-kadang dikenal sebagai “pernyataan lompat” mengganggu aliran normal suatu program. Istirahat dan lanjutkan adalah contoh pernyataan kontrol loop.

Pernyataan istirahat

Pernyataan break mengakhiri perulangan dengan segera, bahkan jika kondisinya belum terpenuhi.

for (let n = 1; n <= 26; n++) {

  if (n === 13) {

    console.log("Loop stops here. We have reached the break statement");

    break;

  }

  console.log(n);

}

Kode yang diberikan akan muncul sebagai;

Lanjutkan pernyataan

Pernyataan Continue digunakan untuk melewatkan blok kode tertentu dan melakukan iterasi untuk loop baru.

for (let n = 0; n <= 10; n++) {

  if (n === 5) {

    continue;

  }

  console.log(n);

}

Kode yang diberikan akan muncul sebagai;

Kesimpulan

Di atas adalah loop umum yang akan Anda temui di vanilla JavaScript dan framework/library-nya. Seperti yang disorot, setiap jenis loop memiliki kasus penggunaan dan perilaku yang berbeda. Jika Anda memilih jenis loop yang salah, kemungkinan besar Anda akan mengalami bug, dan kode Anda kemungkinan besar akan menampilkan perilaku yang tidak diharapkan.

Jika Anda berurusan dengan kerangka kerja atau pustaka JavaScript, selalu periksa dokumentasinya dan gunakan loop bawaan.