Bir For… Aklımda Döngü

Jan 27 2023
Döngülerin JavaScript'te nasıl çalıştığını anlama
JavaScript'i ilk kez öğrenmek, özellikle arka plan kodlamanız yoksa kesinlikle zor olabilir. JavaScript öğreniyorsanız, bunun nesne yönelimli bir dil olduğunu, yani nesneler kavramına ve onların özelliklerine ve yöntemlerine dayalı olduğunu şimdiye kadar anlamış olabilirsiniz.

JavaScript'i ilk kez öğrenmek, özellikle arka plan kodlamanız yoksa kesinlikle zor olabilir. JavaScript öğreniyorsanız, bunun nesne yönelimli bir dil olduğunu, yani nesneler kavramına ve onların özelliklerine ve yöntemlerine dayalı olduğunu şimdiye kadar anlamış olabilirsiniz. JavaScript'te çalışmak, bir web sayfasının yapısını temsil eden Belge Nesne Modeli'nin (DOM) kolayca değiştirilmesine olanak tanır. JavaScript, sizin ve benim günlük olarak kullandığımız etkileşimli web sayfaları oluşturmak için genellikle HTML ve CSS gibi diğer teknolojilerle birlikte kullanılır. Web'de en yaygın kullanılan programlama dillerinden biri olarak, bir JavaScript uzmanı olma yolunda ilerlerken öğrenecek çok şey var.

Böylesine karmaşık bir kodlama dilini öğrenmenin zorlukları vardır. JavaScript olay güdümlü olduğundan, yani kod yürütme kullanıcı girişi, sayfa yükleme ve ağ istekleri gibi olaylara dayalı olduğundan, başarılı bir JavaScript yaratıcısı olmak için farklı nesne ve dizi yöntemlerinin nasıl çalıştığının iyi anlaşılması gerekir.

Mücadeleniz JavaScript'teki bazı daha karmaşık yöntemlerde olabilir, bizi temel konulara geri götüreceğim ve JavaScript'te farklı türde for döngülerinin nasıl çalıştığını açıklayacağım.

for…döngü nedir?

JavaScript'teki bir for döngüsü, bir kod bloğunu belirli sayıda tekrarlamanıza izin veren bir kontrol yapısıdır. Aşağıdaki gibi bir for döngüsü için temel sözdizimi:

Başlatma bölümü, döngünün başında yalnızca bir kez yürütülür. Genellikle bir sayaç değişkenini başlatmak için kullanılır. Koşul, döngünün her yinelemesinden önce kontrol edilir ve doğru olarak değerlendirilirse, döngü içindeki kod bloğu yürütülür. Koşul yanlış olarak değerlendirilirse, döngü sonlandırılır. Artış bölümü, her yinelemenin sonunda yürütülür ve genellikle sayaç değişkenini güncellemek için kullanılır.

Örneğin, aşağıdaki kod, 1'den 10'a kadar olan sayıları konsola yazdırmak için bir for döngüsü kullanır:

Bu örnekte, başlatma bölümü i değişkenini 1 olarak başlatır, koşul bölümü i'nin 10'dan küçük veya eşit olup olmadığını kontrol eder ve artırma bölümü i'yi her yinelemeden sonra 1 artırır. Bu, döngünün 10 kez çalışmasına neden olur ve i'nin değeri her yinelemede konsola yazdırılır.

For döngülerine ek olarak, JavaScript'te sırasıyla nesneler ve diziler üzerinde yineleme yapmak için kullanılan for…in ve for…of döngülerini de kullanabilirsiniz.

for…in döngüsünü anlama

Bir sayı dizisi veya bir dizi üzerinde yineleme yapmak için bir for…döngüsü kullanılırken, for…in döngüsü genellikle bir nesnenin özellikleri üzerinde yineleme yapmak istediğinizde kullanılır.

Bir for…in döngüsü için temel sözdizimi aşağıdaki gibidir:

Değişken, döngünün her yinelemesi için yaratılacak yeni bir değişkendir ve nesnenin özelliğinin adını alacaktır. Nesne, özellikleri yinelenecek olan nesnedir.

Örneğin, aşağıdaki kod, bir nesnenin özelliklerini yinelemek ve değerlerini konsola yazdırmak için bir for…in döngüsü kullanır:

