Chapter 14 — Higher-Order Functions

JavaScript'da function'lar — birinchi darajali qiymatlar (first-class citizens), ya'ni ularni variable'ga saqlash, argument sifatida uzatish va boshqa functiondan qaytarish mumkin. Aynan shu xususiyat Higher-Order Functionlarni yuzaga keltiradi.

---

14.1 Higher-Order Function nima?

Simple Explanation

Higher-Order Function (HOF) — boshqa functionni argument sifatida qabul qiladigan yoki function qaytaradigan function.

Why Does It Exist?

HOF orqali kodni qayta ishlatish, mavhumlashtirish (abstraction) va o'qish osonlashadi — takrorlanuvchi mantiqni bir joyga jamlab, faqat farq qiladigan qismini parametr sifatida berish mumkin.

Real-Life Analogy

🏭 HOF'ni "moslashuvchan ishlab chiqarish liniyasi" deb tasavvur qiling: liniyaning o'zi o'zgarmaydi, lekin unga turli "vazifa qog'ozlari" (function'lar) berish orqali turlicha natija olish mumkin.

Example — Function argument sifatida

script.js
JavaScriptNusxalash
01function greet(name) {
02    return "Salom, " + name;
03}
04 
05function processUser(name, callback) {
06    return callback(name);
07}
08 
09console.log(processUser("Ali", greet)); // "Salom, Ali"

Explanation

processUser — HOF, chunki u callback nomli functionni argument sifatida qabul qiladi va uni ichkarida chaqiradi.

Example — Function qaytaruvchi HOF

Bu — Chapter 12'da ko'rgan createMultiplier misolining o'zi:

script.js
JavaScriptNusxalash
01function createMultiplier(multiplier) {
02    return function (number) {
03        return number * multiplier;
04    };
05}

🔗 Connection
Aslida Closure (Chapter 12) va Higher-Order Function bir-biri bilan chambarchas bog'liq — function qaytaruvchi HOF'lar deyarli har doim closure yaratadi.

14.2 forEach() — Array elementlari ustida amal bajarish

Simple Explanation

forEach() — array'ning har bir elementi uchun berilgan functionni chaqiradi.

Example

script.js
JavaScriptNusxalash
01let numbers = [1, 2, 3, 4];
02 
03numbers.forEach(function (num) {
04    console.log(num * 2);
05});
06// 2, 4, 6, 8

Arrow function bilan qisqaroq

script.js
JavaScriptNusxalash
01numbers.forEach(num => console.log(num * 2));

⚠️ Common Mistake
forEach() hech narsa qaytarmaydi (undefined). Agar yangi array kerak bo'lsa, map() ishlatish kerak (keyingi bo'lim).

14.3 map() — Yangi array yaratish

Simple Explanation

map() — har bir elementni o'zgartirib, yangi array qaytaradi. Asl array o'zgarmaydi.

Example

script.js
JavaScriptNusxalash
01let numbers = [1, 2, 3, 4];
02 
03let doubled = numbers.map(num => num * 2);
04 
05console.log(doubled); // [2, 4, 6, 8]
06console.log(numbers); // [1, 2, 3, 4] — o'zgarmagan

Real-Life Analogy

🏭 map() — bu konveyer: har bir mahsulot (element) stansiyadan o'tadi, qandaydir o'zgartirish (masalan, rang berish) qo'llaniladi, va natijada yangi mahsulotlar to'plami hosil bo'ladi — eskisi esa saqlanib qoladi.

Amaliy misol — Object array bilan

script.js
JavaScriptNusxalash
01let users = [
02    { name: "Ali", age: 25 },
03    { name: "Vali", age: 30 }
04];
05 
06let names = users.map(user => user.name);
07 
08console.log(names); // ["Ali", "Vali"]

14.4 filter() — Elementlarni saralash

Simple Explanation

filter() — berilgan shartga mos keladigan elementlardangina iborat yangi array qaytaradi.

Example

script.js
JavaScriptNusxalash
01let numbers = [1, 2, 3, 4, 5, 6];
02 
03let evens = numbers.filter(num => num % 2 === 0);
04 
05console.log(evens); // [2, 4, 6]

Explanation

filter() ichidagi function har bir element uchun true yoki false qaytarishi kerak. true bo'lsa, element yangi array'ga qo'shiladi.

Amaliy misol

script.js
JavaScriptNusxalash
01let users = [
02    { name: "Ali", age: 17 },
03    { name: "Vali", age: 25 },
04    { name: "Karim", age: 30 }
05];
06 
07let adults = users.filter(user => user.age >= 18);
08 
09console.log(adults); // Vali va Karim

🔗 Connection
map() va filter()ni birga zanjir (chain) qilib ishlatish mumkin — bu Chapter 15'da yanada chuqurroq o'rganiladi.

14.5 ⚠️ Qiyin mavzu: reduce() — Array'ni bitta qiymatga "yig'ish"

Simple Explanation

reduce() — array'ning barcha elementlarini birlashtirib, bitta natija (son, string, object — istalgan narsa) hosil qiladi. Bu — array metodlari ichida eng ko'p tushunish qiyin bo'lgani, chunki uning ishlash mantig'i boshqalarga o'xshamaydi.

Real-Life Analogy

🍲 reduce()ni ovqat tayyorlashga o'xshating: siz bir nechta ingredientni (array elementlari) ketma-ket qozonga solasiz, va oxirida bitta taom (yakuniy natija) hosil bo'ladi. Har bir ingredient qo'shilganda, "qozon hozircha qanday holatda" (accumulator) yangilanib boradi.

Sintaksis

script.js
JavaScriptNusxalash
01array.reduce(function (accumulator, currentValue) {
02    // accumulator — "hozirgacha to'plangan natija"
03    // currentValue — joriy element
04    return yangiAccumulator;
05}, boshlangichQiymat);

