Skip to main content

+20 Masala

Oson (JavaScript mashqi): 

  1. [5, 12, 8, 130, 44] massividan 10 dan katta sonlarni filter bilan ajrating.
  2. Ismlar massivini (["ali", "vali"]) map bilan bosh harfi kattaga aylantiring (["Ali", "Vali"]).
  3. reduce bilan [10, 20, 30] massivining yig'indisini toping. 
  4. Obyektdan destructuring bilan name va emailni ajratib chiqaring. 
  5. Ikki massivni spread operatori bilan birlashtiring va dublikatlarni Set bilan olib tashlang. 
  6. Arrow function yozing: ikki sonni qabul qilib, kattasini qaytaradi (ternary bilan). 
  7. const, let, var farqini 3 ta misol bilan tushuntiring (kommentariy yozing). 
  8. Obyekt massivini ([{id:1,name:"a"}]) faqat namelar massiviga map bilan aylantiring.

O'rta: 

9. async/await bilan https://jsonplaceholder.typicode.com/users dan ma'lumot oling va konsol'ga chiqaring.

10. Funksiya yozing: massiv qabul qilib, eng katta va eng kichik elementni {min, max} obyekt sifatida qaytarsin.

11. map + filterni zanjir qiling: sonlar massividan juftlarini ikki barobar oshiring.

12. Obyektni spread bilan "yangilang" (bittasini o'zgartirib, qolganini saqlab) — immutable update.

13. Promise.all bilan 3 ta API'dan parallel ma'lumot oling.

14. reduce bilan obyektlar massivini ID bo'yicha guruhlang (group by).

15. Optional chaining (?.) va nullish coalescing (??) bilan xavfsiz qiymat o'qing.

Qiyin: 

16. Vite bilan yangi loyiha yarating va App.jsx'da o'z ismingizni chiqaring.

17. package.json'dagi dependencies va devDependencies farqini yozib tushuntiring.

18. Sof JavaScript bilan kichik "todo" mantiqini yozing (qo'shish/o'chirish funksiyalari, hali UI yo'q).

19. debounce funksiyasini noldan yozing (keyin React'da kerak bo'ladi).

20. Closure tushunchasini misol bilan tushuntiring: counter funksiyasi yarating.

✅ Qiyin masalalar yechimi (16–20)

16 — Vite loyiha + ism:

// src/App.jsx
export default function App() {
  const ism = "Oqil";
  return <h1>Salom, mening ismim {ism}</h1>;
}

npm create vite@latest → React tanlang → npm install → npm run dev.

 

17 — dependencies vs devDependencies: - dependencies — ilova ishlashi uchun kerak bo'lgan paketlar (react, react-dom). Production build'ga kiradi. - devDependencies — faqat ishlab chiqishda kerak (vite, eslint, vitest). Tayyor mahsulotga kirmaydi. - O'rnatish: npm i react (dependencies) vs npm i -D vite (devDependencies).

18 — Todo mantiqi (sof JS, UI'siz):

let todos = [];
let nextId = 1;

function addTodo(text) {
  todos.push({ id: nextId++, text, done: false });
}
function removeTodo(id) {
  todos = todos.filter((t) => t.id !== id);
}
function toggleTodo(id) {
  todos = todos.map((t) => (t.id === id ? { ...t, done: !t.done } : t));
}

Diqqat: o'zgartirishda yangi massiv/obyekt yasaymiz (filter, map, {...t}) — bu React'da state yangilashning asosiy qoidasi (keyingi darajada ko'ramiz).

 

19 — debounce noldan:

function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}
// Har chaqirilganda oldingi taymerni bekor qiladi — faqat "tinchlik"dan keyin ishlaydi.
// Qidiruv input'ida har harfda emas, yozib bo'lgach API chaqirish uchun ishlatamiz.

 

20 — Closure bilan counter:

function createCounter() {
  let count = 0; // closure ichida "yashiringan", tashqaridan to'g'ridan kirib bo'lmaydi
  return {
    increment: () => ++count,
    decrement: () => --count,
    value: () => count,
  };
}
const c = createCounter();
c.increment(); c.increment();
console.log(c.value()); // 2

count faqat qaytarilgan funksiyalar orqali o'zgaradi — bu closure. useState ham xuddi shu g'oyaga asoslanadi: holat funksiya "ichida" saqlanadi.

 

No comments to display

Back to top