Yeni Başlayanlar İçin JavaScript Döngüleri: Temelleri Öğrenin

Kasvetli bir pazartesi ve siz iştesiniz. Pazartesi günlerinin ne kadar bunaltıcı olabileceğini hepimiz biliyoruz, değil mi? Patronunuz size yaklaşıyor ve şöyle diyor: "Hey, hafta sonu boyunca aldığımız 300 açılmamış e-posta var. Her birini açmanızı, gönderenin adını yazmanızı ve işiniz bittiğinde e-postaları silmenizi istiyorum."

Bu görevi manuel olarak yapmaya çalışırsanız çok yorucu görünüyor. Aklınıza gelen bir sonraki şey muhtemelen Google'a girip bu süreci otomatikleştirecek ve hayatınızı kolaylaştıracak bir yazılım aramaktır, değil mi?

Programlamada da benzer durumlarımız var. Tekrarlanan görevleri tamamlanana kadar gerçekleştirmeniz gereken zamanlar vardır. Bu sorunu nasıl çözersiniz? JavaScript'te döngüler dediğimiz şeylere sahibiz. Döngüler, görevi tamamlamak için gereken kod miktarını azaltarak tekrarlanan görevleri çözmemize olanak tanır.

Bu makalede döngünün ne olduğunu, nasıl çalıştığını ve onu programlarımıza uygulamak için kullanabileceğimiz çeşitli yöntemleri tartışacağız.

Döngü Nedir?

Döngüler, JavaScript'te tekrarlanan eylemleri kolayca gerçekleştirmek için kullanılır. Doğru veya yanlış döndüren bir koşula dayanırlar.

Koşul, bir döngünün çalışmaya devam etmesi için iletilmesi gereken bir ifadedir. Belirtilen koşullar doğru bir değer döndürdüğünde döngü çalışır ve yanlış bir değer döndürdüğünde durur.

Ne Zaman Döngü Kullanmanız Gerekir?

Döngüler tekrarlanan görevleri gerçekleştirmek için kullanışlıdır. Örneğin döngü kullanmak, bir sorunu çözmek için gereken kodu kısaltır. Zamandan tasarruf sağlar, bellek kullanımını optimize eder ve esnekliği artırır.

Bir döngünün gerçek önemi, kod uzunluğunu kısaltmanın ve tekrarı sınırlamanın ötesine uzanır. Ayrıca bir dizi, nesne veya diğer yapılardaki verilerle çalışırken de yardımcı olurlar. Üstelik döngüler, tekrarlanan kodu azaltarak ve kodun yeniden kullanılabilirliğini artırarak kod modülerliğini destekler; bu da projenizin farklı bölümlerinde kullanılabilecek kodlar oluşturmayı mümkün kılar.

Döngü Türleri

Döngülerin iki ana kategorisi vardır: giriş kontrollü döngüler ve çıkış kontrollü döngüler.

Giriş kontrollü döngüler, döngünün gövdesini çalıştırmadan önce "döngü girişindeki" durumu değerlendirir. Koşul doğruysa vücut çalışır. Aksi halde vücut çalışmaz. for ve while döngüleri giriş kontrollü döngülere örnektir.

Çıkış kontrollü döngüler, test koşulu boyunca döngünün gövdesine odaklanır ve test koşulu değerlendirilmeden önce döngü gövdesinin en az bir kez çalıştırılmasını sağlar. Çıkış kontrollü döngüye iyi bir örnek do-while döngüsüdür.

Giriş kontrollü döngülerin bazı örneklerini inceleyelim:

Döngü sırasında

