Chapter 25 — Static Methods & Properties

Bu bob bilan PART 3 (Object-Oriented JavaScript) yakunlanadi. Chapter 22'da staticni qisqacha ko'rgan edik — endi uni chuqurroq, amaliy misollar bilan o'rganamiz.

---

25.1 Static nima va nima uchun kerak?

Simple Explanation

static — class'ning o'ziga tegishli (instance'larga emas) metod yoki property. Ya'ni, uni ishlatish uchun new orqali object yaratish shart emas.

Real-Life Analogy

🏭 Instance metodlari — bu "har bir mahsulot" (masalan, har bir mashina)ning o'z xususiyati (masalan, mashinaning rangi). Static metodlar esa — "zavodning o'zi" bajaradigan ish (masalan, "necha mashina ishlab chiqarildi" statistikasi) — bu alohida mashinaga emas, butun zavodga tegishli.

Example

script.js
JavaScriptNusxalash
01class MathUtils {
02    static PI = 3.14159;
03 
04    static square(x) {
05        return x * x;
06    }
07 
08    static isEven(x) {
09        return x % 2 === 0;
10    }
11}
12 
13console.log(MathUtils.PI);          // 3.14159
14console.log(MathUtils.square(5));   // 25
15console.log(MathUtils.isEven(4));   // true

Explanation

MathUtilsdan hech qachon new MathUtils() orqali object yaratilmadi — chunki bu class faqat "yordamchi" (utility) metodlar to'plami sifatida ishlatilmoqda.

⚠️ Common Mistake
Static metodni instance orqali chaqirishga urinish ishlamaydi:

script.js
JavaScriptNusxalash
01let obj = new MathUtils();
02obj.square(5); // ❌ TypeError: obj.square is not a function

25.2 Static vs Instance — solishtirish

Jadval

Example — ikkalasini birga ko'rish

script.js
JavaScriptNusxalash
01class Product {
02    static totalProducts = 0; // static property
03 
04    constructor(name, price) {
05        this.name = name;   // instance property
06        this.price = price; // instance property
07        Product.totalProducts++; // static propertyni yangilash
08    }
09 
10    getInfo() {
11        return `${this.name}: ${this.price} so'm`;
12    }
13 
14    static getTotalCount() {
15        return `Jami mahsulotlar: ${Product.totalProducts}`;
16    }
17}
18 
19let p1 = new Product("Laptop", 1200);
20let p2 = new Product("Mouse", 20);
21 
22console.log(p1.getInfo());           // "Laptop: 1200 so'm" (instance)
23console.log(Product.getTotalCount()); // "Jami mahsulotlar: 2" (static)

How It Works

1. Har safar new Product(...) chaqirilganda, Product.totalProducts — barcha instance'lar uchun umumiy son — birga oshadi.
2. p1.totalProducts deb yozib bo'lmaydi — bu instance'da mavjud emas, faqat Product.totalProducts orqali kirish mumkin.

💡 Key Idea
Static property — barcha instance'lar orasida "bo'lishiladigan" (shared) yagona ma'lumot, xuddi Chapter 21'dagi prototype metodlar kabi, lekin bu safar property uchun ham.

25.3 ⚠️ Qiyin mavzu: Static Factory Metodlar

Simple Explanation

Factory Method — object yaratishning muqobil, ko'pincha qulayroq usulini taqdim etuvchi static metod.

Nega bu foydali?

Ba'zida new ClassName(...) orqali object yaratish yetarlicha tushunarli emas, yoki bir nechta turli usulda object yaratish kerak bo'ladi.

Example — muammoli holat (constructor yetarli emas)

script.js
JavaScriptNusxalash
01class Point {
02    constructor(x, y) {
03        this.x = x;
04        this.y = y;
05    }
06}
07 
08let p1 = new Point(3, 4); // oddiy koordinatalardan

Endi, agar biz Point'ni stringdan ("3,4") yoki polar koordinatalardan (radius, burchak) yaratmoqchi bo'lsak-chi? Buni bitta constructor bilan chiroyli qilib bo'lmaydi (chunki JavaScript'da constructor overloading yo'q — Chapter 23'da ko'rgan edik).

Yechim — Static Factory Metodlar

script.js
JavaScriptNusxalash
01class Point {
02    constructor(x, y) {
03        this.x = x;
04        this.y = y;
05    }
06 
07    static fromString(str) {
08        let [x, y] = str.split(",").map(Number);
09        return new Point(x, y);
10    }
11 
12    static fromPolar(radius, angle) {
13        let x = radius * Math.cos(angle);
14        let y = radius * Math.sin(angle);
15        return new Point(x, y);
16    }
17}
18 
19let p1 = new Point(3, 4);
20let p2 = Point.fromString("5,6");
21let p3 = Point.fromPolar(10, Math.PI / 2);
22 
23console.log(p2.x, p2.y); // 5 6

Diagram

code.text
TEXTNusxalash
01Point.fromString("5,6")
02        │
03        ▼ ichkarida
04   parse qilinadi → new Point(5, 6)
05        │
06        ▼
07   yangi Point object qaytariladi

Explanation

fromString va fromPolar — ikkalasi ham "Point yaratishning muqobil yo'llari", ular ichkarida asl constructorni chaqiradi, lekin foydalanuvchiga qulayroq "kirish nuqtasi" (interfeys) taqdim etadi.

🔥 Important
Bu naqsh — ko'plab mashhur JavaScript kutubxonalarida (masalan, Array.from(), Object.fromEntries()) ishlatiladi. Ular ham — aslida static factory metodlar.

25.4 Static bloklar (ES2022)

Simple Explanation

Static blok — class yuklanganda bir marta ishga tushadigan, murakkab static property'larni sozlash uchun ishlatiladigan maxsus blok.

Example

script.js
JavaScriptNusxalash
01class Config {
02    static settings;
03 
04    static {
05        // Murakkab sozlash mantiqi
06        Config.settings = {
07            apiUrl: "[https://api.example.com](https://api.example.com)",
08            version: "1.0"
09        };
10        console.log("Config yuklandi");
11    }
12}
13 
14console.log(Config.settings.apiUrl); // "[https://api.example.com](https://api.example.com)"

🔗 Connection
Static bloklar — nisbatan yangi (ES2022) xususiyat, ular kamdan-kam ishlatiladi, lekin murakkab boshlang'ich sozlash (initialization) kerak bo'lganda foydali.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
Calculator nomli class yarating, unda faqat static metodlar bo'lsin: add(a, b), subtract(a, b), multiply(a, b).
Required Concepts:

• static methods
  Hint:
  Hech qachon new Calculator() yaratmang, to'g'ridan-to'g'ri Calculator.add(2, 3) deb chaqiring.

🟡 Exercise 2 — Medium

Task:
User class yarating, unga static userCount = 0 qo'shing. Har safar new User() chaqirilganda userCount avtomatik oshsin. static getUserCount() metodi orqali umumiy sonni chiqaring.
Required Concepts:

• static property
• constructor
  Hint:
  Chapter 25.2'dagi Product misolidan namuna oling.

🔴 Exercise 3 — Hard

Task:
Temperature class yarating (celsius bilan). Ikkita static factory metod qo'shing: fromFahrenheit(f) va fromKelvin(k) — ular berilgan qiymatlarni Celsiusga aylantirib, yangi Temperature object qaytarsin.
Required Concepts:

• Static factory methods
  Hint:
  C = (F - 32) * 5/9, C = K - 273.15

🔮 Predict the Output

script.js
JavaScriptNusxalash
01class Counter {
02    static count = 0;
03 
04    constructor() {
05        Counter.count++;
06        this.id = Counter.count;
07    }
08}
09 
10let a = new Counter();
11let b = new Counter();
12let c = new Counter();
13 
14console.log(a.id, b.id, c.id);
15console.log(Counter.count);

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

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

Why?
Counter.count — barcha instance'lar orasida umumiy (shared) static property. Har safar yangi Counter yaratilganda, u oshadi va shu qiymat instance'ning idsiga saqlanadi. Uchta object yaratilgani uchun, oxirida Counter.count — 3ga teng.

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor:

script.js
JavaScriptNusxalash
01class Logger {
02    log(message) {
03        console.log(`[LOG]: ${message}`);
04    }
05}
06 
07Logger.log("Dastur ishga tushdi");

Your Task:

• Kod ishga tushganda nima bo'lishini bashorat qiling.
• Nima uchun xatolik yuz berishini tushuntiring.
• Kodni ikki usulda tuzating.

<details> <summary>Solution</summary> Muammo: log — instance metod sifatida yozilgan (static kalit so'zisiz), lekin uni class nomi orqali (Logger.log(...)) chaqirishga urinilmoqda — bu ishlamaydi.

Yechim 1 — static qilish:

script.js
JavaScriptNusxalash
01class Logger {
02    static log(message) {
03        console.log(`[LOG]: ${message}`);
04    }
05}
06 
07Logger.log("Dastur ishga tushdi");

Yechim 2 — instance yaratish:

script.js
JavaScriptNusxalash
01class Logger {
02    log(message) {
03        console.log(`[LOG]: ${message}`);
04    }
05}
06 
07let logger = new Logger();
08logger.log("Dastur ishga tushdi");

</details>

📌 Chapter Summary

• static — class'ning o'ziga tegishli, instance yaratmasdan ishlatiladigan metod/property.
• Static property — barcha instance'lar orasida "bo'lishiladigan" umumiy ma'lumot.
• Static Factory Metodlar — object yaratishning muqobil, qulay usullarini taqdim etadi.
• Static bloklar — murakkab boshlang'ich sozlash uchun ishlatiladi (ES2022).

🎯 Key Takeaways

• Static metod/property — ClassName.method() orqali, instance'siz chaqiriladi.
• Static property — barcha object'lar uchun umumiy "hisoblagich" yoki konfiguratsiya sifatida foydali.
• Static Factory Metodlar — bitta constructor yetarli bo'lmagan holatlarda muqobil yaratish yo'llarini beradi.
• Array.from(), Object.fromEntries() kabi tayyor JS metodlari — static factory naqshining haqiqiy misollari.
• Instance metod bilan static metodni chalkashtirib chaqirish — eng ko'p uchraydigan xato.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01class Utils {
02    static VERSION = "1.0";
03 
04    static formatDate(date) {
05        return date.toLocaleDateString();
06    }
07 
08    static fromTimestamp(ts) { 
09        return new Date(ts);
10    }
11}
12 
13Utils.VERSION;              // static property
14Utils.formatDate(new Date()); // static method
15Utils.fromTimestamp(123456);  // static factory method

---