Praktik Terbaik untuk Iterasi di JavaScript

Artikel ini menjelaskan praktik terbaik untuk iterasi di JavaScript.

YouTube Video

Praktik Terbaik untuk Iterasi di JavaScript

Di JavaScript, penggunaan perulangan for untuk iterasi adalah hal yang umum. Di sini, kami akan memberikan penjelasan rinci tentang praktik terbaik menggunakan perulangan for untuk menulis kode yang efisien dan mudah dibaca.

Pilih Struktur Perulangan yang Tepat

JavaScript menyediakan berbagai konstruksi perulangan, masing-masing cocok untuk tujuan yang berbeda.

 1// Example of a for loop
 2for (let i = 0; i < 5; i++) {
 3    console.log(i);
 4}
 5
 6// Example of a for...of loop
 7const array = [10, 20, 30];
 8for (const value of array) {
 9    console.log(value);
10}
11
12// Example of a for...in loop
13const obj = { a: 1, b: 2, c: 3 };
14for (const key in obj) {
15    console.log(`${key}: ${obj[key]}`);
16}
17
18// Example of a while loop
19let count = 0;
20while (count < 5) {
21    console.log(count);
22    count++;
23}

• Pernyataan for cocok digunakan saat jumlah iterasi sudah ditentukan sebelumnya.
• Pernyataan for...of cocok digunakan untuk memproses array dan objek yang dapat diiterasi secara ringkas.
• Pernyataan for...in digunakan untuk mengiterasi properti-properti sebuah objek. Namun, ini tidak cocok untuk array.
• Pernyataan while dan do...while digunakan untuk mengendalikan perulangan berdasarkan kondisi.

Menggunakan metode forEach dan pernyataan for...of

Ketika melakukan perulangan melalui array, menggunakan pernyataan for untuk mengakses indeks adalah umum, tetapi metode forEach atau pernyataan for...of mungkin lebih mudah dibaca.

 1// Using a standard for loop
 2const array = ["apple", "banana", "cherry"];
 3for (let i = 0; i < array.length; i++) {
 4    console.log(array[i]);
 5}
 6
 7// Using forEach
 8array.forEach(item => console.log(item));
 9
10// Using for...of
11for (const item of array) {
12    console.log(item);
13}

• Pernyataan for memungkinkan pengelolaan indeks secara eksplisit saat melakukan iterasi.
• Metode forEach menggunakan fungsi callback untuk memproses setiap elemen secara ringkas.
• Pernyataan for...of sangat mudah dibaca dan memungkinkan akses langsung ke setiap elemen dalam array.

Optimalkan Kondisi Perulangan

Karena kondisi perulangan dievaluasi berulang kali, menghindari komputasi yang tidak perlu dapat meningkatkan performa.

 1const names = ["Alice", "Bob", "Charlie"];
 2const scores = [85, 92, 78];
 3
 4// Inefficient example
 5for (let i = 0; i < Math.min(names.length, scores.length); i++) {
 6    console.log(`${names[i]} scored ${scores[i]}`);
 7}
 8
 9// Efficient example
10for (let i = 0, len = Math.min(names.length, scores.length); i < len; i++) {
11    console.log(`${names[i]} scored ${scores[i]}`);
12}

• Seperti yang ditunjukkan dalam contoh ini, menyimpan hasil perhitungan dalam variabel sebelumnya memungkinkan eksekusi loop yang lebih efisien.

 1const scores = [85, 92, 78];
 2let sum = 0;
 3let sum2 = 0;
 4
 5// Inefficient example
 6for (let i = 0; i < scores.length; i++) {
 7    sum += scores[i];
 8}
 9console.log(`Total score : ${sum}`);
10
11// Efficient example
12for (let i = scores.length - 1; i >= 0; i--) {
13    sum2 += scores[i];
14}
15console.log(`Total score : ${sum2}`);

• Seperti yang ditunjukkan dalam contoh ini, membalik kondisi terkadang bisa lebih efisien.

Mengoptimalkan Pemrosesan Loop

Karena pemrosesan loop dieksekusi secara berulang, menghindari perhitungan yang tidak perlu dapat meningkatkan kinerja.

 1const array = ["apple", "banana", "cherry"];
 2
 3// Inefficient example
 4for (let i = 0; i < 100; i++) {
 5    const element = document.querySelector("#myElement");
 6    element.textContent = `Count: ${i}`;
 7}
 8
 9// Efficient example
10const element = document.querySelector("#myElement");
11for (let i = 0; i < 100; i++) {
12    element.textContent = `Count: ${i}`;
13}

• Dalam contoh ini, dengan memindahkan metode querySelector ke luar loop, perhitungan berulang yang tidak perlu dieliminasi.

Perhatikan Lingkup Variabel

Gunakan let atau const untuk memastikan variabel di dalam perulangan memiliki lingkup yang sesuai. Karena var terbatas pada lingkup fungsi, ini dapat menyebabkan perilaku yang tidak diharapkan.

 1// Using let
 2for (let i = 0; i < 3; i++) {
 3    console.log(i);
 4}
 5
 6// Potential issue with var
 7for (var i = 0; i < 3; i++) {
 8    setTimeout(() => console.log(i), 1000); // 3, 3, 3
 9}
10
11// Using let to avoid the issue
12for (let i = 0; i < 3; i++) {
13    setTimeout(() => console.log(i), 1000); // 0, 1, 2
14}

