Chapter 41 — Symbols, Map & Set

Bu bob bilan PART 6 (Modern JavaScript) yakunlanadi. Bu bobda ES6'da qo'shilgan, ammo kamroq ma'lum bo'lgan uchta muhim vosita — Symbol, Map va Setni o'rganamiz.

---

41.1 Symbol nima?

Simple Explanation

Symbol — Chapter 2'da o'rgangan 7 ta primitive data type'dan biri (typeof value === "symbol"), va uning eng muhim xususiyati: har bir yaratilgan Symbol — butunlay noyob (unique), hech qachon boshqasiga teng bo'lmaydi.

Example

script.js
JavaScriptNusxalash
01let sym1 = Symbol("id");
02let sym2 = Symbol("id");
03 
04console.log(sym1 === sym2); // false — hatto bir xil tavsif bilan ham!

Explanation

Garchi ikkalasi ham bir xil "id" tavsifi bilan yaratilgan bo'lsa-da, ular — ikkita butunlay boshqa qiymat. Bu — string yoki sonlardan ("id" === "id" — true) tubdan farq qiladi.

Nima uchun bu foydali? — Object property to'qnashuvining oldini olish

script.js
JavaScriptNusxalash
01let user = {
02    name: "Ali"
03};
04 
05let uniqueId = Symbol("id");
06 
07user[uniqueId] = 12345;
08 
09console.log(user); // { name: "Ali", [Symbol(id)]: 12345 }

Explanation

Symbol'lar ko'pincha object'ga boshqa kod bilan hech qachon to'qnashmaydigan noyob "yashirin" propertylar qo'shish uchun ishlatiladi — bu, masalan, kutubxonalar o'z ichki ma'lumotlarini foydalanuvchi object'lariga xavfsiz "qo'shib qo'yish" uchun foydalidir.

💡 Key Idea
Symbol bilan yaratilgan propertylar — oddiy for...in yoki Object.keys() orqali ko'rinmaydi, bu ularni "yarim-yashirin" qiladi.

41.2 Map — Zamonaviy kalit-qiymat tuzilmasi

Simple Explanation

Map — Chapter 8'dagi oddiy object'ga o'xshaydi (kalit-qiymat juftliklarini saqlaydi), lekin bir nechta muhim afzalliklarga ega.

Jadval — Map vs Object

Example

script.js
JavaScriptNusxalash
01let userRoles = new Map();
02 
03userRoles.set("Ali", "admin");
04userRoles.set("Vali", "user");
05 
06console.log(userRoles.get("Ali")); // "admin"
07console.log(userRoles.size);       // 2
08console.log(userRoles.has("Vali")); // true
09 
10userRoles.delete("Vali");
11console.log(userRoles.size); // 1

⚠️ Qiyin mavzu: Map'da object'larni kalit sifatida ishlatish

Bu — Map'ning eng noyob va kuchli xususiyati, oddiy object bilan mutlaqo imkonsiz bo'lgan narsa:

script.js
JavaScriptNusxalash
01let user1 = { name: "Ali" };
02let user2 = { name: "Vali" };
03 
04let userScores = new Map();
05 
06userScores.set(user1, 95);
07userScores.set(user2, 88);
08 
09console.log(userScores.get(user1)); // 95

Explanation

