JAVASCRIPT’IN TARIHÇESI

JS’de Döngüler(Loops) ve For..of yöntemi

Farklı farklı döngü yöntemleri bulunmaktadır. for, while, do/while, forEach, for…in, for…of gibi

Onur Dayıbaşı

Published in

Frontend Development With JS

4 min readDec 8, 2019

Bu yazıyı daha önceden yazmış olduğum Javascript’in Tarihçesi yazısının bir devamı olarak yazıyorum. Bir çok kavramı tek bir yazıda ele almanın yaratacağı karmaşıklıktan kaçmak için bu yönteme başvurdum. Bu yazılardaki amacım önceden Javascript’in varolan hangi özelliklerinin yetmediğini ve bu geliştirmeyle neyi hedeflediklerini anlatacağım.

Bu konuda özetle;

Kaç farklı türde döngü yöntemi bulunuyor ve temel kavramlar.
For, While, Do/While Loops
forEach ve Diğer Hazır Fonksiyonlar.
For…of Neden İhtiyaç Oldu? Diğer Döngüleri Yeterli Değil mi ?
Recursive Fonksiyonlar

1. Kaç Farklı Türde Döngü Yöntemi Bulunuyor ve Temel Kavramlar

JS’de aşağıdaki döngü yöntemlerini kullanabilirsiniz. Ama neden bu kadar farklı döngü yöntemi var onu aşağıda anlatacağım.

for
while
do/while
forEach
for…in
for…of
recursion

Continue/Break komutları döngü extradan yönetme şeklidir. Örneğin mantıksal işlemleriniz var fakat döngünün ilgili kısmı için kodun çalışmasını istemiyorsunuz. Bir atlamasını istiyorsanız continue. Eğerki döngünün bulunduğu kısımda işlemlerinizi bitirdiniz diğerleri için çalışmasına gerek yok diyorsanızda break komutunu kullanarak döngünüzün daha performanslı çalışmasını sağlayabilirsiniz.

Recursive: Kendi kendini çağıran fonksiyonlar ile döngüler oluşturup belli bir durumda döngünün sonlandırılması gerçekleştirilir. Fonksiyonum kendisini çağrımı bir noktada durdurulmaz ise kodunuz stackoverflow hatası verir.

iterator: Java, C++ gibi dillerde Collection vb veri yapılarında gezinebilmeyi sağlayan yapılardır. Iterable interface türeyen Collection veri yapılarında iterator hangi node üzerinde olduğunu tutan pointer dır. Bunun benzeri yapılar JS’de de bulunmaktadır.

2. For, While, Do/While Loops

Procedural programlamada Basic, Pascal, C ve Java’da sürekli olarak kullandığımız döngü yöntemleridir. Bu döngüler çok genel amaçlı şekilde kullanılmaktadır. Sağlanan esneklik sayesinde istediğiniz türde bir döngüyü çok basit şekilde oluşturabilirsiniz.

For döngüsünün özellikleri;

Koşulu baştan belirlersiniz.Hiç bu döngü başlamayabilir (i<5)
Döngüdeki koşulu belirleyen değişkeni siz belirlersiniz. (i)
Döngüde değişkenin ilk değerini ve nasıl artacağını for içerisinde belirlersiniz. (i++) yani her seferinde 1 artsın denilmiş.
For döngü şekli en baştan belirlidir.
Continue/break komutları çalışır.

for(let i=0;i<5;i++) console.log(i);

While döngüsünün özellikleri;

Koşulu yine en baştan belirtirsiniz (i<5)
Değişkenin ilk değeri döngü içerisinde belirlenMez. (i=1)
Değişkenin artışı döngünün kapsamı içerisinde artabilir , azalabilir istendiği gibi değiştirilebilir.
For göre daha esnek bir döngü yapısı sağlar.
Continue/break komutları çalışır.

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

Do/While döngüsünün özellikleri

Koşul bu sefer sonda kontrol eder (i<5)
İlk işlemi her zaman yapar.
Diğer kısımları while döngüsünün aynısıdır.
Continue/break komutları çalışır.

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

3. forEach ve Diğer Hazır Fonksiyonlar

Array, Map ve Set veri yapılarında forEach gibi tüm elemanların üzerinden geçebilen fonksiyona sahiptir. Bunun dezavantajı continue/break yapabilme imkanı bulunmamaktadır.

