JavaScript en çok kullanılan programlama dilleri arasında yer almaktadır. JavaScript mühendisi olmayı amaçlayan geliştiriciler, döngülerin temellerini, türlerini ve nasıl çalıştıklarını öğrenmelidir.
JavaScript döngüsü, belirli bir koşula göre tekrarlanan görevleri gerçekleştirmek için kullanılan bir araçtır. Öte yandan, ‘yineleme’ genel bir terimdir ve döngü bağlamında tekrarlama anlamına gelir. Bir durma koşulu sağlanana kadar bir döngü yinelemeye devam eder.
Bunu daha iyi anlamak için, kuzeye doğru X adım ve ardından sola Y adım atmanızın söylendiği bilgisayarlı bir oyun olarak düşünebilirsiniz.
Kuzeye doğru 7 adım atmayı şu şekilde temsil edebilirsiniz;
for (let step = 0; step < 7; step++) {
// Runs 7 times, with values of steps 0 through 6.
console.log("Walking northwards one step");
}
Yukarıdaki kod bloğu yürütüldüğünde, buna sahip olacaksınız;
Neden genellikle döngüler kullanılır?
- Tekrarlanan görevleri gerçekleştirin: Belirli koşullar karşılanana kadar talimatları yürütmek için döngüleri kullanabilirsiniz.
- Nesneler veya diziler üzerinde yineleme: Döngülerle, bir nesnenin özellikleri veya bir dizinin öğeleri üzerinde yineleme yaparak, her bir özellik veya öğe için belirli eylemler gerçekleştirmenize olanak tanır.
- Verileri filtrele: Belirli koşullara göre verileri filtrelemek için bir döngü kullanabilirsiniz.
JavaScript döngüleri farklı biçimlerde gelir; For, While, Do…while, For…of ve For…in. Bunları ayrıntılı olarak inceleyelim ve her birinin nasıl çalıştığını gösterelim.
Döngü için
Bir for döngüsü, belirtilen bir koşul doğru olarak değerlendirilene kadar tekrar eder. Bir for döngüsü, bir kod bloğu tarafından takip edilen üç isteğe bağlı ifadeye sahiptir.
for (initialization; condition; finalExpression) {
// code
}
- Başlatma ifadesi, ilk döngü yürütülmeden önce gelir. Bu ifade genellikle bir veya daha fazla sayacı başlatır.
- For döngüsü çalıştırılmadan önce her seferinde bir koşul ifadesi kontrol edilir. Döngü veya deyimdeki kod, ifade her doğru olarak değerlendirildiğinde yürütülür. Öte yandan, ifade false olarak değerlendirildiğinde döngü durur. Ancak, ifade atlanırsa, ifade otomatik olarak doğru olarak değerlendirilir.
- finalExpression, her döngü yinelemesinden sonra yürütülür. İfade çoğunlukla bir sayacı artırmak için kullanılır.
Birden çok deyimi gruplamak ve yürütmek için {}, blok deyimini kullanabilirsiniz. Koşul ifadesi yanlış olarak değerlendirilmeden önce döngüden erken çıkmak istiyorsanız, break deyimini kullanın.
Kodlu for döngülerine örnekler
for (let i = 0; i < 7; i++) {
console.log(i);
}
Bu kod bloğunda;
- i değişkeni sıfır olarak başlatılır (i=0 olsun).
- Koşul, i’nin 7’den küçük olması gerektiğidir (i=7).
- i’nin değeri 7’den küçükse (i<7>.
- Yineleme, her yinelemeden (++1) sonra i’nin değerine 1 ekleyecektir.
for (let i = 1; i < 11; i += 2) {
if (i === 9) {
break;
}
console.log('Total developers: ' + i);
}
- Kod bloğu 1’den 10’a kadar yinelenir (i<11).
- Döngü, i değişkenini 1 değeriyle başlatır (i = 1 olsun).
- i’nin değeri 11’den küçükse (i < 11) döngü koşulu çalışmaya devam eder.
- i’nin değeri her yinelemeden sonra 2 artar (i += 2).
if ifadesi, i=9 değerinin olup olmadığını değerlendirir. Koşul doğruysa, break deyimi yürütülür ve döngü sona erer.
(resim)
Döngü için… of döngüsü
for…of döngüsü, Map, Array, Arguments ve Set gibi yinelenebilir nesneler üzerinde yinelenir. Bu döngü, her bir farklı özelliğin değeri için yürütülen ifadelerle özel bir yineleme kancasını çağırır.
Bir for…döngüsünün temel yapısı;
for (variable of object) statement
Eylemdeki for…of döngüsü örnekleri
const frontendLanguages = [ "HTML", "CSS", "JavaScript" , “React”];
for (let i of frontendLanguages) {
console.log(i);
}
Bu kodda;
- FrontendLanguages adında bir dizi tanımlıyoruz.
- Dizinin üç öğesi vardır; “HTML”, “CSS”, “JavaScript” ve “React”.
- for…of döngüsü, frontendLanguages’daki her öğe üzerinde yinelenir.
- Kod bloğundaki i, her yineleme sırasında her bir öğenin değerini ve konsolda yazdırılan değerleri alır.
const s = new Set();
s.add(2);
s.add("grey");
for (let n of s) {
console.log(n);
}
Bu kod bloğunda;
- Set() yapıcısını kullanarak yeni bir Set’e atadığımız bir s değişkeni bildiririz.
- add() yöntemi kullanılarak koda iki öğe eklenir
- for….of, elements nesnesi üzerinde yinelenir.
- Döngü, console.log(n) deyimini yürütmeden önce geçerli öğeyi n’ye atar.
const m = new Map();
m.set(4, "rabbit");
m.set(6, "monkey");
m.set(8, "elephant");
m.set(10, "lion");
m.set(12, "leopard");
for (let n of m) {
console.log(n);
}
Bu kod bloğunda;
- Yeni bir Harita nesnesi oluşturmak için Map() yapıcısını kullanıyoruz.
- Bir m değişkeni bildirildi.
- .set() yöntemini kullanarak beş anahtar/değer çifti ekliyoruz.
- Bir for…of döngüsü, Map nesnesi m öğeleri üzerinde yinelenir.
For…in döngüsü
Bir nesnenin özelliklerini yinelemek için bir for…in döngüsü kullanılır. Bir for…in döngüsünün temel yapısı;
for (property in object) {
// code
}
Diziler ve dizi benzeri nesneler üzerinde yineleme yapmak için for…in döngüsünü kullanabilirsiniz.
const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };
for (const vegetable in shoppingList) {
console.log(vegetable);
}
Bu kod bloğunda;
- Bir JavaScript nesnesi tanıtıyoruz ve buna ShoppingList adını veriyoruz.
- ShoppingList’teki her özellik üzerinde in operatörünü kullanarak yineleme yapmak için for döngüsünü kullanırız.
- Her yinelemede döngü, ShoppingList’teki geçerli özellik adını atar.
Sırasında
While döngüsü bir koşulu değerlendirir, doğru bulursa kod bloğu çalışır. Ancak koşul yanlış ise döngü sona erer ve kod bloğu yürütülmez.
Bu, while döngüsünün temel yapısıdır;
while (condition) Statement
Test koşulu, ifadenin döngüde yürütülmesinden önce gerçekleşmelidir. {} veya blok deyimlerini kullanarak birden fazla deyim yürütebilirsiniz.
Çalışırken döngü örneği
let n = 0;
while (n < 9) {
console.log(n);
n++;
}
Bu kodda;
- Bir n değişkeni, sıfır değeriyle başlatılır (n=0 olsun).
- Döngü, n’nin değeri 9’dan (n<9) küçük olduğu sürece yürütülür.
- n’nin değeri konsolda görüntülenir ve her yinelemeden sonra 1 artar (n++)
- Kod 8’de çalışmayı durduracak.
Yap… Döngü Sırasında
Bir do…while döngüsü, belirli bir koşul yanlış olarak değerlendirilene kadar yinelenir.
Bir do…while deyiminin genel yapısı;
do statement while (condition);
İfade bir kez, ancak koşul kontrol edilmeden önce yürütülür. Koşul doğruysa deyim yürütülür. Ancak, değerlendirilen koşul yanlışsa yürütme durur ve do..while komutundan sonra kontrol ifadeye geçer. Bir do…while döngüsündeki kodun, koşul doğru olarak değerlendirilse bile en az bir kez çalışması garanti edilir.
do…while örneği
let n = 0;
do {
n += 1;
console.log(n);
} while (n < 7);
Bu kodda;
- Bir n değişkeni tanıtıyoruz ve başlangıç değerini 0 olarak ayarladık (n=0 olsun).
- n değişkenimiz, her yinelemeden sonra değerinin 1 artırıldığı bir do…while döngüsüne giriyor (n+=1)
- n değeri günlüğe kaydedilir.
- n’nin değeri 7’den (n<7) küçük olduğu sürece döngü çalışmaya devam eder.
Bu kodu çalıştırdığınızda, döngü 7 kez yürütülürken konsol 1’den 7’ye kadar n değerlerini gösterecektir.
Yuvalanmış Döngü
Yuvalanmış bir döngü, bir döngü içinde bir döngüye sahip olduğumuz bir durumdur. Örneğin, başka bir for döngüsünün içine yerleştirilmiş bir for döngüsüne sahip olabiliriz.
for (let outer = 0; outer < 5; outer += 2) {
for (let inner = 0; inner < 6; inner += 2) {
console.log(`${outer}-${inner}`);
}
}
- İki değişken vardır; dış ve iç ve her ikisi de sıfır değeriyle başlatılır.
- Her yinelemeden sonra her iki değişken de 2 artırılır
- Dış ve iç döngüler her biri üç kez yinelenir.
Döngü kontrol ifadeleri
Bazen “atlama ifadeleri” olarak bilinen döngü kontrol ifadeleri, bir programın normal akışını kesintiye uğratır. Break ve devam, döngü kontrol ifadelerinin örnekleridir.
Son ifadeler
Break ifadeleri, koşul yerine getirilmese bile bir döngüyü hemen sonlandırır.
for (let n = 1; n <= 26; n++) {
if (n === 13) {
console.log("Loop stops here. We have reached the break statement");
break;
}
console.log(n);
}
Oluşturulan kod şu şekilde görünecektir;
Açıklamalara devam et
Devam deyimleri, belirli bir kod bloğunu atlamak ve yeni döngü için yineleme yapmak için kullanılır.
for (let n = 0; n <= 10; n++) {
if (n === 5) {
continue;
}
console.log(n);
}
Oluşturulan kod şu şekilde görünecektir;
Çözüm
Yukarıda, normal JavaScript’te ve onun çerçevelerinde/kütüphanelerinde karşılaşacağınız yaygın döngüler bulunmaktadır. Vurgulandığı gibi, her döngü türünün kendi kullanım durumu ve farklı davranışları vardır. Yanlış döngü tipini seçerseniz, büyük olasılıkla hatalarınız olacaktır ve kodunuz muhtemelen beklenmeyen davranışlar gösterecektir.
Bir JavaScript çerçevesi veya kitaplığı ile uğraşıyorsanız, her zaman belgelerini kontrol edin ve yerleşik döngüleri kullanın.
