Mövzunu Açan
#0
JavaScript Döngülerini Profesyonel Kullanma
JavaScript dünyasında döngüler, kod tekrarını azaltmanın, veri yapılarını işlemenin ve algoritmaları hayata geçirmenin temel taşıdır; bu konuda hepimiz hemfikirizdir herhalde. Ama mesele sadece bir döngü yazıp "çalışıyor" demek değil, onu doğru bağlamda, en verimli, en okunabilir ve en modern şekilde kullanmak... İşte profesyonellik tam da burada başlıyor. Bir projenin ölçeği büyüdükçe, ekibinizdeki diğer geliştiricilerin kodunuzu anlaması ve sürdürmesi kritik hale geliyor. Hangi döngüyü nerede, neden tercih ettiğiniz, kodunuzun kalitesini doğrudan etkiliyor, biliyorsunuz değil mi?
Klasik Döngüler: for, while, do...while
JavaScript'e ilk adım atan herkesin tanıştığı bu klasik döngüler, hala birçok senaryoda vazgeçilmez. for döngüsü, belirli bir sayıda tekrar etmesi gereken işlemler veya bir dizinin elemanlarını indeks bazlı kontrol etmeniz gerektiğinde en uygun seçeneklerden biri. Örneğin, bir HTML tablosu oluştururken veya bir dizinin belirli bir aralığındaki elemanları işlerken... Sayacınız, koşulunuz ve artırma/azaltma işleminiz tek bir satırda net bir şekilde tanımlanmış olur. Bu, özellikle C tabanlı dillerden gelenler için oldukça tanıdıktır.
Peki ya while döngüsü? Bu, koşul doğru olduğu sürece çalışmaya devam eden bir yapı. Ne zaman kullanırız? Genellikle, kaç kez döneceğini önceden bilmediğiniz, bir koşulun gerçekleşmesini beklediğiniz durumlarda. Örneğin, bir kullanıcıdan geçerli bir giriş alana kadar tekrar tekrar sormak veya bir veritabanı sorgusundan belirli bir sonuç gelene kadar beklemek gibi... Sonsuz döngü tehlikesine karşı her zaman dikkatli olmak gerekir, yoksa tarayıcınız "bu sayfa yanıt vermiyor" hatasıyla sizi selamlayabilir.
do...while ise, koşul ne olursa olsun en az bir kere çalışmasını istediğiniz durumlarda devreye girer. Yani, önce işlemi yapar, sonra koşulu kontrol eder. Bu, kullanıcı girişlerini ilk denemede kontrol etmek ve eğer hatalıysa tekrar sormak gibi senaryolarda kullanışlıdır. Ama kabul edelim, diğerlerine göre çok daha az karşımıza çıkar, değil mi?
Nesne ve Dizi İterasyonları: for...in ve for...of
Modern JavaScript ile birlikte hayatımıza giren for...in ve for...of döngüleri, iterasyon süreçlerine farklı bir boyut kazandırdı. for...in, bir nesnenin numaralandırılabilir özelliklerinin (property) anahtarları üzerinde döner. Eski tip JavaScript'te nesnelerin özelliklerini gezmek için sıkça kullanılırdı. Ancak, prototip zincirinden gelen özellikleri de listeleyebileceği için, özellikle de dizilerle kullanıldığında beklenmedik sonuçlara yol açabilir. Bu yüzden, bir nesne üzerinde dönerken hasOwnProperty metodunu kullanarak sadece nesnenin kendi özelliklerini hedeflemek iyi bir uygulama, yoksa başınız ağrıyabilir...
for...of ise tamamen farklı bir hayvan. Bu döngü, Iterable protokolünü uygulayan veri yapıları (diziler, stringler, Map, Set vb.) üzerinde doğrudan değerler üzerinde döner. Yani size indeks veya anahtar yerine doğrudan elemanın kendisini verir. Bu, diziler üzerinde iterasyon yaparken hem daha güvenli hem de daha okunabilir bir yöntemdir. for...in'in dizi indekslerini string olarak vermesi gibi tuhaflıkları yoktur. Bir dizi üzerinde gezinirken, for...of genellikle for döngüsüne göre daha temiz bir alternatiftir.
Fonksiyonel Yaklaşım: Array İterasyon Metotları
JavaScript'i modern kılan ve geliştirici deneyimini bambaşka bir seviyeye taşıyan en güçlü araçlardan biri de dizilerin prototipine eklenmiş iterasyon metotlarıdır. forEach, map, filter, reduce, some, every gibi metotlar, döngüleri çok daha deklaratif, okunabilir ve yan etkilerden arınmış bir şekilde yazmamızı sağlar. Bu metotlar, özellikle fonksiyonel programlama prensiplerini benimseyenler için altın değerindedir.
forEach: Yan Etkiler ve Basit İterasyon
forEach, bir dizinin her elemanı üzerinde belirtilen bir fonksiyonu çalıştırmak için kullanılır. Genellikle bir yan etki (side effect) oluşturmak istediğinizde, örneğin her elemanı konsola yazdırmak veya bir DOM elemanı oluşturmak gibi durumlarda tercih edilir. Ancak önemli bir farkı var: forEach geriye yeni bir dizi döndürmez, orijinal diziyi değiştirmez (eğer callback içinde elemanlar değiştirilmezse tabii). Sadece iterasyon yapar.
map: Dönüşümün Gücü
Bir dizideki her elemanı dönüştürüp, bu dönüşüm sonucunda yeni bir dizi elde etmek istediğinizde map imdadınıza yetişir. Orijinal diziyi değiştirmeden, her elemana bir işlem uygulayıp sonuçları yeni bir diziye aktarır. Bu, veri manipülasyonu için harika bir araçtır. Diyelim ki bir kullanıcı listesinden sadece isimleri almak istiyorsunuz... Veya sayıları ikiyle çarpmak... map tam da bunun için biçilmiş kaftan.
filter: Seçici Davranmak
Belirli bir koşulu sağlayan elemanları orijinal bir diziden seçip yeni bir dizi oluşturmak istediğinizde filter kullanırsınız. Adı üstünde, bir filtreleme işlemi yapar. Örneğin, 18 yaşından büyük kullanıcıları bulmak veya belirli bir kategoriye ait ürünleri listelemek gibi senaryolarda çok işe yarar. Okunabilirliği de cabası...
reduce: Veriyi Yoğunlaştırmak
reduce (veya fold olarak da bilinir), bir dizideki tüm elemanları tek bir değere indirgemek için kullanılır. Bu değer bir sayı, bir nesne, bir dizi veya herhangi bir şey olabilir. Dizideki sayıların toplamını bulmak, bir nesne dizisini tek bir nesneye dönüştürmek veya bir dizideki benzersiz elemanları saymak gibi karmaşık işlemleri reduce ile şıkça halledebilirsiniz. İlk başta biraz kafa karıştırıcı gelebilir ama alışınca vazgeçemezsiniz.
some & every: Koşullu Kontroller
some ve every metotları, bir dizideki elemanların belirli bir koşulu sağlayıp sağlamadığını kontrol etmek için kullanılır ve geriye bir boolean değer döndürürler. some, dizideki herhangi bir eleman koşulu sağlarsa true döner. every ise dizideki tüm elemanlar koşulu sağlarsa true döner. Bunlar, form validasyonları veya belirli bir durumun kontrolü gibi durumlarda oldukça pratik çözümler sunar.
Asenkron Döngüler ve İleri Seviye Kullanımlar: for await...of ve Generatorlar
Modern web uygulamaları genellikle asenkron işlemlerle doludur. Veritabanı sorguları, API çağrıları, dosya okuma/yazma işlemleri... Bu tür asenkron kaynaklar üzerinde döngü kurmak gerektiğinde, geleneksel döngüler yetersiz kalır. İşte bu noktada for await...of döngüsü ve async generator fonksiyonları devreye girer.
for await...of, async iterable nesneler üzerinde döngü kurmanızı sağlar. Bu, örneğin bir API'den sayfa sayfa veri çekerken her sayfanın gelmesini bekleyip sonra bir sonraki sayfaya geçmek gibi senaryolarda hayat kurtarıcıdır. Bu özellik sayesinde, asenkron veri akışlarını senkron bir döngü gibi kolayca işleyebiliriz.
Generator fonksiyonları (function*), bir döngüden farklı olarak, her çağrıldığında bir değer döndürüp durumunu koruyabilen özel fonksiyonlardır. Sonsuz diziler oluşturmak, karmaşık iterasyon mantıklarını daha temiz yazmak veya asenkron işlemleri yönetmek için kullanılabilirler. yield anahtar kelimesiyle değer üretirler ve next() metoduyla bir sonraki değere geçilir. Bu, döngülerin akışını üzerinde tam kontrol sahibi olmanızı sağlar, bir nevi süper güç gibi düşünebilirsiniz.
[B]Performans ve Okunabilirlik Dengesi
JavaScript dünyasında döngüler, kod tekrarını azaltmanın, veri yapılarını işlemenin ve algoritmaları hayata geçirmenin temel taşıdır; bu konuda hepimiz hemfikirizdir herhalde. Ama mesele sadece bir döngü yazıp "çalışıyor" demek değil, onu doğru bağlamda, en verimli, en okunabilir ve en modern şekilde kullanmak... İşte profesyonellik tam da burada başlıyor. Bir projenin ölçeği büyüdükçe, ekibinizdeki diğer geliştiricilerin kodunuzu anlaması ve sürdürmesi kritik hale geliyor. Hangi döngüyü nerede, neden tercih ettiğiniz, kodunuzun kalitesini doğrudan etkiliyor, biliyorsunuz değil mi?
Klasik Döngüler: for, while, do...while
JavaScript'e ilk adım atan herkesin tanıştığı bu klasik döngüler, hala birçok senaryoda vazgeçilmez. for döngüsü, belirli bir sayıda tekrar etmesi gereken işlemler veya bir dizinin elemanlarını indeks bazlı kontrol etmeniz gerektiğinde en uygun seçeneklerden biri. Örneğin, bir HTML tablosu oluştururken veya bir dizinin belirli bir aralığındaki elemanları işlerken... Sayacınız, koşulunuz ve artırma/azaltma işleminiz tek bir satırda net bir şekilde tanımlanmış olur. Bu, özellikle C tabanlı dillerden gelenler için oldukça tanıdıktır.
CODE
1234
for (let i = 0; i < 10; i++) {
console.log([icode]Sayı: ${i}[/icode]); // 0'dan 9'a kadar sayılar basılır
}
Peki ya while döngüsü? Bu, koşul doğru olduğu sürece çalışmaya devam eden bir yapı. Ne zaman kullanırız? Genellikle, kaç kez döneceğini önceden bilmediğiniz, bir koşulun gerçekleşmesini beklediğiniz durumlarda. Örneğin, bir kullanıcıdan geçerli bir giriş alana kadar tekrar tekrar sormak veya bir veritabanı sorgusundan belirli bir sonuç gelene kadar beklemek gibi... Sonsuz döngü tehlikesine karşı her zaman dikkatli olmak gerekir, yoksa tarayıcınız "bu sayfa yanıt vermiyor" hatasıyla sizi selamlayabilir.
CODE
12345678910111213
let isValidInput = false;
let userInput;
while (!isValidInput) {
userInput = prompt("Lütfen 'evet' yazın:");
if (userInput && userInput.toLowerCase() === 'evet') {
isValidInput = true;
console.log("Geçerli giriş yapıldı.");
} else {
console.log("Hatalı giriş, tekrar deneyin.");
}
}
do...while ise, koşul ne olursa olsun en az bir kere çalışmasını istediğiniz durumlarda devreye girer. Yani, önce işlemi yapar, sonra koşulu kontrol eder. Bu, kullanıcı girişlerini ilk denemede kontrol etmek ve eğer hatalıysa tekrar sormak gibi senaryolarda kullanışlıdır. Ama kabul edelim, diğerlerine göre çok daha az karşımıza çıkar, değil mi?
Nesne ve Dizi İterasyonları: for...in ve for...of
Modern JavaScript ile birlikte hayatımıza giren for...in ve for...of döngüleri, iterasyon süreçlerine farklı bir boyut kazandırdı. for...in, bir nesnenin numaralandırılabilir özelliklerinin (property) anahtarları üzerinde döner. Eski tip JavaScript'te nesnelerin özelliklerini gezmek için sıkça kullanılırdı. Ancak, prototip zincirinden gelen özellikleri de listeleyebileceği için, özellikle de dizilerle kullanıldığında beklenmedik sonuçlara yol açabilir. Bu yüzden, bir nesne üzerinde dönerken hasOwnProperty metodunu kullanarak sadece nesnenin kendi özelliklerini hedeflemek iyi bir uygulama, yoksa başınız ağrıyabilir...
CODE
123456789101112
const user = { name: "Ali", age: 30, city: "Ankara" };
for (const key in user) {
if (Object.hasOwnProperty.call(user, key)) { // Sadece kendi özelliklerini al
console.log([icode]${key}: ${user[key]}[/icode]);
}
}
// Çıktı:
// name: Ali
// age: 30
// city: Ankara
for...of ise tamamen farklı bir hayvan. Bu döngü, Iterable protokolünü uygulayan veri yapıları (diziler, stringler, Map, Set vb.) üzerinde doğrudan değerler üzerinde döner. Yani size indeks veya anahtar yerine doğrudan elemanın kendisini verir. Bu, diziler üzerinde iterasyon yaparken hem daha güvenli hem de daha okunabilir bir yöntemdir. for...in'in dizi indekslerini string olarak vermesi gibi tuhaflıkları yoktur. Bir dizi üzerinde gezinirken, for...of genellikle for döngüsüne göre daha temiz bir alternatiftir.
CODE
12345678910
const fruits = ["elma", "armut", "kiraz"];
for (const fruit of fruits) {
console.log(fruit);
}
// Çıktı:
// elma
// armut
// kiraz
Fonksiyonel Yaklaşım: Array İterasyon Metotları
JavaScript'i modern kılan ve geliştirici deneyimini bambaşka bir seviyeye taşıyan en güçlü araçlardan biri de dizilerin prototipine eklenmiş iterasyon metotlarıdır. forEach, map, filter, reduce, some, every gibi metotlar, döngüleri çok daha deklaratif, okunabilir ve yan etkilerden arınmış bir şekilde yazmamızı sağlar. Bu metotlar, özellikle fonksiyonel programlama prensiplerini benimseyenler için altın değerindedir.
forEach: Yan Etkiler ve Basit İterasyon
forEach, bir dizinin her elemanı üzerinde belirtilen bir fonksiyonu çalıştırmak için kullanılır. Genellikle bir yan etki (side effect) oluşturmak istediğinizde, örneğin her elemanı konsola yazdırmak veya bir DOM elemanı oluşturmak gibi durumlarda tercih edilir. Ancak önemli bir farkı var: forEach geriye yeni bir dizi döndürmez, orijinal diziyi değiştirmez (eğer callback içinde elemanlar değiştirilmezse tabii). Sadece iterasyon yapar.
CODE
1234567
const numbers = [1, 2, 3];
numbers.forEach(num => console.log(num * 2)); // Yan etki: konsola yazar
// Çıktı:
// 2
// 4
// 6
map: Dönüşümün Gücü
Bir dizideki her elemanı dönüştürüp, bu dönüşüm sonucunda yeni bir dizi elde etmek istediğinizde map imdadınıza yetişir. Orijinal diziyi değiştirmeden, her elemana bir işlem uygulayıp sonuçları yeni bir diziye aktarır. Bu, veri manipülasyonu için harika bir araçtır. Diyelim ki bir kullanıcı listesinden sadece isimleri almak istiyorsunuz... Veya sayıları ikiyle çarpmak... map tam da bunun için biçilmiş kaftan.
CODE
1234567
const products = [
{ id: 1, name: "Laptop", price: 1200 },
{ id: 2, name: "Mouse", price: 25 }
];
const productNames = products.map(product => product.name);
console.log(productNames); // Çıktı: ["Laptop", "Mouse"]
filter: Seçici Davranmak
Belirli bir koşulu sağlayan elemanları orijinal bir diziden seçip yeni bir dizi oluşturmak istediğinizde filter kullanırsınız. Adı üstünde, bir filtreleme işlemi yapar. Örneğin, 18 yaşından büyük kullanıcıları bulmak veya belirli bir kategoriye ait ürünleri listelemek gibi senaryolarda çok işe yarar. Okunabilirliği de cabası...
CODE
1234
const ages = [12, 23, 17, 34, 16];
const adults = ages.filter(age => age >= 18);
console.log(adults); // Çıktı: [23, 34]
reduce: Veriyi Yoğunlaştırmak
reduce (veya fold olarak da bilinir), bir dizideki tüm elemanları tek bir değere indirgemek için kullanılır. Bu değer bir sayı, bir nesne, bir dizi veya herhangi bir şey olabilir. Dizideki sayıların toplamını bulmak, bir nesne dizisini tek bir nesneye dönüştürmek veya bir dizideki benzersiz elemanları saymak gibi karmaşık işlemleri reduce ile şıkça halledebilirsiniz. İlk başta biraz kafa karıştırıcı gelebilir ama alışınca vazgeçemezsiniz.
CODE
1234567
const cartItems = [
{ name: "Kitap", price: 50, quantity: 2 },
{ name: "Kalem", price: 10, quantity: 5 }
];
const totalCost = cartItems.reduce((acc, item) => acc + (item.price * item.quantity), 0);
console.log(totalCost); // Çıktı: 150 (50*2 + 10*5)
some & every: Koşullu Kontroller
some ve every metotları, bir dizideki elemanların belirli bir koşulu sağlayıp sağlamadığını kontrol etmek için kullanılır ve geriye bir boolean değer döndürürler. some, dizideki herhangi bir eleman koşulu sağlarsa true döner. every ise dizideki tüm elemanlar koşulu sağlarsa true döner. Bunlar, form validasyonları veya belirli bir durumun kontrolü gibi durumlarda oldukça pratik çözümler sunar.
CODE
1234567
const numbersToCheck = [2, 4, 6, 8, 10];
const hasOddNumber = numbersToCheck.some(num => num % 2 !== 0);
console.log(hasOddNumber); // Çıktı: false (Tek sayı yok)
const allEven = numbersToCheck.every(num => num % 2 === 0);
console.log(allEven); // Çıktı: true (Hepsi çift)
Asenkron Döngüler ve İleri Seviye Kullanımlar: for await...of ve Generatorlar
Modern web uygulamaları genellikle asenkron işlemlerle doludur. Veritabanı sorguları, API çağrıları, dosya okuma/yazma işlemleri... Bu tür asenkron kaynaklar üzerinde döngü kurmak gerektiğinde, geleneksel döngüler yetersiz kalır. İşte bu noktada for await...of döngüsü ve async generator fonksiyonları devreye girer.
for await...of, async iterable nesneler üzerinde döngü kurmanızı sağlar. Bu, örneğin bir API'den sayfa sayfa veri çekerken her sayfanın gelmesini bekleyip sonra bir sonraki sayfaya geçmek gibi senaryolarda hayat kurtarıcıdır. Bu özellik sayesinde, asenkron veri akışlarını senkron bir döngü gibi kolayca işleyebiliriz.
CODE
12345678910111213141516
async function* asyncNumberGenerator() {
for (let i = 0; i < 5; i++) {
await new Promise(resolve => setTimeout(resolve, 100)); // Simüle edilmiş asenkron işlem
yield i;
}
}
async function processAsyncNumbers() {
for await (const num of asyncNumberGenerator()) {
console.log([icode]Asenkron Sayı: ${num}[/icode]);
}
console.log("Tüm asenkron sayılar işlendi.");
}
// processAsyncNumbers(); // Bu fonksiyonu çağırdığınızda asenkron olarak sayılar işlenecektir.
Generator fonksiyonları (function*), bir döngüden farklı olarak, her çağrıldığında bir değer döndürüp durumunu koruyabilen özel fonksiyonlardır. Sonsuz diziler oluşturmak, karmaşık iterasyon mantıklarını daha temiz yazmak veya asenkron işlemleri yönetmek için kullanılabilirler. yield anahtar kelimesiyle değer üretirler ve next() metoduyla bir sonraki değere geçilir. Bu, döngülerin akışını üzerinde tam kontrol sahibi olmanızı sağlar, bir nevi süper güç gibi düşünebilirsiniz.
[B]Performans ve Okunabilirlik Dengesi