📚 Mundarija#
- ES6+ Asosiy Sintaksis (1–15)
- Kuchli Array va Kolleksiya Metodlari (16–30)
- Async/Async va Promise Musterilari (31–40)
- ES2020–2021 Yangiliklari (41–55)
- ES2022–2023 Innovatsiyalari (56–70)
- ES2024 Eng So‘nggi Xususiyatlar (71–85)
- ES2025–2026 Kutilayotgan Yangiliklar (86–100)
🔥 ES6+ Asosiy Sintaksis#
1. const va let — Blok Skopli O‘zgaruvchilar#
var o‘rniga const (o‘zgarmas) va let (o‘zgaruvchan) ishlatish:
const API_URL = 'https://api.example.com';
let count = 0;
count++;
2. Arrow Funksiyalar#
Qisqa sintaksis va this ni avtomatik bog‘lash:
const double = x => x * 2;
const greet = (name, age) => `Salom, ${name}! Siz ${age} yoshdasiz.`;
3. Template Literallar#
Matn ichida ${ } yordamida ifodalarni joylashtirish:
const name = "John";
const message = `Salom, ${name}! Bugun ${new Date().toLocaleDateString()}`;
4. Destructuring (Yoyish)#
Obyekt va massivlarni oson ajratib olish:
const { name, age, city = 'Noma\'lum' } = user;
const [first, second, ...rest] = arr;
5. Spread Operator (...)#
Massiv va obyektlarni nusxalash yoki birlashtirish:
const newArr = [...oldArr, 4, 5];
const newObj = { ...oldObj, newKey: 'value' };
const merged = { ...obj1, ...obj2 };
6. Rest Parametrlar#
Funksiyaga cheksiz sonli argumentlarni yig‘ish:
function sum(...numbers) {
return numbers.reduce((acc, n) => acc + n, 0);
}
sum(1, 2, 3, 4, 5); // 15
7. Default Parametrlar#
Funksiya parametrlariga standart qiymat berish:
function greet(name = 'Mehmon', age = 18) {
return `${name}, ${age} yosh`;
}
8. Shorthand Property Names#
Obyekt yaratishda qisqa yozuv:
const name = 'John', age = 30;
const user = { name, age }; // { name: 'John', age: 30 }
9. Computed Property Names#
Obyekt kalitlarini dinamik yaratish:
const key = 'status';
const obj = {
[key]: 'active',
['user_' + Date.now()]: 'value'
};
10. Method Definitions#
Obyekt metodlarini qisqa yozish:
const obj = {
getName() {
return this.name;
}
};
11. Classes (Sintaktik Shakar)#
Prototype asosida klasslar:
class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(`${this.name} ovoz chiqaradi`);
}
}
12. Class Getters va Setters#
Obyekt xususiyatlarini nazorat qilish:
class User {
get fullName() {
return `${this.firstName} ${this.lastName}`;
}
set age(value) {
if (value < 0) throw new Error('Yosh manfiy bo‘lishi mumkin emas');
this._age = value;
}
}
13. Static Methods and Properties#
Klassga tegishli metod va xususiyatlar:
class MathUtils {
static PI = 3.14159;
static circleArea(radius) {
return this.PI * radius * radius;
}
}
14. Private Fields (#)#
Haqiqiy privat xususiyatlar:
class BankAccount {
#balance = 0;
deposit(amount) {
this.#balance += amount;
}
getBalance() {
return this.#balance;
}
}
15. Optional Chaining (?.)#
Xatoliksiz chuqur obyektlarni o‘qish:
const city = user?.address?.city ?? 'Noma\'lum';
const result = obj?.method?.();
🛠 Kuchli Array va Kolleksiya Metodlari#
16. map() — Transformatsiya#
Har bir elementni o‘zgartirish:
const doubled = [1, 2, 3].map(x => x * 2); // [2, 4, 6]
17. filter() — Filtrlash#
Shartga mos elementlarni olish:
const evens = [1, 2, 3, 4, 5].filter(x => x % 2 === 0); // [2, 4]
18. reduce() — Yig‘ish#
Massivni bitta qiymatga yig‘ish:
const sum = [1, 2, 3, 4].reduce((acc, x) => acc + x, 0); // 10
19. reduceRight() — O‘ngdan yig‘ish:#
const result = ['a', 'b', 'c'].reduceRight((acc, x) => acc + x); // 'cba'
20. find() — Birinchi mos element:#
const found = users.find(user => user.id === 5);
21. findIndex() — Birinchi mos indeks:#
const index = users.findIndex(user => user.id === 5);
22. some() — Kamida bitta mos:#
const hasAdults = users.some(user => user.age >= 18);
23. every() — Hammasi mos:#
const allAdults = users.every(user => user.age >= 18);
24. flat() — Massivni tekislash (yassilash):#
const flattened = [1, [2, [3, 4]]].flat(2); // [1, 2, 3, 4]
25. flatMap() — Map + Flat:#
const result = arr.flatMap(x => [x, x * 2]);
26. sort() — Tartiblash:#
const sorted = numbers.sort((a, b) => a - b);
27. includes() — Mavjudlikni tekshirish:#
const exists = arr.includes(3);
28. at() — Indeks bo‘yicha element (manfiy indekslar bilan):#
const last = arr.at(-1); // Oxirgi element
29. toSorted() — Yangi massiv qaytaruvchi sort (ES2023):#
const sorted = arr.toSorted((a, b) => a - b);
30. toReversed() — Yangi massiv qaytaruvchi reverse:#
const reversed = arr.toReversed();
⚡ Async/Async va Promise Musterilari#
31. Promise — Asinxron operatsiyalar:#
const promise = new Promise((resolve, reject) => {
setTimeout(() => resolve('Done'), 1000);
});
32. async/await — Sinkron ko‘rinishdagi asinxron kod:#
async function getData() {
const data = await fetch('/api/data');
return data.json();
}
33. Promise.all() — Parallel barcha promiselar:#
const results = await Promise.all([fetch1(), fetch2(), fetch3()]);
34. Promise.allSettled() — Barcha promiselar natijasi:#
const results = await Promise.allSettled([fetch1(), fetch2()]);
35. Promise.race() — Eng tez promisening natijasi:#
const result = await Promise.race([fetch1(), fetch2()]);
36. Promise.any() — Eng tez resolved promis:#
const result = await Promise.any([fetch1(), fetch2()]);
37. Promise.withResolvers() (ES2024) — Promise yaratish:#
const { promise, resolve, reject } = Promise.withResolvers();
38. for await...of — Async iteratsiya:#
for await (const item of asyncIterable) {
console.log(item);
}
39. AbortController — Requestlarni bekor qilish:#
const controller = new AbortController();
fetch('/api/data', { signal: controller.signal });
controller.abort(); // Bekor qilish
40. Top-level await — Module darajasida await:#
// modul.js
const data = await fetch('/api/data');
export default data;
🎯 ES2020–2021 Yangiliklari#
41. Nullish Coalescing (??)#
Faqat null yoki undefined bo‘lsa:
const value = input ?? 'default';
42. Optional Chaining (?.)#
Xatoliksiz chuqur o‘qish (allaqachon 15-bandda keltirilgan)
43. BigInt — Katta butun sonlar:#
const bigNumber = 9007199254740991n;
const result = bigNumber + 10n;
44. globalThis — Universal global obyekt:#
console.log(globalThis); // Brauzer: window, Node: global
45. String.matchAll() — Barcha mosliklar:#
const matches = 'test1 test2'.matchAll(/test(\d)/g);
46. Promise.any() — Yuqorida 36-bandda keltirilgan#
47. WeakRef va FinalizationRegistry — Xotira boshqaruvi:#
const weakRef = new WeakRef(obj);
const registry = new FinalizationRegistry(heldValue => {
console.log('Obyekt o‘chirildi', heldValue);
});
48. Logical Assignment Operators — &&=, ||=, ??=:#
x ??= defaultValue; // x = x ?? defaultValue
49. String.replaceAll() — Barcha mosliklarni almashtirish:#
'hello world'.replaceAll('o', '0'); // 'hell0 w0rld'
50. Numeric Separators — Raqamlarni o‘qishli yozish:#
const million = 1_000_000;
const bytes = 0xFF_FF_FF_FF;
51. Array.sort() — Barqaror tartiblash (endilikda stable)#
52. Function.toString() — Funksiya kodini olish#
53. import() — Dinamik import:#
const module = await import('./module.js');
54. import.meta — Modul meta ma’lumotlari:#
console.log(import.meta.url); // Modul URL
55. export * as namespace — Barcha eksportlarni yig‘ish:#
export * as utils from './utils.js';
🚀 ES2022–2023 Innovatsiyalari#
56. Class Static Blocks#
Statik xususiyatlarni murakkab inicializatsiya:
class MyClass {
static {
this.API_KEY = process.env.API_KEY;
this.CONFIG = this.loadConfig();
}
}
57. Private Fields In Classes (#) — 14-bandda keltirilgan#
58. Private Methods va Getters (#):#
class User {
#validate() {
return this.#password.length > 6;
}
get #id() { return this._id; }
}
59. Error.cause — Xatolik sababi:#
try {
await fetch('/api');
} catch (error) {
throw new Error('API xatosi', { cause: error });
}
60. Array.at() — 28-bandda keltirilgan#
61. Array.toSorted(), toReversed(), toSpliced(), with() — O‘zgartirilmagan massiv metodlari:#
const sorted = arr.toSorted(); // arr o‘zgarmaydi
const updated = arr.with(2, 10); // 2-indeksni 10 ga o‘zgartirish
62. Array.findLast() va findLastIndex() — Oxiridan qidirish:#
const lastEven = arr.findLast(x => x % 2 === 0);
63. Object.hasOwn() — HasOwnProperty ga alternativ:#
if (Object.hasOwn(obj, 'property')) {
// ...
}
64. Hashbang — Shebang (#!) qo‘llab-quvvatlash:#
#!/usr/bin/env node
console.log('Hello');
65. RegExp v flag — Extended Unicode:#
const regex = /[\p{Emoji}]/v;
66. Symbol.asyncDispose — Async resurslarni tozalash:#
await using resource = await getResource();
67. Source Maps yaxshilanishi#
68. WebAssembly integratsiyasi#
69. import assertions — Import deklaratsiyasi:#
import data from './data.json' assert { type: 'json' };
70. Array.group() va groupToMap() — Guruhlash (ES2024):#
const grouped = people.group(person => person.age);
🌟 ES2024 Eng So‘nggi Xususiyatlar#
71. Array.group() va Array.groupToMap()#
Massiv elementlarini guruhlash:
const people = [
{ name: 'Ali', age: 25 },
{ name: 'Vali', age: 30 },
{ name: 'Hasan', age: 25 }
];
const groupedByAge = people.group(person => person.age);
// { 25: [...], 30: [...] }
72. Promise.withResolvers()#
Promise yaratish va resolve/reject funksiyalarini olish:
const { promise, resolve, reject } = Promise.withResolvers();
setTimeout(resolve, 1000, 'Done');
await promise;
73. ArrayBuffer va SharedArrayBuffer yaxshilanishlari#
74. String.isWellFormed() va String.toWellFormed()#
Unicode stringlarni tekshirish/to‘g‘rilash:
const str = 'Hello\uD800';
console.log(str.isWellFormed()); // false
console.log(str.toWellFormed()); // 'Hello�'
75. Uint8Array dan Base64 ga o‘tkazish:#
const base64 = Uint8Array.from([72, 101, 108, 108, 111]).toBase64();
76. Intl.DurationFormat — Vaqt oralig‘ini formatlash:#
const format = new Intl.DurationFormat('uz');
console.log(format.format({ hours: 5, minutes: 30 }));
77. Temporal — Yangi sana/vaqt API (kutilmoqda):#
const now = Temporal.Now.plainDateTimeISO();
const future = now.add({ hours: 24 });
78. Pattern Matching — Pattern matching (match expression)#
79. Decorators — Dekoratorlar (Stage 3):#
@logged
class MyClass {
@readonly
property = 10;
}
80. Record va Tuple — O‘zgarmas ma’lumot tuzilmalari:#
const point = #[1, 2]; // Tuple
const user = #{ name: 'Ali', age: 25 }; // Record
81. Pipeline Operator (|>) — Funksiyalarni zanjirlash:#
const result = 10 |> double |> addFive |> toString;
82. Throw Expressions — Ifoda sifatida throw:#
const value = input ?? throw new Error('Input required');
83. WeakRef yaxshilanishi#
84. Structured Clone — Murakkab obyektlarni chuqur nusxalash:#
const clone = structuredClone(complexObject);
85. Atomics va Shared Memory yaxshilanishlari#
🔮 ES2025–2026 Kutilayotgan Yangiliklar#
86. ShadowRealm — Izolyatsiya qilingan JavaScript muhitlari:#
const realm = new ShadowRealm();
const result = await realm.importValue('./module.js', 'fn');
87. Iterator Helpers — Iteratorlarni qulay ishlatish:#
const iter = [1, 2, 3, 4].values();
const result = iter.filter(x => x % 2 === 0).map(x => x * 2).toArray();
88. Async Context — Async kontekstni kuzatish:#
const context = new AsyncContext();
context.runWith({ user: 'Ali' }, async () => {
const user = context.get('user');
});
89. RegExp Extended — Pattern matching yaxshilanishi#
90. Decimal — Aniq o‘nlik sonlar:#
const price = Decimal('0.1 + 0.2'); // Decimal('0.3')
91. Type Annotations — TypeScript ga o‘xshash tip yozuvlari:#
function add(a: number, b: number): number {
return a + b;
}
92. Import Reflections — Import metama’lumotlari#
93. Math funksiyalari yangilanishi:#
Math.sumPrecise()— Aniq yig‘indiMath.scale()— Sonni masshtablash
94. Float16 — 16-bitli float qo‘llab-quvvatlash#
95. Symbol.metadata — Metama’lumotlar#
96. Explicit Resource Management — using deklaratsiyasi:#
using file = await openFile('data.txt');
// Avtomatik yopiladi
97. Record va Tuple ni object/array bilan oson ishlatish#
98. JSON Modules — JSON modullarni import qilish#
99. Set metodlari (ES2025):#
const set1 = new Set([1, 2, 3]);
const set2 = new Set([2, 3, 4]);
console.log(set1.intersection(set2)); // Set(2) {2, 3}
console.log(set1.union(set2)); // Set(4) {1, 2, 3, 4}
console.log(set1.difference(set2)); // Set(1) {1}
console.log(set1.symmetricDifference(set2)); // Set(2) {1, 4}
console.log(set1.isSubsetOf(set2)); // false
console.log(set1.isSupersetOf(set2)); // false
console.log(set1.isDisjointFrom(set2)); // false
100. Map va WeakMap yangi metodlari:#
const map = new Map();
map.emplace('key', (existing) => {
if (existing) return existing + 1;
return 1;
});
📊 Qisqacha Jadval: ES Versiyalari Bo‘yicha Asosiy Yangiliklar#
| ES Versiyasi | Yili | Asosiy Yangiliklar |
|---|---|---|
| ES6 (ES2015) | 2015 | let/const, Arrow funksiyalar, Classes, Modules, Promises |
| ES7 (ES2016) | 2016 | Array.includes(), ** operator |
| ES8 (ES2017) | 2017 | async/await, Object.entries(), Object.values() |
| ES9 (ES2018) | 2018 | Rest/Spread, for await...of, Promise.finally() |
| ES10 (ES2019) | 2019 | Array.flat(), Object.fromEntries(), String.trimStart() |
| ES11 (ES2020) | 2020 | Optional Chaining ?., Nullish Coalescing ??, BigInt |
| ES12 (ES2021) | 2021 | String.replaceAll(), Promise.any(), Logical Assignments |
| ES13 (ES2022) | 2022 | Class static blocks, Private fields, Array.at() |
| ES14 (ES2023) | 2023 | toSorted(), findLast(), Array.with(), Hashbang |
| ES15 (ES2024) | 2024 | Array.group(), Promise.withResolvers(), Temporal |
| ES16 (ES2025) | 2025 | Set metodlari, ShadowRealm, Iterator Helpers |
🎁 Xulosa#
JavaScript doimiy rivojlanib borayotgan til bo‘lib, har yili yangi va foydali xususiyatlar qo‘shilmoqda. Ushbu 100 ta xususiyat:
- ✅ Kod sifatini oshiradi
- ✅ Ishlab chiqarish tezligini tezlashtiradi
- ✅ Xatoliklarni kamaytiradi
- ✅ Kodni o‘qishli va maintainable qiladi
- ✅ Zamonaviy web dasturlash talablariga javob beradi
📌 Tavsiyalar#
- Har doim zamonaviy JavaScript dan foydalaning
- TypeScript bilan birlashtirib ishlating
- ESLint va Prettier dan foydalaning
- Yangi xususiyatlarni loyihalarda sinab ko‘ring
- Doimiy o‘rganing va tajriba almashing
🔗 Qo‘shimcha Resurslar#
Postni do‘stlaringiz bilan ulashing va JavaScript mahoratingizni oshiring! 🚀
#JavaScript #ES2024 #ES2025 #WebDevelopment #Frontend #Coding #ModernJS

No comments yet.