• var memiliki cakupan fungsi, sehingga setelah loop, i adalah 3, dan semua fungsi yang dijalankan oleh setTimeout menghasilkan output 3.
• Dengan menggunakan let, i di dalam fungsi callback setTimeout merujuk pada nilai baru untuk setiap loop, sehingga yang dihasilkan adalah 0, 1, 2 seperti yang diharapkan.

Tingkatkan Keterbacaan dengan Keluar Lebih Awal

Untuk menyederhanakan pemrosesan perulangan, gunakan break dan continue dengan tepat untuk meningkatkan keterbacaan.

 1// Example using break
 2for (let i = 0; i < 10; i++) {
 3    if (i === 5) {
 4        break; // Exit the loop
 5    }
 6    console.log(i);
 7}
 8
 9// Example using continue
10for (let i = 0; i < 10; i++) {
11    if (i % 2 === 0) {
12        continue; // Skip to the next iteration
13    }
14    console.log(i);
15}

• Menggunakan break memungkinkan Anda untuk menghentikan pemrosesan loop di tengah jalan, melewati semua iterasi selanjutnya.
• Menggunakan continue memungkinkan Anda untuk melewati proses loop saat ini dan beralih ke iterasi berikutnya.

Hindari Sarang Kode yang Terlalu Dalam

Sarang kode yang terlalu dalam membuat kode sulit dibaca, jadi usahakan untuk menjaga sarang kode tetap dangkal dengan menggunakan penghentian awal atau membagi fungsi menjadi lebih kecil.

 1// Deeply nested example
 2for (let i = 0; i < 5; i++) {
 3    for (let j = 0; j < 5; j++) {
 4        if (i + j > 5) {
 5            console.log(i, j);
 6        }
 7    }
 8}
 9
10// Improved using function decomposition
11function processPairs(i) {
12    for (let j = 0; j < 5; j++) {
13        if (i + j > 5) {
14            console.log(i, j);
15        }
16    }
17}
18
19for (let i = 0; i < 5; i++) {
20    processPairs(i);
21}

• Dalam contoh ini, fungsi digunakan untuk mengurangi tingkat nesting.

Pertimbangkan penanganan kesalahan

Jika ada kemungkinan kesalahan terjadi dalam loop, terapkan penanganan kesalahan yang tepat.

 1const data = ["123", "abc", "456", "xyz"];
 2
 3// Without Error Handling
 4for (const item of data) {
 5    const result = parseInt(item);
 6    console.log(`Parsed value: ${result}`);
 7}
 8
 9// With Error Handling
10for (const item of data) {
11    try {
12        const result = parseInt(item);
13        if (isNaN(result)) {
14            throw new Error(`Invalid number: ${item}`);
15        }
16        console.log(`Parsed value: ${result}`);
17    } catch (error) {
18        console.error(`Error processing item: ${item}. ${error.message}`);
19    }
20}

• Dalam contoh ini, penanganan error dilakukan untuk memproses data yang tidak valid, mendeteksi, dan melaporkan masalah.

Poin yang perlu diperhatikan dalam pemrosesan asinkron

Saat menangani pemrosesan asinkron dalam loop, menggunakan async/await dapat menghasilkan kode yang ringkas dan intuitif.

 1const urls = ["https://example.com/1", "https://example.com/2"];
 2
 3// Proper handling of asynchronous operations
 4async function fetchUrls() {
 5    for (const url of urls) {
 6        const response = await fetch(url);
 7        const data = await response.json();
 8        console.log(data);
 9    }
10}
11
12fetchUrls();

• Kode ini secara asinkron mengambil URL dari array urls satu per satu dan memproses hasilnya dalam format JSON. Menggunakan async/await menyederhanakan operasi asinkron, secara berurutan mengambil data untuk setiap URL dan menampilkannya di konsol.

Pahami perbedaan antara pernyataan for...of dan forEach() dalam pemrosesan asinkron.

 1async function asyncTask(num) {
 2    return new Promise(resolve => {
 3        setTimeout(() => {
 4            console.log(`Task ${num} done`);
 5            resolve();
 6        }, 100);
 7    });
 8}
 9
10async function runWithForOf() {
11    console.log("Start for...of");
12    for (const num of [1, 2, 3]) {
13        await asyncTask(num);
14    }
15    console.log("End for...of");
16}
17
18async function runWithForEach() {
19    console.log("Start forEach");
20    [1, 2, 3].forEach(async num => {
21        await asyncTask(num);
22    });
23    console.log("End forEach");
24}
25
26async function executeExamples() {
27    await runWithForOf();
28    await runWithForEach();
29}
30
31executeExamples();

• Saat menangani pemrosesan asinkron dalam loop, perhatikan perbedaan dalam perilaku, seperti yang ditunjukkan dalam contoh ini, antara menggunakan for...of dengan async/await dan menggunakan forEach().

• Dengan for...of, kode dijalankan secara berurutan dan menunggu pada await di dalam loop sebelum melanjutkan ke iterasi berikutnya. Di sisi lain, forEach() menjalankan pemrosesan secara paralel.

Kesimpulan

Pernyataan for dalam JavaScript adalah alat yang sederhana namun kuat. Dengan memanfaatkan praktik terbaik yang diperkenalkan di sini, Anda dapat menulis kode yang efisien dan sangat mudah dibaca. Perhatikan pemilihan konstruksi loop yang sesuai, pengelolaan scope, penanganan kesalahan, dan tujuan menulis kode yang sangat mudah dipelihara.

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

YouTube Video