JavaScript'te Yineleme için En İyi Uygulamalar

Bu makale, JavaScript'te yineleme için en iyi uygulamaları açıklar.

YouTube Video

JavaScript'te Yineleme için En İyi Uygulamalar

JavaScript'te yineleme için genellikle for döngüleri kullanılır. Burada, for döngülerini kullanarak etkili ve okunabilir kod yazmak için en iyi uygulamaların ayrıntılı bir açıklamasını sunacağız.

Doğru Döngüleme Yapısını Seçin

JavaScript, her biri farklı amaçlar için uygun olan birden fazla döngü yapısı sağlar.

 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}

• for ifadesi, yineleme sayısının önceden belirlendiği durumlar için uygundur.
• for...of ifadesi, dizileri ve yinelenebilir nesneleri özlü bir şekilde işlemek için uygundur.
• for...in ifadesi, bir nesnenin özellikleri üzerinde gezinmek için kullanılır. Ancak diziler için uygun değildir.
• while ifadesi ve do...while ifadesi, koşullara dayalı döngüleri kontrol etmek için kullanılır.

forEach yöntemi ve for...of ifadesini kullanma

Bir dizi üzerinde döngü yapılırken, indeksi erişmek için for ifadesini kullanmak yaygındır ancak forEach yöntemi veya for...of ifadesi daha okunabilir olabilir.

 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}

• for ifadesi, yineleme sırasında açık bir şekilde indeks yönetimi sağlar.
• forEach yöntemi, her bir öğeyi özlü bir şekilde işlemek için bir geri çağırma işlevi kullanır.
• for...of ifadesi, oldukça okunabilir olup dizideki her bir öğeye doğrudan erişim sağlar.

Döngü Koşullarını Optimize Edin

Döngü koşulu tekrar tekrar değerlendirildiği için gereksiz hesaplamalardan kaçınmak performansı artırabilir.

 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}

• Bu örnekte gösterildiği gibi, hesaplama sonucunu önceden bir değişkene saklamak, döngü yürütmesini daha verimli hale getirebilir.

 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}`);

• Bu örnekte gösterildiği gibi, koşulu tersine çevirmek bazen daha verimli olabilir.

Döngü İşlemini Optimize Etme

Döngü işlemi tekrar tekrar yürütüldüğünden, gereksiz hesaplamalardan kaçınmak performansı artırabilir.

 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}

• Bu örnekte, querySelector metodunu döngü dışına taşıyarak gereksiz yinelenen hesaplamalar ortadan kaldırılır.

Değişken Alanlarına Dikkat Edin

Döngü içindeki değişkenlerin uygun bir alana sahip olmalarını sağlamak için let veya const kullanın. var fonksiyon alanıyla sınırlı olduğundan beklenmedik davranışlara neden olabilir.

 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 fonksiyon kapsamına sahiptir, bu nedenle döngüden sonra i değeri 3 olur ve setTimeout tarafından çalıştırılan tüm fonksiyonlar 3 çıktısını verir.
• let kullanıldığında, setTimeout geri çağırma fonksiyonu içerisindeki i, her döngü için yeni bir değeri ifade eder, bu yüzden beklenildiği gibi 0, 1, 2 çıktısı alınır.

Erken Çıkışlarla Okunabilirliği Artırın

Döngü işlemeyi basitleştirmek için break ve continue ifadelerini doğru şekilde kullanarak okunabilirliği artırın.

 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}

• break kullanarak döngü işlemini yarıda sonlandırabilir ve sonraki tüm yinelemeleri atlayabilirsiniz.
• continue kullanarak mevcut döngü işlemini atlayabilir ve bir sonraki yinelemeye geçebilirsiniz.

Derin İç İçe Yapılardan Kaçının

Derin iç içe yapılar kodun okunmasını zorlaştırır, bu yüzden erken dönüşler veya işlevselliği fonksiyonlara ayırarak iç içe yapıların yüzeysel olmasını hedefleyin.

 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}

• Bu örnekte, iç içe geçmeleri azaltmak için fonksiyonlar kullanılmıştır.

Hata yönetimini dikkate alın

Döngü içinde hata oluşma olasılığı varsa, uygun hata yönetimini uygulayın.

 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}

• Bu örnekte, geçersiz verilerin işlenmesi, sorunların tespit edilmesi ve raporlanması için hata yönetimi yapılmıştır.

Asenkron işlemede dikkat edilmesi gereken noktalar

Döngülerde asenkron işlemleri ele alırken, async/await kullanımı kısa ve sezgisel kodlar yazmanızı sağlar.

 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();

• Bu kod, urls dizisindeki URL'leri birer birer asenkron olarak getirir ve sonuçları JSON formatında işler. async/await kullanarak asenkron işlemler basitleştirilir, her bir URL için sıralı bir şekilde veri alınır ve konsola çıktı alınır.

Asenkron işlemede for...of deyimi ve forEach() arasındaki farkı anlayın.

 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();

• Döngülerde asenkron işlemi ele alırken, bu örnekte gösterildiği gibi async/await ile kullanılan for...of ile forEach() kullanma arasındaki davranış farklarına dikkat edin.

• for...of ile kod sıralı olarak çalışır ve bir sonraki yinelemeye geçmeden önce döngü içindeki await’te bekler. Öte yandan, forEach() işlemi paralel olarak yürütür.

Sonuç

JavaScript'teki for ifadesi, basit ama güçlü bir araçtır. Burada tanıtılan en iyi uygulamalardan yararlanarak, verimli ve yüksek derecede okunabilir kodlar yazabilirsiniz. Uygun döngü yapılarını seçmeye, kapsam yönetimine, hata yönetimine dikkat edin ve yüksek düzeyde sürdürülebilir kodlar hedefleyin.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video