Bir while döngüsü aşağıdaki sözdizimine sahiptir.

 while (condition) { // loop's body }

Aşağıdaki listede while döngüsünün işlevselliği açıklanmaktadır:

1. while döngüsü parantez içindeki bir test koşulunu alır.

   
   

2. Program koşulun geçip geçmediğini kontrol eder.

   
   

3. Döngünün gövdesindeki kod, koşul iletildiği sürece yürütülür.

   
   

4. Test koşulu başarısız olduğunda program çalışmasını sonlandırır.

Aşağıda while while pratik bir örneğini ele alalım:

 let arr = []; let i = 1; let number = 5; while (i <= number) { arr.push(i) i++ } console.log(arr)

1. Yukarıdaki kod parçacığı "arr", "i" ve "num" değişkenlerini başlatır.

   
   

2. " arr" değişkeni, test koşulunu geçen değerleri tutan bir dizidir.

   
   

3. "i" değişkeni, her yinelemeden sonraki her artışın kaydını tutar.

   
   

4. "Sayı" değişkeni, her yinelemeden sonra "i" değerini değeriyle (5) karşılaştırır.

   
   

5. Döngünün gövdesindeki kod, "i" "sayı"dan küçük veya ona eşit olduğu sürece her yinelemeden sonra "i"nin her değerini diziye iter.

   
   

6. "i"nin mevcut değeri koşulu sağlayamadığında, "i" nin değerinin 6 olan "sayı" dan büyük olduğu bu durumda döngünün çalışması durur.

   
   

push() yöntemi, bir dizinin sonuna yeni bir öğe ekleyen yerleşik bir JavaScript işlevidir.

Çıktı

 [1, 2, 3, 4, 5]

do-while döngüsü

Bir do-while döngüsü, while döngüsüne çok benzer; while ile do-while döngüsü arasındaki temel fark do-while döngüsünün, döngünün durumunu değerlendirmeden önce en az bir kez kod yürütülmesini sağlamasıdır; do-while döngüsü aşağıdaki sözdizimine sahiptir.

 do { // loop's body } while (//condition)

do-while çıkış kontrollü döngünün mükemmel bir örneğidir. Bunun nedeni, çıkış kontrollü döngülerin test koşulundan önce döngünün gövdesine öncelik vermesidir. Şimdi do-while döngüsünü kullanan pratik bir kod örneğine bakalım.

Örnek:

 let i = 1; let num = 5; do { console.log(i); i++; } while (i <= num);

Şimdi bu kod parçasını parçalayalım:

1. "i" ve "num" değişkenlerini başlattık.

   
   

2. Konsol, döngünün durumunu değerlendirmeden önce "i" (1) değerini kaydeder.

   
   

3. Koşul kontrol edilir ve her yinelemeden sonra "i"nin değeri +1 artar.

   
   

4. Döngü, "i" değeri "num" değerinden büyük olduğunda işlemi sonlandırır.

   
   

Çıktı

 1 2 3 4 5

Her ne kadar do-while döngüsü while döngüsüne çok benzese de, dikkat etmemiz gereken ince farklar vardır; while ve do-while döngüsü arasındaki farkı karşılaştıran başka bir örneği ele alalım.

 let i = 5; let num = 4 while( i < num) { console.log(i) }

Yukarıdaki while döngüsü konsola herhangi bir sonuç döndürmez; şimdi bu neden böyle?

1. "i" ve "num" değişkenlerini sırasıyla 5 ve 4 değerleriyle başlattık.

   
   

2. Koşul, "i" değerinin "num"dan küçük olup olmadığını kontrol eder.

   
   

3. Doğruysa, ilgili her değerde günlüğe kaydedilir.

   
   

4. "i"nin başlangıç değeri "num"unkini aştığı için döngü asla çalışmaz.

   
   

Şimdi do-while döngüsüyle benzer bir örnek ele alalım.

 let i = 5; let num = 4; do { console.log(i) } while ( i < num)

Çıktı

 5

do-while döngüsü, konsola 5 değerini döndüren kod bloğunun yürütülmesini sağlar, ancak "i" başlangıçta "num"dan daha yüksek bir değere sahip olsa da yine de konsolda bir kez oturum açılmıştır. Bu gösterim size do-while ve while döngüsü arasındaki işlevsellik farkını gösterir.

Döngü için

for loop benzersiz bir döngü türüdür ve programcılar tarafından en sık kullanılan döngülerden biridir; for loop bir koşula bağlı olarak bir kod bloğunu belirli sayıda çalıştıran bir döngüdür. For döngüsü aşağıdaki sözdizimine sahiptir.

 for (Expression1...; Expression2....; Expression3...{    //code block }

İfade 1: for loop bu kısmı aynı zamanda başlatma alanı olarak da bilinir; for loop başlangıcı ve sayaç değişkeninin tanımlandığı alandır. Sayaç değişkeni, döngünün kaç kez çalıştığını izlemek ve bunu bir değer olarak saklamak için kullanılır.

İfade 2: Bu döngünün ikinci kısmıdır; bu bölüm döngüyü yürütecek koşullu ifadeyi tanımlar.

İfade 3: Döngünün bittiği yer burasıdır; bu bölümdeki sayaç değişkeni, her yinelemeden sonra değeri koşulda belirtildiği şekilde artırarak veya azaltarak değerini günceller.

For döngüsünü kullanarak bir örneğe bakalım.

 for (let i = 0; i < 100; i++) {  console.log("Hello World" ) }

Yukarıdaki kod parçacığını birlikte parçalayalım.

1. Öncelikle " i" sayaç değişkenini sıfır değeriyle başlattık.

   
   

2. Daha sonra kodun çalışır durumda kalmasını sağlayacak koşullu ifadeyi oluşturduk.

   
   

3. "i" değerini 100 ile karşılaştırdık; bu testi geçerse "Merhaba Dünya" günlüğe kaydedilir.

   
   

4. Bu işlem, her yinelemeden sonra sayaç +1 oranında artarken tekrarlanır.

   
   

5. Sayacın değeri 100'e ulaştığında döngü sona erer.

   
   

Çıktı

 Hello World Hello World Hello World ... //repeated 97 more times making it 100 "Hello World" in total ...

her döngü için

for-each döngüsü, JavaScript'te bir dizi boyunca dolaşan ve o dizideki her öğeye bir geri çağırma işlevi uygulayan bir yöntemdir; geri çağırma işlevi, bir işleve parametre olarak iletilen başka bir işlevdir. Geri çağırma işlevi, ana işlevin yürütülmesi tamamlandıktan sonra sırayla çalıştırılarak çalışır.

for-each döngüsünün temel sözdizimini inceleyelim.

 array.forEach(function(currentValue, index, arr))

Yukarıda verilen kod for-each döngüsünün çalışmasını açıklamaktadır.

• Bu döngü, geçerli değer, bir dizin ve bir dizi olmak üzere üç parametreyi kabul eder.

• Geçerli değer, dizideki öğenin mevcut değerini temsil eder.

• İndeks, o dizideki geçerli öğenin numaralandırılmış konumunu size bildiren isteğe bağlı bir parametredir.

• arr, öğenin hangi diziye ait olduğunu söyleyen isteğe bağlı başka bir parametredir.

  
  

 let myArray = [1, 2, 3, 4, 5]; array.forEach((num, index, arr) => { arr[index] = num * 2; console.log(array); });

Yukarıdaki örneği parçalayalım:

1. "myArray" değişken adında bir dizi başlattık ve onu 1'den 5'e kadar tamsayılarla sakladık.

   
   

2. for-each array yöntemi üç parametre alır ve diziye bir geri çağırma işlevi uygular.

   
   

3. Bu hat; arr[index] = num * 2 geçerli öğenin değerini 2 ile çarpar ve döndürülen değeri geçerli öğenin dizinine atar.

   
   

Dikkat edin: for-each array yöntemi yeni bir dizi döndürmez; bunun yerine orijinal diziyi değiştirir ve onu döndürür.

Çıktı

 [2, 4, 6, 8, 10]

JavaScript'teki Döngüler Ne İçindir ve Ne İçindir?

Tekrarlanabilir nesneler üzerinde yineleme söz konusu olduğunda for... in ve for... of döngüleri çok kullanışlıdır; yinelenebilir nesneler, üzerinde döngü yapılabilen herhangi bir öğeyi ifade eder; yinelenebilir nesnelerin yaygın örnekleri diziler, dizeler, kümeler vb.'dir.

for... in ve for... of nesneleri yineleme/hareket etme biçimleri bakımından benzerdir; aralarındaki temel fark, değerleri nasıl döndürdüklerinde gösterilir.

için... Döngülerde

Bir for... in döngüsü, bir nesneden anahtar(lar)ı/özellikleri ve ona karşılık gelen özellikleri ana nesneden çıkarmanız gerektiğinde kullanışlıdır. for... in döngüsü zaman zaman bir nesneyi, söz konusu nesnede tanımlandığı şekilden farklı bir şekilde yineleyebilir; hadi eylem halindeki for... in döngüsünün bir örneğini ele alalım.

 let namesArray = []; const studentScores = { John: 60, Dan: 53, Tricia: 73, Jamal: 45, Jane: 52 } for(const name in studentScores){ namesArray.push(name); } console.log(namesArray);

Yukarıdaki örnekte, çeşitli öğrenci adlarını ve bunlara karşılık gelen puanları içeren studentScores adında bir nesne tanımladık. for... in kullanarak, yalnızca studentScores nesnesinin anahtarlarını temsil eden öğrencilerin adlarını alabildik ve push() yöntemini kullanarak bunları bir dizide saklayabildik.

Çıktı

 ["John", "Dan", "Tricia", "Jamal", "Jane"]

Döngüler için...

for... of döngüsü, diziler, dizeler, haritalar vb. gibi yinelenebilir nesnelerin değerleri üzerinde yinelenen özel bir döngü türüdür; for... of döngüleri, bir nesnenin anahtarları veya özellikleriyle ilgilenmez. bunun yerine yalnızca değerlere göre öncelikleri gösterirler.

for... of döngüsü normal nesneler üzerinde yineleme yapamaz ve yinelenemedikleri için hata verir. for.. of döngüsünü kullanarak bir örnek alalım.

 let numArray = [1,2,3,4,5] for (const value of numArray) {   console.log(value) } // Output = 1,2,3,4,5

Özetle, for... in ve for... of döngüleri yinelenebilir nesneler arasında döngü yapmanın harika bir yoludur; temel fark, for... in döngüsünün bir Nesnenin anahtarını döndürmesi, for... of döngüsünün ise yalnızca yinelenebilir nesnelerin değerlerini döndürmesidir.

Sonsuz Döngü Nedir ve Bundan Nasıl Kaçınabiliriz?

Sonsuz döngü, süresiz olarak çalışmaya devam eden bir döngüyü ifade eder; bu, bir döngünün tanımlı bir çıkış koşulu olmadığında meydana gelir. Sonsuz döngüler tehlikelidir çünkü tarayıcınızı çökertebilir ve programınızda istenmeyen eylemlere yol açabilirler.

 // infinite loop sample while (true) { console.log("keep on running") }

Programınızda sonsuz döngüleri önlemek için her zaman döngünüzde tanımlanmış bir çıkış koşulunun olduğundan emin olun.

Çözüm

Bu makalenin sonuna geldiğiniz için çok teşekkür ederiz. Javascript'teki döngüler, iyi ve optimize edilebilir bir program oluşturmak için çok değerli olduğundan, her geliştiricinin uzmanlaşması gereken önemli bir kavramdır. Bu makaleyle programınızda döngü kullanmanın temellerini ve inceliklerini anlayabileceğinize inanıyorum.