Merhaba Webkolog Severler!
Bugün, JavaScript'in en güçlü ve esnek yapılarından ikisini, yani döngüleri ve dizileri ele alacağız. Bu ikili, tekrar eden işlemleri otomatikleştirmemizi ve veri koleksiyonlarını verimli bir şekilde yönetmemizi sağlar. Dinamik ve etkileşimli uygulamalar yazmak için bu konuları derinlemesine anlamamız çok önemli. Hazırsanız, döngülerin ritmine ve dizilerin düzenine ayak uyduralım!
Döngüler: Tekrar Eden İşlemleri Otomatikleştirme
Döngüler, belirli bir kod bloğunu belirli bir koşul sağlandığı sürece veya belirli bir sayıda tekrarlamak için kullanılır. Bu, aynı kodu tekrar tekrar yazmak yerine çok daha verimli bir yaklaşım sunar.
1. for
Döngüsü
for
döngüsü, belirli bir başlangıç değeri, bir bitiş koşulu ve her adımda yapılacak bir işlem (genellikle artırma veya azaltma) içeren klasik bir döngüdür. Sayılı tekrarlar için idealdir.
// 0'dan 10'a kadar sayıları konsola yazdıralım
for (let i = 0; i <= 10; i++) {
console.log(i);
}
2. for...in
Döngüsü
for...in
döngüsü, bir objenin numaralandırılabilir (enumerable) özelliklerini (anahtarlarını) yinelemek için kullanılır. Bu döngü, dizilerde de kullanılabilir ancak indekslerin sırasız gelme ihtimali olduğu için diziler için çok önerilmez. Genellikle obje özelliklerini gezmek için daha uygundur.
const ogrenci = {
ad: "Can",
soyad: "Yılmaz",
yas: 25
};
for (let anahtar in ogrenci) {
console.log(`${anahtar}: ${ogrenci[anahtar]}`);
}
// Çıktı:
// ad: Can
// soyad: Yılmaz
// yas: 25
3. for...of
Döngüsü (ES6+)
for...of
döngüsü, ES6 ile gelen ve yinelenebilir (iterable) nesneler (diziler, string'ler, Map, Set vb.) üzerinde doğrudan eleman değerlerini yinelemek için kullanılır. Diziler için for
döngüsünden daha modern ve okunabilir bir alternatiftir.
const meyveler = ["Elma", "Armut", "Çilek"];
for (let meyve of meyveler) {
console.log(meyve);
}
// Çıktı:
// Elma
// Armut
// Çilek
// String'ler de yinelenebilir nesnelerdir
for (let karakter of "Merhaba") {
console.log(karakter);
}
// Çıktı:
// M
// e
// r
// h
// a
// b
// a
4. while
Döngüsü
while
döngüsü, belirli bir koşul doğru olduğu sürece kod bloğunu çalıştırmaya devam eder. Kaç kez döneceğinizin önceden bilinmediği durumlarda kullanışlıdır.
let sayac = 0;
while (sayac < 5) {
console.log("Sayı: " + sayac);
sayac++;
}
// Çıktı: 0, 1, 2, 3, 4
5. do...while
Döngüsü
do...while
döngüsü, while
döngüsüne benzer ancak farkı, kod bloğunun en az bir kez çalıştıktan sonra koşulun kontrol edilmesidir. Yani, koşul yanlış olsa bile döngü bir kez çalışır.
let i = 0;
do {
console.log("Sayı (do-while): " + i);
i++;
} while (i < 0); // Koşul yanlış, ama döngü bir kez çalıştı
// Çıktı: Sayı (do-while): 0
Döngü Kontrol Deyimleri: break
ve continue
break
: Döngüyü tamamen sonlandırır ve döngüden hemen sonraki koda atlar.for (let i = 0; i < 10; i++) { if (i === 5) { break; // i 5 olduğunda döngüyü durdur } console.log(i); // Çıktı: 0, 1, 2, 3, 4 }
continue
: Döngünün o anki iterasyonunu atlar ve bir sonraki iterasyona geçer.for (let i = 0; i < 5; i++) { if (i === 2) { continue; // i 2 olduğunda bu iterasyonu atla } console.log(i); // Çıktı: 0, 1, 3, 4 }
Diziler: Veri Koleksiyonlarını Yönetme
Diziler (Arrays), JavaScript'te birden fazla değeri tek bir değişken içinde düzenli bir şekilde depolamak için kullanılan özel bir obje türüdür. Her değere bir indeks numarası atanır, bu da değerlere hızlıca erişmemizi sağlar. Diziler, sıfırdan başlar (ilk elemanın indeksi 0'dır).
Dizi Oluşturma ve Erişme
// Dizi oluşturma
let renkler = ["Kırmızı", "Mavi", "Yeşil"];
let sayilar = [10, 20, 30, 40, 50];
// Elemanlara erişme (indeks kullanarak)
console.log(renkler[0]); // "Kırmızı"
console.log(sayilar[2]); // 30
// Dizinin uzunluğu
console.log(renkler.length); // 3
Dizi Metotları
JavaScript dizilerle çalışmayı kolaylaştıran birçok yerleşik metoda sahiptir:
push()
: Dizinin sonuna bir veya daha fazla eleman ekler.meyveler.push("Mango"); console.log(meyveler); // ["Elma", "Armut", "Çilek", "Mango"]
pop()
: Dizinin sonundaki elemanı kaldırır ve bu elemanı döndürür.let sonMeyve = meyveler.pop(); console.log(sonMeyve); // "Mango" console.log(meyveler); // ["Elma", "Armut", "Çilek"]
shift()
: Dizinin başındaki elemanı kaldırır ve bu elemanı döndürür.let ilkMeyve = meyveler.shift(); console.log(ilkMeyve); // "Elma" console.log(meyveler); // ["Armut", "Çilek"]
unshift()
: Dizinin başına bir veya daha fazla eleman ekler.meyveler.unshift("Portakal", "Muz"); console.log(meyveler); // ["Portakal", "Muz", "Armut", "Çilek"]
indexOf()
: Bir elemanın dizideki ilk indeksini döndürür. Bulamazsa -1 döndürür.console.log(meyveler.indexOf("Muz")); // 1 console.log(meyveler.indexOf("Kiraz")); // -1
splice()
: Diziden eleman eklemek, çıkarmak veya değiştirmek için kullanılır. Çok güçlü bir metottur.let sehirler = ["Ankara", "İstanbul", "İzmir", "Bursa"]; sehirler.splice(1, 1); // 1. indeksten başlayarak 1 eleman sil console.log(sehirler); // ["Ankara", "İzmir", "Bursa"] sehirler.splice(1, 0, "Antalya"); // 1. indekse "Antalya" ekle, eleman silme console.log(sehirler); // ["Ankara", "Antalya", "İzmir", "Bursa"] sehirler.splice(2, 1, "Adana", "Gaziantep"); // 2. indeksten 1 eleman sil, yerine 2 yeni eleman ekle console.log(sehirler); // ["Ankara", "Antalya", "Adana", "Gaziantep", "Bursa"]
slice()
: Dizinin belirli bir kısmını yeni bir dizi olarak kopyalar. Orijinal diziyi değiştirmez.let originalArray = [1, 2, 3, 4, 5]; let newArray = originalArray.slice(1, 4); // 1. indeksten başla, 4. indekse kadar (4 dahil değil) console.log(newArray); // [2, 3, 4] console.log(originalArray); // [1, 2, 3, 4, 5] (Orijinal dizi değişmedi)
Döngüleri Dizilerle Kullanma
Döngüler ve diziler birbirini tamamlayan yapılardır. Dizilerdeki elemanları gezmek, filtrelemek veya dönüştürmek için döngüleri kullanırız.
const notlar = [85, 92, 78, 65, 95];
let toplamNot = 0;
// for döngüsü ile dizide gezinme
for (let i = 0; i < notlar.length; i++) {
toplamNot += notlar[i];
}
console.log("Toplam Not: " + toplamNot); // 415
// for...of döngüsü ile dizide gezinme (daha modern ve okunabilir)
let enYuksekNot = 0;
for (let not of notlar) {
if (not > enYuksekNot) {
enYuksekNot = not;
}
}
console.log("En Yüksek Not: " + enYuksekNot); // 95
// forEach() metodu ile dizi elemanlarını gezme
// forEach, her dizi elemanı için bir fonksiyon çalıştırır
// index ve array parametrelerini de alabilir
notlar.forEach(function(not, index) {
console.log(`${index}. sıradaki not: ${not}`);
});
// Çıktı:
// 0. sıradaki not: 85
// 1. sıradaki not: 92
// ...
Sonuç
Döngüler ve diziler, JavaScript'te veri işleme ve kontrol akışı için vazgeçilmez araçlardır. Veri koleksiyonlarını düzenlemek, üzerlerinde işlem yapmak ve uygulamanızın davranışını tekrarlayan görevlere göre uyarlamak için bu iki konuyu ustaca kullanmak, sizi daha yetenekli bir geliştirici yapacaktır.
Bol bol pratik yapın ve bu yapıları kendi projelerinizde kullanarak onlara hakim olun. Unutmayın, kodlama pratikle gelişir!
Webkolog'u takipte kalın!
Hepinize bol kodlu ve başarılı projeler dilerim!
0 yorum:
Yorum Gönder