11-dars

JavaScript'da Loops

Kod yozayotganingizda, bir xil amalni 100 marta qayta-qayta yozish kerak bo'lgan vaziyatga tushganmisiz? Masalan, 1 dan 100 gacha sonlarni konsolga chiqarish yoki massivdagi barcha elementlarni render qilish.

Ana shunday holatlarda loops (sikllar) yordamga keladi.

Nima uchun loops kerak?

Dasturlashda DRY (Don't Repeat Yourself) degan muhim prinsip bor: "O'zingizni takrorlamang."
Loops aynan shu prinsipni amalga oshirishga yordam beradi.

Loopsiz kod:

console.log(1);
console.log(2);
console.log(3);
// ... va hokazo 100 gacha

Loop bilan:

for (let i = 1; i <= 100; i++) {
  console.log(i);
}

Farqni ko'ryapsizmi? Bir nechta qator kod yuzlab, hatto millionlab marta ishlay oladi.

---

1) for loop - An'anaviy sikl

Qachon ishlatiladi: takrorlanishlar soni oldindan ma'lum bo'lganda.

Sintaksis:

for (boshlangichQiymat; shart; qadam) {
  // Har bir qadamda bajariladigan kod
}

Real hayotiy misol - savatchadagi mahsulotlar narxini hisoblash:

const mahsulotlar = [
  { nom: "Non", narx: 5000 },
  { nom: "Sut", narx: 12000 },
  { nom: "Tuxum", narx: 20000 },
];

let jamiNarx = 0;
for (let i = 0; i < mahsulotlar.length; i++) {
  jamiNarx += mahsulotlar[i].narx;
  console.log(`${mahsulotlar[i].nom}: ${mahsulotlar[i].narx} so'm`);
}
console.log(`Jami: ${jamiNarx} so'm`);

Muhim eslatma: for loop uch qismdan iborat:

• let i = 0 - sikl boshlanishidan oldin bir marta bajariladi
• i < mahsulotlar.length - har bir qadamdan oldin tekshiriladi
• i++ - har bir qadamdan keyin bajariladi

---

2) while loop - Shart asosida ishlaydigan sikl

Qachon ishlatiladi: takrorlanishlar soni oldindan noma'lum bo'lganda, ya'ni biror shart bajarilib turgan paytda.

Real hayotiy misol - bankomatdan pul yechish:

let balans = 100000;
let yechilganPul = 0;

while (balans >= 10000) {
  console.log(`Balans: ${balans} so'm`);
  balans -= 10000; // 10,000 so'm yechamiz
  yechilganPul += 10000;
  console.log("10,000 so'm yechildi");
}

console.log(`Jami yechilgan pul: ${yechilganPul} so'm`);
console.log(`Qolgan balans: ${balans} so'm (10,000 so'mdan kam)`);

Ogohlantirish: while loopda cheksiz sikl (infinite loop) xavfi bor. Shart hech qachon false bo'lmasa, dastur to'xtamaydi.

// XAVFLI - BU KODNI ISHLATMANG!
while (true) {
  console.log("Bu hech qachon to'xtamaydi!");
}

---

3) do...while loop - Avval bajar, keyin tekshir

Qachon ishlatiladi: kod kamida bir marta bajarilishi kerak bo'lganda.

Real hayotiy misol - foydalanuvchidan parol so'rash:

let kiritilganParol;
const TOGRI_PAROL = "js123";

do {
  kiritilganParol = prompt("Parolni kiriting:");
  if (kiritilganParol !== TOGRI_PAROL) {
    console.log("Noto'g'ri parol! Qayta urinib ko'ring.");
  }
} while (kiritilganParol !== TOGRI_PAROL);

console.log("Xush kelibsiz!");

Farqi:

• while avval shartni tekshiradi
• do...while avval kodni bajaradi, keyin shartni tekshiradi

---

4) for...in loop - Obyekt kalitlari bo'ylab yurish

