JavaScript Döngüleri
-
15 Ekim 2023 • 10 dakikalık okuma
JavaScript ve diğer programlama dillerinde döngüler; bir koşula göre, bir işlemi birden fazla defa yapmak için kullanılır. JavaScript dilinde de bir çok farklı döngü yazımı mevcuttur.
For Döngüsü
En temel döngü for döngüsüdür. Bu döngüde önce işlemin kaç defa yapılacağını tutan sayaç tanımlanır, ikinci adımda koşul yazılır, son adımda sayaç değeri arttırılır. Örneğin; bir yazı for döngüsü ile 10 defa yazdırılabilir;
Kod
for(var i = 0; i < 10; i++) {
console.log("Merhaba Dünya!", i);
}
// SONUÇ:
// Merhaba Dünya! 0
// Merhaba Dünya! 1
// Merhaba Dünya! 2
// Merhaba Dünya! 3
// Merhaba Dünya! 4
// Merhaba Dünya! 5
// Merhaba Dünya! 6
// Merhaba Dünya! 7
// Merhaba Dünya! 8
// Merhaba Dünya! 9
Örneğin; bir dizinin tüm öğeleri yazdırılabilir;
Kod
var cities = ["Kırklareli", "Kırşehir", "Kocaeli", "Konya", "Kütahya"];
for(var i = 0; i < cities.length; i++) {
console.log(cities[i]);
}
// SONUÇ:
// Kırklareli
// Kırşehir
// Kocaeli
// Konya
// Kütahya
While Döngüsü
While döngüsü, for döngüsü ile aynı mantıkta çalışır, farkı sayaç değişkeni while dışında tanımlanır ve döngü içinde arttırılır. Örneğin;
Kod
var cities = ["Kırklareli", "Kırşehir", "Kocaeli", "Konya", "Kütahya"];
var i = 0;
while(i < cities.length) {
console.log(cities[i]);
i++;
}
// SONUÇ:
// Kırklareli
// Kırşehir
// Kocaeli
// Konya
// Kütahya
Do While Döngüsü
Do While döngüsü, while döngüsüne benzer tek farkı, koşul döngü içine yazılan kod çalıştıktan sonra kontrol edilir. Böylece döngü içine yazılan kod en az bir kere çalışır. Örneğin;
Kod
var cities = ["Kırklareli", "Kırşehir", "Kocaeli", "Konya", "Kütahya"];
var i = 0;
do {
console.log(cities[i]);
i++;
}
while(i < 1)
// SONUÇ:
// Kırklareli
Örneğin tüm dizi öğelerini yazdırmak için;
Kod
var cities = ["Kırklareli", "Kırşehir", "Kocaeli", "Konya", "Kütahya"];
var i = 0;
do {
console.log(cities[i]);
i++;
}
while(i < cities.length)
// SONUÇ:
// Kırklareli
// Kırşehir
// Kocaeli
// Konya
// Kütahya
For Of Döngüsü
For of döngüsü dizinin tüm öğelerine erişmek için kullanılır;
Kod
var cities = ["Kırklareli", "Kırşehir", "Kocaeli", "Konya", "Kütahya"];
for(var item of cities) {
console.log(item);
}
// SONUÇ:
// Kırklareli
// Kırşehir
// Kocaeli
// Konya
// Kütahya
Map örneği;
Kod
var map = new Map();
map.set(39, "Kırklareli");
map.set(40, "Kırşehir");
map.set(41, "Kocaeli");
for (var item of map) {
console.log(item);
}
// SONUÇ:
// [39, 'Kırklareli']
// [40, 'Kırşehir']
// [41, 'Kocaeli']
Set örneği;
Kod
var set = new Set();
set.add(78);
set.add("Karabük");
set.add(252.058)
for (var item of set) {
console.log(item);
}
// SONUÇ:
// 78
// Karabük
// 252.058
For In Döngüsü
For in döngüsü nesnenin tüm alanlarına ve değerlerine erişmek için kullanılır;
Kod
var city = {
code: "39",
name: "Kırklareli",
population: 369.347
};
for (var key in data) {
console.log(key, city[key]);
}
// SONUÇ:
// code 39
// name Kırklareli
// population 369.347
Array.prototype.forEach() Metodu
Array.prototype.forEach() yöntemi ile de dizinin öğelerine erişilebilir;
Kod
var cities = ["Kırklareli", "Kırşehir", "Kocaeli", "Konya", "Kütahya"];
cities.forEach(function(item, index, array) {
console.log(index, item);
});
// SONUÇ:
// 0 Kırklareli
// 1 Kırşehir
// 2 Kocaeli
// 3 Konya
// 4 Kütahya
Array.prototype.map() Metodu
Array.prototype.map() metodu dizinin öğelerinde işlem yapıp sonucu farklı bir dizi olarak döndürür. Map metodu ile dizinin tüm öğelerine erişilebilir;
Kod
var cities = ["Kırklareli", "Kırşehir", "Kocaeli", "Konya", "Kütahya"];
cities.map(function (item, index, array) {
console.log(index, item);
});
// SONUÇ:
// 0 Kırklareli
// 1 Kırşehir
// 2 Kocaeli
// 3 Konya
// 4 Kütahya
jQuery.each() Metodu
jQuery.each() döngüsü nesnenin tüm alanlarına ve değerlerine erişmek için kullanılır. Bu yöntemin kullanılabilmesi için jQuery kütüphanesinin sayfaya eklenmesi gerekmektedir.
Kod
var cities = ["Kırklareli", "Kırşehir", "Kocaeli", "Konya", "Kütahya"];
$.each(cities, function(index, value) {
console.log(index, value);
});
// SONUÇ:
// 0 Kırklareli
// 1 Kırşehir
// 2 Kocaeli
// 3 Konya
// 4 Kütahya
Kaynaklar
- JavaScript Loops Explained: For Loop, While Loop, Do...while Loop, and More , freecodecamp.org, 15.10.2023 tarihinde alındı.
- Loops and iteration , developer.mozilla.org, 15.10.2023 tarihinde alındı.
- Array.prototype.forEach() , developer.mozilla.org, 15.10.2023 tarihinde alındı.
- Array.prototype.map() , developer.mozilla.org, 15.10.2023 tarihinde alındı.
- JavaScript Array Iteration , w3schools.com, 15.10.2023 tarihinde alındı.
- jQuery.each() , api.jquery.com, 15.10.2023 tarihinde alındı.
- 5 jQuery.each() Function Examples , sitepoint.com, 15.10.2023 tarihinde alındı.
Beğen