Oddiy object'da, kalit sifatida faqat string (yoki Symbol) ishlatish mumkin — agar object'ni kalit sifatida berilsa, u avtomatik ravishda "[object Object]" stringiga aylantiriladi (Chapter 36.4'da shunga o'xshash muammoni ko'rgan edik). Map bilan esa, haqiqiy object'larning o'zi to'g'ridan-to'g'ri, noyob kalit sifatida ishlatilishi mumkin.

Map bilan iteratsiya

script.js
JavaScriptNusxalash
01for (let [key, value] of userRoles) {
02    console.log(key + ": " + value);
03}

🔗 Connection
Bu — Chapter 16'da o'rgangan Array Destructuring'ning Map bilan qo'llanilishi: har bir Map elementi — [key, value] juftligi sifatida keladi.

41.3 Set — Faqat noyob qiymatlar to'plami

Simple Explanation

Set — Chapter 7'dagi array'ga o'xshaydi, lekin unda hech qachon takrorlanuvchi qiymatlar bo'lmaydi.

Example

script.js
JavaScriptNusxalash
01let numbers = new Set([1, 2, 2, 3, 3, 3, 4]);
02 
03console.log(numbers); // Set(4) {1, 2, 3, 4} — takrorlanganlar avtomatik olib tashlangan
04console.log(numbers.size); // 4

Jadval — Asosiy metodlar

Amaliy misol — Array'dan takrorlanuvchilarni olib tashlash

Bu — Chapter 7'ning "Hard" mashqida qo'lda yozilgan vazifaning ancha oson yechimi:

script.js
JavaScriptNusxalash
01let numbersWithDuplicates = [1, 2, 2, 3, 4, 4, 5];
02 
03let uniqueNumbers = [...new Set(numbersWithDuplicates)];
04 
05console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

Explanation

new Set(array) — array'ni avtomatik ravishda faqat noyob qiymatlarga "tozalaydi". Spread operator (Chapter 16) — Set'ni qayta array'ga aylantiradi.

🔥 Important
Bu — takrorlanuvchi elementlarni olib tashlashning eng qisqa va samarali usuli, oldingi (Chapter 7) qo'lda includes() bilan yozilgan usuldan ancha tezroq va qisqaroq.

41.4 ⚠️ Qiyin mavzu: Map/Set'ning size bilan Object/Array'ning length farqi

Simple Explanation

Ko'p yangi boshlovchilar Map/Set'da ham .length ishlatishga urinishadi, lekin bu ishlamaydi.

Muammoli misol

script.js
JavaScriptNusxalash
01let mySet = new Set([1, 2, 3]);
02 
03console.log(mySet.length); // undefined!
04console.log(mySet.size);   // 3 — to'g'ri

⚠️ Common Mistake
Qoida: Array'larda — .length, Map/Set'larda — .size. Bu ikkisini chalkashtirish — eng ko'p uchraydigan xatolardan biri.

41.5 WeakMap va WeakSet (qisqacha)

Simple Explanation

WeakMap va WeakSet — Map/Setga juda o'xshaydi, lekin ularning kalitlari (yoki elementlari) faqat object bo'lishi mumkin, va agar boshqa hech qayerda o'sha object'ga havola qolmasa, Garbage Collector uni avtomatik xotiradan tozalaydi.

🔗 Connection
Bu — xotira boshqaruvi bilan bog'liq ilg'or mavzu, Chapter 43'da (Memory Management) biroz chuqurroq to'xtalamiz. Kundalik dasturlashda oddiy Map/Set yetarli bo'ladi.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
new Set([1, 1, 2, 2, 3]) yordamida Set yarating va uning sizeini konsolga chiqaring.
Required Concepts:

• Set
  Hint:
  let s = new Set([1, 1, 2, 2, 3]); console.log(s.size);

🟡 Exercise 2 — Medium

Task:
Map yordamida 3 ta mahsulot va ularning narxlarini saqlang ("olma" → 5000, "non" → 3000, "sut" → 8000). for...of bilan barcha mahsulot va narxlarni chiqaring.
Required Concepts:

• Map, for...of destructuring
  Hint:
  Chapter 41.2'dagi misolga o'xshab yozing.

🔴 Exercise 3 — Hard

Task:
Ikkita array berilgan. Set yordamida ularning kesishmasi (ikkalasida ham mavjud elementlar)ni toping, filter() va has() metodlaridan foydalaning:

script.js
JavaScriptNusxalash
01let arr1 = [1, 2, 3, 4, 5];
02let arr2 = [3, 4, 5, 6, 7];
03// Natija: [3, 4, 5]

Required Concepts:

• Set.has()
• filter() (Chapter 14)
  Hint:
  let set2 = new Set(arr2); let intersection = arr1.filter(x => set2.has(x));

🔮 Predict the Output

script.js
JavaScriptNusxalash
01let obj1 = { name: "A" };
02let obj2 = { name: "A" };
03 
04let objectMap = {};
05objectMap[obj1] = "birinchi";
06objectMap[obj2] = "ikkinchi";
07 
08console.log(Object.keys(objectMap).length);
09 
10let realMap = new Map();
11realMap.set(obj1, "birinchi");
12realMap.set(obj2, "ikkinchi");
13 
14console.log(realMap.size);

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

<details> <summary>Answer</summary> 1 2

Why?
Oddiy object (objectMap) — obj1 va obj2ni kalit sifatida ishlatganda, ikkalasi ham .toString() orqali "[object Object]" stringiga aylanadi — bu bitta xuddi shu kalit, shuning uchun ikkinchisi birinchisini "bosib o'tadi" va faqat 1 ta kalit qoladi. Map esa haqiqiy object'larni alohida, noyob kalitlar sifatida saqlaydi, shuning uchun size — 2.

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor:

script.js
JavaScriptNusxalash
01let uniqueNames = new Set();
02 
03uniqueNames.add("Ali");
04uniqueNames.add("Vali");
05 
06console.log(uniqueNames.length); // dasturchi 2 kutgan, lekin undefined chiqadi

Your Task:

• Nima uchun .length undefined ekanini tushuntiring.
• Kodni tuzating.

<details> <summary>Solution</summary> Muammo: Set — array emas, unda .length propertysi mavjud emas. To'g'ri property nomi — .size.

Yechim:

script.js
JavaScriptNusxalash
01let uniqueNames = new Set();
02 
03uniqueNames.add("Ali");
04uniqueNames.add("Vali");
05 
06console.log(uniqueNames.size); // 2

</details>

📌 Chapter Summary

• Symbol — har doim noyob bo'lgan primitive type, object'larga "yashirin" property qo'shish uchun ishlatiladi.
• Map — istalgan turdagi (shu jumladan object) kalitlarga ega, tartibni saqlaydigan kalit-qiymat tuzilmasi.
• Set — faqat noyob qiymatlarni saqlovchi to'plam, takrorlanishlarni avtomatik olib tashlaydi.
• Map/Set — .size ishlatadi, Array/String esa .length ishlatadi.

🎯 Key Takeaways

• Set — array'dan takrorlanuvchi elementlarni olib tashlashning eng qulay usuli ([...new Set(array)]).
• Map — object kalitlarni qo'llab-quvvatlaydi, oddiy object bunga qodir emas.
• Map/Set — har doim .size, hech qachon .length ishlatmang.
• Symbol — noyoblik kafolatlangan qiymatlar kerak bo'lganda ishlatiladi.
• for...of — Map va Set bilan to'g'ridan-to'g'ri, qulay ishlaydi.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01// Symbol
02let sym = Symbol("description");
03 
04// Map
05let map = new Map();
06map.set("key", "value");
07map.get("key");
08map.has("key");
09map.delete("key");
10map.size;
11 
12// Set
13let set = new Set([1, 2, 2, 3]);
14set.add(4);
15set.has(2);
16[...set]; // array'ga aylantirish

---