Qachon ishlatiladi: obyektning barcha xususiyatlari (property) bo'ylab yurish kerak bo'lganda.

Real hayotiy misol - foydalanuvchi profilini ko'rsatish:

const foydalanuvchi = {
  ism: "Alisher",
  yosh: 28,
  kasb: "Dasturchi",
  shahar: "Toshkent",
  telefon: "+998901234567",
};

console.log("=== FOYDALANUVCHI PROFILI ===");
for (let kalit in foydalanuvchi) {
  console.log(`${kalit}: ${foydalanuvchi[kalit]}`);
}

Yana bir misol:

const mashina = {
  model: "Nexia 3",
  yil: 2023,
  signalBer: function () {
    console.log("Bip-bip!");
  },
};

for (let key in mashina) {
  console.log(`${key}: ${mashina[key]}`);
}

Muhim eslatma: for...in ba'zi holatlarda prototip zanjiridagi xususiyatlarni ham ko'rsatishi mumkin. Shu sababli uni asosan obyektlar uchun ehtiyotkorlik bilan ishlating.

---

5) for...of loop - Iterable obyektlar uchun zamonaviy usul

Qachon ishlatiladi: Array, String, Map, Set kabi iterable obyektlar bilan ishlaganda.

Massiv bilan

const mevalar = ["Olma", "Banan", "Apelsin", "Uzum", "Anor"];

for (let meva of mevalar) {
  console.log(`Men ${meva}ni yaxshi ko'raman`);
}

Taqqoslash uchun an'anaviy for:

for (let i = 0; i < mevalar.length; i++) {
  console.log(`Men ${mevalar[i]}ni yaxshi ko'raman`);
}

Ikkalasi bir xil natija beradi, lekin for...of odatda tozaroq va o'qilishi osonroq bo'ladi.

String bilan

const ism = "JavaScript";

for (let harf of ism) {
  console.log(harf);
}

DOM elementlar bilan (frontend amaliyot)

const paragraflar = document.querySelectorAll("p");

for (let p of paragraflar) {
  p.style.color = "blue";
  p.style.fontWeight = "bold";
}

---

6) Zamonaviy iteratsiya metodlari: map, filter, reduce

map, filter va reduce nafaqat iteratsiya qiladi, balki ma'lumotlarni qayta ishlashning zamonaviy, funksional usulini beradi. Ular ayniqsa React va Vue kabi freymvorklarda juda ko'p ishlatiladi.

map

Har bir elementni o'zgartirib, yangi massiv yaratadi.

const narxlar = [100, 200, 300];
const qimmatNarxlar = narxlar.map((narx) => narx * 2); // [200, 400, 600]

filter

Faqat shartga mos elementlarni qaytaradi.

const sonlar = [1, 2, 3, 4, 5, 6];
const juftSonlar = sonlar.filter((son) => son % 2 === 0); // [2, 4, 6]

reduce

Massivni bitta yakuniy qiymatga aylantiradi (masalan, yig'indi, obyekt yoki boshqa tuzilma).

const xarajatlar = [12000, 45000, 8000, 23000];
const jamiXarajat = xarajatlar.reduce((jami, joriy) => jami + joriy, 0);

console.log(jamiXarajat); // 88000

---

📝 Xulosa

• Loops kod takrorini kamaytiradi va DRY prinsipini qo'llashga yordam beradi
• for - takror soni aniq bo'lsa
• while - shartga bog'liq takrorlanishlarda
• do...while - kod kamida bir marta bajarilishi kerak bo'lsa
• for...in - obyekt kalitlari bo'ylab yurish uchun
• for...of - iterable obyektlar bilan ishlashning qulay usuli
• map, filter, reduce - zamonaviy va funksional yondashuv

Bu mavzuni yaxshi o'zlashtirsangiz, keyingi darslarda massivlar bilan ishlash, ma'lumotlarni transformatsiya qilish va komponent ichidagi state bilan ishlash ancha osonlashadi.