const numberArray=[1,2,2,4,5];
const colorSet=new Set(["red","green","blue"]);
const colorMap=new Map([['red',1],['green',2]])numberArray.forEach(el=>console.log(el))
colorSet.forEach(el=>console.log(el))
colorMap.forEach((value,key, map)=>{console.log(`${key}:${value}`)})

Fonksiyonel Programla(functional programming) High Order Functions yöntemi ile gerçekleştirilen Array kullanılan forEach benzeri diğer fonksiyonlardan da bahsetmek istiyorum. → map, filter, find, findIndex, reduce, every, some, vb fonksiyonlar döngüler ile belli amaç doğrultusunda birleştirilmiş geliştiricilere sağlanmış hazır fonksiyonlardır.

forEach: tüm array elemanlarını dön
filter: tüm array elemanlarını dön ve koşula göre filtreleme yap
map: tüm array elemanlarını başka bir array olarak maple.
find: array içerisinde ilgilendiğin elemanı bul.
reduce array tek bir çıktının oluşmasını sağlamaktır.
every verilen tüm elemanların testi geçip geçmediği
some ise verilen elemanlardan bazılarının testi geçip geçmediği

İleriki zamanlarda fonksiyonel programlamayı anlattığımda bu konular üzerinde daha detaylı duracağım.

4. For…of Neden İhtiyaç Oldu? Diğer Döngüleri Yeterli Değil mi ?

Aslında yukarıda bahsettiğimiz döngü türleri ile istediğiniz her türlü döngüyü sağlayabilirsiniz. Neden forEach, for…of, for…in vb döngüler ortaya çıktı ?

Uygulamlarda farklı farklı veri yapıları bulunmaktadır. Bunlar String, Array, LinkList, Set, Map, Trie Tree, Graph vs. Bu veri yapılarında gezinmek istediğinizde yukarıda bahsettiğimiz döngülerden daha kolay yöntemlere ihtiyaç duyarız. Bu tip yapılar hem kod yazmamızı hemde kodun okunabilirliğini daha da arttırırlar.

Aşağıdaki veri yapılarında

Arrays
Strings
Maps
Sets
DOM data structures
Symbols

aşağıda bunun ile ilgili bir kaç örnek yaptım. Burda çok önemli bir noktada continue/break komutlarını for…of içerisinde kullanabiliyor olmanızdır.

const arr=[1,2,2,4,5];
const str='12245'
const set=new Set([1,1,2,4])
const map=new Map([['a',1],['b',2],['c',3]]);for(let val of arr) console.log(val);
for(let val of str) console.log(val);
for(let val of set) console.log(val);
for(let val of map) console.log(val);

Burada kısaca for…in döngüsünden de bahsetmek istiyorum. Örneğin bir objeniz var ve bunun property dönmek istiyorsunuz bunun için for…in kullanabilirsiniz.

const me={name:"Onur", age:39, height:180};
for(let key in me) console.log(key+":"+me[key]);

Objenin property key veya entry ulaşmanın başka yöntemleride var. Object.keys() ve Object.entries() yöntemleride array şeklinde dönen sonuçlar üzerinde döngüler oluşturabilirsiniz

const me={name:"Onur", age:39, height:180};for(let key of Object.keys(me)) console.log(key)
for(let keyVal of Object.entries(me)) console.log(keyVal)

5. Recursive Fonksiyonlar

Kendi kendisini çağıran bu fonksiyonlar özellikle fonksiyonel programlamada çok sık kullanılan bir tekniktir. Fonksiyonun kendisini çağırmak kodun daha okunabilir ve daha kısa şekilde yazılmasına olanak sağlar ama yukarıda bahsettiğim gibi stack-overflow konusuna dikkat etmek gerekiyor biraz.

Aşağıdaki örneğe bakarsak fibonacci sayıları bir önceki fibonacci sayısı ile kendisinin toplamıdır. F(n)=F(n-1) + F(n-2)

1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, ...

Bunu recursive şekilde yazarsak matematiksel tanımlamaya daha yakın bir görüntü ortaya çıkarmış oluruz.

const fibonacci=(num) => {
   if (num <= 1) return 1;
   return fibonacci(num - 1) + fibonacci(num - 2);
}
console.log(fibonacci(5));

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.