Tüm blog yazıları

JavaScript'te İç İçe Döngüler ve Çok Boyutlu Dizilerle Çalışmak

Programlamada bazı işlemleri tekrar tekrar yapmamız gerekir. Örneğin, bir liste içindeki her elemanı ekrana yazdırmak, her öğrenciyi yoklamak ya da bir tabloyu satır satır işlemek gibi. Bu tür tekrarlayan işlemleri yapmak için döngüler (loops) kullanılır. Jav

eminbasbayan4 dk okuma
JavaScript'te İç İçe Döngüler ve Çok Boyutlu Dizilerle Çalışmak

Programlamada bazı işlemleri tekrar tekrar yapmamız gerekir. Örneğin, bir liste içindeki her elemanı ekrana yazdırmak, her öğrenciyi yoklamak ya da bir tabloyu satır satır işlemek gibi. Bu tür tekrarlayan işlemleri yapmak için döngüler (loops) kullanılır. JavaScript'te en sık kullanılan döngülerden biri for döngüsüdür. Bu makalede, for döngüsünün bir başka for döngüsü içinde nasıl kullanıldığını, yani iç içe döngüleri (nested loops) ve çok boyutlu diziler üzerinde dönmeyi öğreneceğiz.

İç İçe Döngüler (Nested Loops) Nedir?

Basit bir for döngüsü, belirli bir sayıda işlemi tekrarlamak için kullanılır. Ancak bazen, bir döngünün her bir adımı için başka bir döngünün tam turunu çalıştırmak gerekir. Bu durumda döngülerin birbirinin içine yazılması gerekir. İşte buna iç içe döngü denir.

Şöyle düşünelim: Bir okulun 4 katı olsun. Her katta 5 sınıf var. Her katı ve sınıfı ayrı ayrı yazdırmak istersek, iki ayrı for döngüsü kullanmamız gerekir.

jsx
for (let kat = 1; kat <= 4; kat++) {
  console.log("Kat:", kat);

  for (let sinif = 1; sinif <= 5; sinif++) {
    console.log("  Sınıf:", sinif);
  }
}

Bu kod parçası şunu yapar:

  • Önce 1. katı yazdırır, sonra 1. kat için 5 sınıfı tek tek yazdırır.
  • Sonra 2. kata geçer, yine 5 sınıf yazdırır.
  • Bu işlem 4 kat boyunca devam eder.

Toplamda 4 kat × 5 sınıf = 20 kez iç döngü çalışır. İç içe döngülerde işlem sayısı, dış döngünün çalıştığı sayı ile iç döngünün çalıştığı sayının çarpımı kadardır.

Değişken İsimlerine Dikkat

İç içe döngülerde genellikle i, j, k gibi harfler kullanılır. Ama bunlar bazen karışıklığa yol açabilir. Yukarıdaki örnekte daha okunabilir olması için kat ve sinif gibi açıklayıcı isimler kullandık. Bu, kodun anlaşılmasını kolaylaştırır.

Ama bazen geliştiriciler şunları da görebilir:

jsx
for (let i = 0; i < 4; i++) {
  for (let j = 0; j < 5; j++) {
    console.log("i:", i, "j:", j);
  }
}

Bu kullanım da doğrudur, ama hangi değişkenin neyi temsil ettiğini bilmek zamanla zorlaşabilir.

Çok Boyutlu Dizilerle Döngü Kullanmak

Bazı durumlarda elimizde sadece tek bir liste (dizi) değil, dizilerin içinde başka diziler de olabilir. Buna çok boyutlu dizi denir. Örneğin, bir sınav salonundaki oturma düzeni şu şekilde tutulabilir:

jsx
const salonDuzeni = [
  ["Ahmet", "Burcu", "Cem"],
  ["Deniz", "Emre", "Feyza"],
  ["Gizem", "Hakan", "İlayda"]
];

Burada her alt dizi, bir sıradaki öğrencileri temsil eder. Bu yapıyı kullanarak tüm öğrencilerin isimlerini yazdırmak için iki katmanlı döngü kullanmamız gerekir.

Dış Döngü: Sıraları döner

İç Döngü: Her sıradaki öğrencileri döner

jsx
for (let sira = 0; sira < salonDuzeni.length; sira++) {
  const mevcutSira = salonDuzeni[sira];
  console.log("Sıra", sira + 1);

  for (let ogrenci = 0; ogrenci < mevcutSira.length; ogrenci++) {
    console.log("  Öğrenci:", mevcutSira[ogrenci]);
  }
}