Eng oddiy misol — sonlar yig'indisi

script.js
JavaScriptNusxalash
01let numbers = [1, 2, 3, 4];
02 
03let sum = numbers.reduce(function (acc, current) {
04    return acc + current;
05}, 0);
06 
07console.log(sum); // 10

Bosqichma-bosqich nima sodir bo'lyapti?

Yakuniy natija: 10

Diagram

code.text
TEXTNusxalash
01boshlang'ich: acc = 0
02   ↓
03[1, 2, 3, 4] elementlari orqali o'tiladi
04   ↓
05acc=0 + 1 → acc=1
06acc=1 + 2 → acc=3
07acc=3 + 3 → acc=6
08acc=6 + 4 → acc=10 (yakuniy natija)

💡 Key Idea
Ikkinchi argument (0) — boshlang'ich qiymat. Agar uni bermasangiz, reduce() array'ning birinchi elementini boshlang'ich acc sifatida oladi — lekin bu ba'zida kutilmagan natijaga olib kelishi mumkin, shuning uchun boshlang'ich qiymatni har doim aniq yozish tavsiya etiladi.

Murakkabroq misol — Array'ni Object'ga aylantirish

script.js
JavaScriptNusxalash
01let fruits = ["olma", "banan", "olma", "uzum", "banan", "olma"];
02 
03let count = fruits.reduce(function (acc, fruit) {
04    acc[fruit] = (acc[fruit] || 0) + 1;
05    return acc;
06}, {});
07 
08console.log(count); // { olma: 3, banan: 2, uzum: 1 }

Explanation

Bu yerda acc — son emas, balki object. Har bir mevaning nechta marta uchraganini hisoblab boradi.

⚠️ Common Mistake
reduce() ichida return yozishni unutish — bu accni keyingi qadamda undefined qilib qo'yadi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
[5, 10, 15, 20] array'idagi har bir sonni 2ga bo'lib, yangi array hosil qiling (map() yordamida).
Required Concepts:

• map()
  Hint:
  array.map(num => num / 2) dan foydalaning.

---

🟡 Exercise 2 — Medium

Task:
Berilgan array ichidan faqat 18 yoshdan katta foydalanuvchilarning ismlarini oling (filter() va map()ni birga ishlating):

script.js
JavaScriptNusxalash
01let users = [
02    { name: "Ali", age: 15 },
03    { name: "Vali", age: 22 },
04    { name: "Nodira", age: 19 }
05];

Required Concepts:

• filter()
• map()
• Method chaining
  Hint:
  Avval filter() bilan saralang, keyin map() bilan faqat ismlarni oling.

---

🔴 Exercise 3 — Hard

Task:
reduce() yordamida array ichidagi eng katta sonni toping (Math.max ishlatmasdan).

script.js
JavaScriptNusxalash
01let numbers = [4, 12, 8, 25, 3];

Required Concepts:

• reduce()
• Comparison
  Hint:
  Har bir qadamda acc va currentni solishtirib, kattasini qaytaring.

🔮 Predict the Output

script.js
JavaScriptNusxalash
01let numbers = [1, 2, 3];
02 
03let result = numbers.map(num => num * 2).filter(num => num > 3);
04 
05console.log(result);

🧠 Think first! Javobni ko'rishdan oldin kamida 30 soniya o'ylang.

<details> <summary>Answer</summary> [4, 6]

Why?
Avval map(num => num * 2) — [2, 4, 6] hosil qiladi. Keyin filter(num => num > 3) — faqat 3dan katta elementlarni qoldiradi: [4, 6].

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor:

script.js
JavaScriptNusxalash
01let numbers = [1, 2, 3, 4];
02 
03let sum = numbers.reduce(function (acc, current) {
04    acc + current;
05});
06 
07console.log(sum);

Your Task:

• Kod ishga tushganda nima bo'lishini bashorat qiling.
• Ikkita xatoni aniqlang.
• Kodni tuzating.

<details> <summary>Solution</summary> Muammo 1: return yozilmagan, shuning uchun har bir qadamda acc — undefined bo'lib qoladi. Muammo 2: Boshlang'ich qiymat (0) berilmagan.

Yechim:

script.js
JavaScriptNusxalash
01let numbers = [1, 2, 3, 4];
02 
03let sum = numbers.reduce(function (acc, current) {
04    return acc + current;
05}, 0);
06 
07console.log(sum); // 10

</details>

📌 Chapter Summary

• Higher-Order Function — function qabul qiladigan yoki qaytaradigan function.
• forEach() — har bir element uchun amal bajaradi, hech narsa qaytarmaydi.
• map() — har bir elementni o'zgartirib, yangi array qaytaradi.
• filter() — shartga mos elementlarni saralaydi.
• reduce() — barcha elementlarni bitta natijaga "yig'adi".

🎯 Key Takeaways

• map, filter, reduce — asl array'ni o'zgartirmaydi (immutable yondashuv).
• reduce()ning boshlang'ich qiymatini har doim aniq belgilash tavsiya etiladi.
• Method chaining (map().filter()) kodni qisqa va o'qish oson qiladi.
• forEach() yangi array yaratmaydi — faqat "har biri uchun amal bajarish" uchun ishlatiladi.
• reduce() — eng moslashuvchan metod, u orqali map va filterning o'zini ham qayta yaratish mumkin.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01array.forEach(item => { });          // amal bajarish, qaytarmaydi
02array.map(item => item * 2);         // yangi array (o'zgartirilgan)
03array.filter(item => item > 5);      // yangi array (saralangan)
04array.reduce((acc, item) => acc + item, 0); // bitta natija

---