Bu örnekte, döngünün her yinelemesi için "key" değişkeni yaratılmıştır ve "person" nesnesinin özelliğinin adını alacak ve key değişkenini kullanarak bu özelliğin değerine erişecektir. Çıktı şöyle olurdu:

Nesnedeki özelliklerin sırasının garanti edilemeyebileceğini unutmayın, bu nedenle bir for…in döngüsü kullanırken belirli bir sıraya güvenmeyin. Ayrıca, bir for…in döngüsü bir dizi ile çalışmaz, bu durumda bir for..of döngüsü veya forEach() döngüsü kullanmanız gerekir.

Bir for…of döngüsünü anlama

JavaScript'te bir for…of döngüsü, dizi veya dize gibi yinelenebilir bir nesnenin öğeleri üzerinde yineleme yapmak için kullanılır.

Bir for…of döngüsü için temel sözdizimi aşağıdaki gibidir:

Değişken, döngünün her yinelemesi için yaratılacak yeni bir değişkendir ve yinelemede geçerli öğenin değerini alacaktır. Yinelenebilir, öğeleri yinelenecek olan nesnedir.

Örneğin, aşağıdaki kod, bir dizinin öğeleri üzerinde yineleme yapmak ve değerlerini konsola yazdırmak için bir for…of döngüsü kullanır:

Bu örnekte, döngünün her yinelemesi için "sayı" değişkeni yaratılmıştır ve dizideki geçerli öğenin değerini alacaktır. Çıktı şöyle olacaktır:

forEach() döngüsünü anlama

forEach() yöntemi, bir dizinin her öğesinde belirli bir işlevi yürütmenize izin veren bir dizi yöntemidir. forEach() öğesinin nesneler üzerinde kullanılamayacağını unutmayın, bu nedenle bir dizi üzerinde yineleme yapmak istiyorsanız bu harika bir yöntemdir.

forEach yönteminin temel sözdizimi aşağıdaki gibidir:

Fonksiyonun ilk parametresi geçerli öğe, ikinci parametre geçerli öğenin indeksi ve üçüncü parametre dizidir. İşlev içinde this anahtar sözcüğü olarak kullanmak üzere isteğe bağlı bir thisValue parametresi de sağlayabilirsiniz.

Örneğin, aşağıdaki kod, bir dizinin öğeleri üzerinde yineleme yapmak ve değerlerini konsola yazdırmak için forEach yöntemini kullanır:

Bir nesnenin özellikleri üzerinde yineleme yapmak istiyorsanız, bir for…in döngüsü kullanabilir veya bir nesnenin kendi özellik adlarının bir dizisini, aldığımız sırayla döndüren Object.keys() yöntemini kullanabilirsiniz. normal bir döngü ile. Ve sonra bu dizi üzerinde yineleme yapmak için forEach yöntemini kullanabilirsiniz.

Bu örnekte, forEach() yöntemini çalıştırabilmemiz için, person nesnesinden bir dizi döndürmek üzere Object.keys(person) kullandık.

Sarılı döngüler için

Sonuç olarak, for döngüleri, JavaScript'te diziler ve nesneler üzerinde yineleme yapmak için gerekli bir araçtır. Bir kod bloğunu birden çok kez yürütmenin bir yolunu sağlayarak, bir dizinin öğeleri arasında döngü yapmak veya bir nesnenin özelliklerini yinelemek gibi görevler için kullanışlı hale getirirler.

JavaScript, her biri kendi özel kullanım durumlarına sahip farklı türde döngüler sunar:

  • For döngüsü, bir sayı dizisi veya bir dizi üzerinde yineleme yapmak için kullanılır.
  • for…in döngüsü, bir nesnenin özelliklerini yinelemek için kullanılır.
  • for…of döngüsü, bir dizi veya dize gibi yinelenebilir bir nesnenin öğeleri üzerinde yineleme yapmak için kullanılır.
  • forEach() yöntemi, bir dizinin her öğesinde belirli bir işlevi yürütmenize izin veren bir dizi yöntemidir.

Eldeki görev için uygun döngü türünü kullanmak, kodunuzu daha okunabilir, verimli ve hataya daha az eğilimli hale getirebilir. Bu nedenle, farklı döngü türlerini ve bunların ne zaman kullanılacağını anlamak, JavaScript ile geliştirmenin önemli bir yönüdür.