Yukarıdaki kodun çıktısı şuna benzer:

metin
Sıra 1
  Öğrenci: Ahmet
  Öğrenci: Burcu
  Öğrenci: Cem
Sıra 2
  Öğrenci: Deniz
  Öğrenci: Emre
  Öğrenci: Feyza
Sıra 3
  Öğrenci: Gizem
  Öğrenci: Hakan
  Öğrenci: İlayda

Bu örnekte:

  • Dış döngü sira değişkeniyle sıraları döner.
  • İç döngü ogrenci değişkeniyle her sıradaki öğrencileri tek tek ekrana yazar.

Neden Bu Kadar Çok Döngü Var?

İç içe döngüler genellikle:

  • Tabloları veya çizelgeleri işlerken
  • Satır-sütun yapısına sahip verilerle çalışırken
  • Çok katmanlı yapıları işlerken (örneğin: oyun haritaları, oturma düzenleri)

kullanılır.

Ama dikkat: İç içe döngüler fazla kullanıldığında işlem sayısı hızla artar. Bu da programın yavaş çalışmasına neden olabilir. Bu yüzden gerektiğinde kullanılmalı ve dikkatle tasarlanmalıdır.

Anlamayı Kolaylaştırmak İçin Tavsiye

İç içe döngüler ve çok boyutlu diziler ilk başta karmaşık gelebilir. Aşağıdaki yöntemlerle daha iyi öğrenebilirsin:

  1. Her adımda hangi değişkenin ne olduğunu yaz.
  2. Bir tablo yap: i, j, row, row[j] gibi değerleri sırayla not al.
  3. Küçük örneklerle bol bol deneme yap.
  4. Her döngü turunda ne olduğunu kağıt üzerinde düşünerek çalış.

Sonuç

JavaScript'te döngüler bir işlemi tekrar tekrar yapmamızı sağlar. İç içe döngüler ise özellikle çok boyutlu veri yapılarıyla çalışırken çok kullanışlıdır. Ancak dikkatli kullanılmaları gerekir çünkü işlem sayısı hızlıca artabilir. İç içe döngülerle pratik yaptıkça, karmaşık gibi görünen çok boyutlu dizilerle bile rahatça çalışabileceğini göreceksin.

Unutma, bu konular zamanla daha da netleşir. Şu an zorlanıyor olman çok normal. Denemeye ve uygulamaya devam et!

JavaScript Classes ile pratik uygulamalar, metotlar arası iletişim ve gerçek dünya kod örnekleri
JavaScript Dersleri9 dk okuma

JavaScript Classes - Pratik Uygulamalar

JavaScript class'ları ile pratik uygulamalara geçin! Metotlar arası iletişimden constructor'da metot çağırmaya, kod tekrarını azaltmaktan gerçek dünya senaryolarına kadar class kullanımının inceliklerini keşfedin. Kendi alışveriş sepeti örneğinizle bilginizi pekiştirin.

Yazıyı oku
JavaScript class yapısını gösteren bir kod örneği, ES6 ile modern nesne oluşturma
JavaScript Dersleri9 dk okuma

JavaScript Classes

ES6 ile JavaScript'e gelen class yapısı sayesinde nesne oluşturmak artık çok daha kolay ve düzenli! Constructor function karmaşasından kurtulup, okunabilir ve yönetilebilir kodlar yazmak isteyenler için modern JavaScript'in temel taşı olan class'ları tüm detaylarıyla keşfedin. Bu rehberle nesne şabl

Yazıyı oku
JavaScript kodunda Constructor Function ve new keyword'ü ile nesne oluşturma örnekleri
JavaScript Dersleri8 dk okuma

Constructor Functions ve new Keyword

Factory Function'ların hafıza israfı sorununa Constructor Function'lar ve new keyword'ü ile son verin! Metotları paylaştırarak JavaScript objelerini daha verimli nasıl oluşturacağınızı, new'in perde arkasında neler yaptığını ve prototype sisteminin gücünü bu rehberde keşfedin.

Yazıyı oku

Çerez tercihlerin

Platformun çalışması için zorunlu çerezler kullanıyoruz. İzin verirsen anonim kullanım verilerini ölçüyoruz. Ayrıntıları incele