IlmHamroh
JavaScript Full-stack/12-qism. JavaScript: ilg'or mavzular va kod sifati33/44-dars19 daqiqa
Mundarija (36)

Toza kod: nomlash — o'zgaruvchi, funksiya va mantiqiy qiymatga aniq nom berish

Qisqacha: Yaxshi nom kodni izohsiz tushunarli qiladi. Nom niyatni aytadi: nima saqlanadi yoki nima qilinadi. Funksiya — fe'l bilan (saqla, filtrniOl), mantiqiy qiymat — savol shaklida (mosmi, matnBormi, isPaid), o'zgarmas sozlama — UPPER_SNAKE (KUTISH_MS), klass — PascalCase, qolgani — camelCase. Bitta tushuncha — bitta nom. Qayta nomlash xulqni o'zgartirmaydi, shuning uchun u — eng xavfsiz refaktoring.

Bu darsda

  • Nom nega izohdan ham muhimroq ekanini va "niyatni aytuvchi nom" nimaligini tushuntira olasiz.
  • Funksiya, mantiqiy qiymat, o'zgarmas va klassga qoida bo'yicha nom bera olasiz.
  • camelCase, PascalCase, UPPER_SNAKE va kebab-case qayerda ishlatilishini bilasiz.
  • Ish joyidagi inglizcha nomlash odatlarini (is, has, get) bilasiz.
  • vazifalar dagi noaniq nomlarni xulqni buzmasdan aniqlashtirasiz va haqiqiy "nomlash qarzi"ni ko'rasiz.

Oldin bilishingiz kerak: Funksiya e'lon qilish va chaqirish, Boolean va truthy/falsy qiymatlar, Loyiha: saqlanadigan va sinxronlanadigan vazifalar ilovasi, Unicode regex: u va v flag.

1. Nega bu kerak?

Sardor — «Bahor»ning stajyor dasturchisi. Unga vazifalar ilovasidagi fokus xatosini topish topshirildi. U render.js ni ochib, mana bu qatorlarga duch keldi:

js
// render.js, fokusla() ichida (v3)
const top = (i) =>
  royxat.querySelector(`[data-id="${i}"] [data-amal="${amal}"]`);
const nishon = top(id) ?? top(zaxiraId) ?? sarlavha;

Sardor o'ylaydi: "i — indeks bo'lsa kerak, massivning nechanchi elementi". Aslida i ga vazifaning idsi keladi. Keyin u top ni ko'rib, royxat.top(id) metodini eslaydi — o'sha metod chaqirilyaptimi? Yo'q, bu boshqa, lokal funksiya. Ikki noaniq nom — o'n daqiqa yo'qotilgan vaqt.

Kod bir marta yoziladi, lekin o'nlab marta o'qiladi: o'zingiz, hamkasbingiz, yarim yildan keyingi "siz". Har o'qishda nom birinchi bo'lib ko'zga tashlanadi. Yaxshi nom — eng arzon hujjat: u kod bilan birga yuradi.

Shu dars bilan qismning kod sifati bo'limi boshlanadi. Keyingi yettita darsda vazifalar ilovasini qadam-baqadam tozalaymiz: nomlar, funksiyalar, testlar, kod hidlari, texnik qarz, avtomatik vositalar. Bu ishning umumiy nomi — refaktoring: kodning ichini yaxshilash, xulqini o'zgartirmasdan. Ilova oldin nima qilgan bo'lsa, keyin ham aynan shuni qiladi.

2. Nom niyatni aytadi

2.1 Bir xil kod, ikki xil nom

«Bahor» ish vaqtini hisoblaydigan ikki variantni solishtiring:

js
const a = 7;
const b = 23;
const c = b - a;

console.log(c); // 16

Kod ishlaydi, lekin c nima? Javob olish uchun butun kodni o'qib chiqish kerak. Endi xuddi shu kod, faqat nomlar boshqa:

js
const OCHILISH_SOATI = 7;
const YOPILISH_SOATI = 23;
const ishSoatlari = YOPILISH_SOATI - OCHILISH_SOATI;

console.log(ishSoatlari); // 16

Kompyuter uchun bu ikki dastur bir xil. Odam uchun esa ikkinchisi o'zini o'zi tushuntiradi. Niyatni aytuvchi nom (intention-revealing name) — o'qigan odam "bu nima va nega kerak?" deb so'ramaydigan nom.

Yaxshi nomni topish uchun o'zingizga savol bering: "Buni telefonda do'stimga bitta so'z bilan qanday tushuntirardim?" c emas, "ish soatlari". malumot emas, "bronlar ro'yxati".

2.2 Nom uzunligi — ko'rinish doirasiga qarab

"Unda hamma nom uzun bo'lsinmi?" — yo'q. Nom uzunligi u qancha joyda yashashiga bog'liq. Bir qatorli arrow funksiyada qisqa nom yetarli, chunki kontekst ko'z oldida:

js
const vazifalar = [
  { id: 1, matn: "Non olish", bajarildi: true },
  { id: 2, matn: "Choy damlash", bajarildi: false },
];
const qolganlar = vazifalar.filter((v) => !v.bajarildi);

console.log(qolganlar.length); // 1

Bu yerda v ni hech kim adashtirmaydi: to'plam nomi vazifalar, demak, v — bitta vazifa. Lekin funksiya bir necha qatorga cho'zilsa yoki o'zgaruvchi butun modulda ko'rinsa, nom to'liq bo'lishi kerak. Qoida: nom qancha uzoq yashasa, shuncha to'liq bo'lsin.

2.3 Qisqartma yo'q

fn, btn, usr, tmp, cnt — yozuvchi uchun tez, o'quvchi uchun topishmoq. Bugun siz cnt "count" ekanini bilasiz. Uch oydan keyin "content"mi, "counter"mi — o'ylab qolasiz.

Umumiy qabul qilingan bir nechta qisqartma bundan mustasno: id, url, API, JSON — ular kundalik so'zga aylangan. Klassik for (let i = 0; …) siklidagi i ham tanilgan, lekin for...of va massiv metodlarida element nomi bilan yozamiz.

Tekshirib ko'ring: function hisobla(m) { return m.narx * m.soni; } — ikkita nom muammosini toping.

Javob

Birinchisi — hisobla: nima hisoblanadi? jamiNarxniHisobla yoki qatorSummasi aniqroq. Ikkinchisi — m: funksiya bir qatorli bo'lsa ham, m hech qanday to'plamdan kelmayapti, shuning uchun kontekst yo'q. buyurtmaQatori deb yozsak, narx va soni nima ekani o'z-o'zidan ayon bo'ladi.

3. Nom turlari va yozilish qoidalari

3.1 Funksiya — fe'l bilan

Funksiya — ish. Shuning uchun uning nomi buyruq maylidagi fe'l: saqla, qatorYasa, filtrniOl, elonQil. Chaqiruvni o'qiganda gap hosil bo'ladi: saqla(royxat) — "ro'yxatni saqla".

Qiymat qaytaradigan funksiya natija nomi bilan ham atalishi mumkin: eksportMatni(vazifalar) — "vazifalarning eksport matni". Asosiysi — ekranga yozadigan yoki biror narsani o'zgartiradigan funksiya ot bilan atalmasin. buyurtma() deb nomlangan funksiya buyurtma qaytaradimi, chop etadimi, yuboradimi — bilib bo'lmaydi.

3.2 Mantiqiy qiymat — savol bilan

Mantiqiy qiymat (boolean) — "ha yoki yo'q" javobi. Nomini savolga aylantiring: o'zbekchada -mi, bormi yoki o'tgan zamon fe'li.

Nom Savol Qayerda
mosmi vazifa filtrga mosmi? royxat.js
matnBormi bu matn ro'yxatda bormi? royxat.js
bajarildi vazifa bajarildimi? vazifa.js
ozgardi matn o'zgardimi? royxat.js

if (bajarildi) — gapdek o'qiladi: "agar bajarildi bo'lsa". if (holat) esa hech narsa aytmaydi.

Inkor nomdan qoching. yopilmaganmi o'rniga ochiqmi. Sababi — inkor ustiga inkor: if (!yopilmaganmi) ni o'qish uchun miyada ikki marta "yo'q" ni aylantirish kerak.

O'zingiz to'ldiring. «Bahor» soat 7:00 dan 23:00 gacha ishlaydi. Oshxona hozir ochiqligini bildiruvchi mantiqiy o'zgaruvchiga nom bering (bitta so'z, yuqoridagi qoida bo'yicha):

const = soat >= 7 && soat < 23;

3.3 Yozilish shakllari

Bir nechta so'zdan iborat nomni yozishning to'rt shakli bor. Har biri o'z joyida:

Shakl Ko'rinishi Nima uchun
camelCase ishSoatlari, filtrniOl o'zgaruvchi, funksiya, metod
PascalCase VazifalarRoyxati, ApiXatosi klass
UPPER_SNAKE KUTISH_MS, SAQLASH_KALITI o'zgarmas sozlama
kebab-case vazifa-xatosi.js, taom-karta fayl nomi, CSS klassi

UPPER_SNAKE — har const uchun emas. const qolganlar = … — oddiy camelCase, chunki u hisoblangan qiymat. UPPER_SNAKE faqat modul darajasidagi, qo'lda yozilgan, hech qachon o'zgarmaydigan sozlama uchun: kutish vaqti, kalit nomi, chegaralar. Uni ko'rgan o'quvchi darhol tushunadi: "bu raqamni ataylab shu yerga qo'yishgan".

kebab-case fayl nomlarida qulay, chunki ba'zi tizimlar katta-kichik harfni farqlaydi, ba'zilari yo'q (Fayl va papka nomlash qoidalari).

Quyidagi diagramma nom tanlash tartibini ko'rsatadi. Yuqoridan boshlab, savolga javob bering:

flowchart TD
  A[Nima nomlanyapti?] --> B{Klassmi?}
  B -->|ha| B1[PascalCase: VazifalarRoyxati]
  B -->|yo'q| C{O'zgarmas sozlamami?}
  C -->|ha| C1[UPPER_SNAKE: KUTISH_MS]
  C -->|yo'q| D{Funksiyami?}
  D -->|ha| D1[fe'l: saqla, filtrniOl]
  D -->|yo'q| E{Ha/yo'q qiymatmi?}
  E -->|ha| E1[savol: mosmi, isPaid]
  E -->|yo'q| F[ot: ishSoatlari]

3.4 Bitta tushuncha — bitta nom

Bir loyihada "olish" uchun ol, top, yukla, qaytar aralash ishlatilsa, o'quvchi har safar o'ylaydi: "bular farq qiladimi?". Bitta ma'noga bitta so'z tanlang va butun loyihada shu so'zni ishlating.

Teskarisi ham muhim: bitta nom — bitta tushuncha. vazifalar da kalit so'zi ikki narsani bildirardi: localStorage dagi yozuv nomi ("vazifalar:v3") va serverdagi ro'yxat kaliti (crypto.randomUUID()). saqlash.js dagi KALIT_NOMI qaysi biri? Shu darsning oxirida u SERVER_KALITI_NOMI bo'ladi.

Tekshirib ko'ring: const maxUzunlik = 100; modul boshida yozilgan va hech qachon o'zgarmaydi. Uni qanday nomlash kerak? const qolganlar = vazifalar.filter(...) ni-chi?

Javob

Birinchisi — qo'lda qo'yilgan sozlama, shuning uchun MAKS_UZUNLIK (UPPER_SNAKE). vazifalar da u Vazifa.MAKS_UZUNLIK — klassning statik xususiyati. Ikkinchisi — const bo'lsa ham hisoblangan qiymat, har chaqiruvda boshqacha bo'lishi mumkin, shuning uchun camelCase qoladi.

4. Domen tili va inglizcha nomlar

4.1 Domen tili

Domen — dastur xizmat qiladigan soha. «Bahor» uchun bu — oshxona: buyurtma, bron, menyu, mehmon. Jasur aka "bron" desa, kodda ham bron bo'lsin, rezervatsiya yoki joyBand emas. Shunda dasturchi va egasi bitta tilda gaplashadi. Bu g'oyani katta loyihalarda "umumiy til" (ubiquitous language) deb atashadi.

vazifalar ning domen tili — vazifa, ro'yxat, filtr, teg, eksport. Kodda aynan shu so'zlar: Vazifa, VazifalarRoyxati, filtrniOl, teglariniOl, eksportMatni.

4.2 Ish joyida — inglizcha

Kursning boshidan beri nomlarni o'zbekcha yozib keldik (let va const bilan o'zgaruvchilar darsida sababini aytgan edik): siz o'ylab topgan nom JavaScript so'zlaridan aniq ajralib tursin. Bu o'rganish uchun juda qulay.

Real loyihalarda esa nomlar deyarli doim inglizcha: kutubxonalar, hujjatlar, xato xabarlari, hamkasblar — hammasi ingliz tilida. Toshkentdagi kompaniyada ham kodni ertaga boshqa mamlakatdagi dasturchi o'qishi mumkin. Izohlar esa jamoaning tilida yoziladi.

Inglizcha nomlashning o'z odatlari bor — ularni bir marta yodlab oling:

Odat Misol O'zbekcha o'xshashi
is, has, can — mantiqiy isPaid, hasItems, canEdit tolanganmi, bormi
get, find — qaytaradi getFilter, findTask filtrniOl, vazifaniTop
create, build — yasaydi createRow qatorYasa
handle, on — hodisaga javob handleSubmit, onClick yangiVazifaniQosh

vazifalar ning ba'zi nomlari inglizchada qanday bo'lardi: VazifalarRoyxati → TaskList, matnBormi → hasText, bajarildi → done, saqla → save, KUTISH_MS → TIMEOUT_MS.

4.3 Bitta loyiha — bitta til

Eng yomon variant — aralash: getVazifa, isBajarildi, royxatList. O'quvchi har nomda ikki tilni almashtirib o'qiydi. Qoida: loyiha qaysi tilda boshlangan bo'lsa, shu tilda davom etadi. Brauzer va JavaScript nomlari (fetch, event, addEventListener) esa o'zgarmaydi — ular sizniki emas.

vazifalar o'zbekcha boshlangan va o'zbekcha qoladi: 09–11-qism darslari, testlar va README shu nomlarga tayanadi. Butun loyihani inglizchaga o'girish — ulkan qayta nomlash bo'lardi va hech qanday yangi imkoniyat bermasdi. Inglizcha nomlashni esa shu darsning mashqida amalda sinab ko'rasiz. Kursda ham shu darsdan boshlab yangi, mustaqil misollarda nomlar inglizcha bo'ladi (totalPrice, isOpen), izohlar — o'zbekcha; vazifalar qadamlari esa o'z nomlari bilan davom etadi.

Tekshirib ko'ring: Jamoangiz inglizcha nom yozadi. Funksiya buyurtma to'langanini tekshiradi va true/false qaytaradi. checkPayment, isPaid, paymentStatus — qaysi biri yaxshi?

Javob

isPaid. U savol kabi o'qiladi: if (isPaid(order)) — "agar buyurtma to'langan bo'lsa". checkPayment — fe'l, lekin nima qaytarishini aytmaydi: tekshirib xato tashlaydimi, matn qaytaradimi? paymentStatus — ot, u "paid" yoki "pending" kabi matnga o'xshaydi, mantiqiy qiymatga emas.

5. Nomlash qarzi: vazifalar dagi haqiqiy misol

5.1 almashtir — uch ma'noda

Endi o'z loyihamizga tanqidiy ko'z bilan qaraymiz. almashtir so'zi vazifalar da uch xil ishni bildiradi:

js
// vazifa.js — bajarildi belgisini teskarisiga o'giradi
almashtir() {
  this.bajarildi = !this.bajarildi;
}

// royxat.js — shu ishni id bo'yicha qiladi
almashtir(id) {
  this.top(id).almashtir();
  this.#xabarBer();
}

// api.js — serverdagi BUTUN ro'yxatni yangisiga almashtiradi (PUT)
almashtir: (vazifalar, sozlama) =>
  sorovYubor(manzil + sinovParametri, {
    ...sozlama, metod: "PUT", tana: { vazifalar },
  }),

Birinchi ikkitasi — "belgini o'girish", uchinchisi — "hammasini qayta yozish". asosiy.js da ular yonma-yon uchraydi: vazifaniAlmashtir(id) va api.almashtir(joriy, sozlama). Birinchi marta ko'rgan odam ular bir xil ish qiladi deb o'ylaydi.

Yana bir chalkashlik: holat.js dagi matnniAlmashtir(id, matn) matnni o'zgartiradi va ichida royxat.matnniOzgartir(id, matn) ni chaqiradi. Bitta ish — ikki xil fe'l.

5.2 royxat — ikki ma'noda

render.js da royxat — sahifadagi <ul> elementi:

js
export const royxat = document.getElementById("royxat");

saqlash.js da esa royxat — VazifalarRoyxati klassining nusxasi: saqla(royxat). Testlarda ham const royxat = VazifalarRoyxati.dan(…). Bitta so'z — biri HTML element, ikkinchisi ma'lumot obyekti.

5.3 Nega hozir tuzatmaymiz

Bu nomlar eksport qilinadi — boshqa modullar ularni import qiladi. Ular 10–11-qism darslarida, testlarda va README da ishlatilgan. Ularni o'zgartirish — ko'p faylga tegadigan katta ish. Shuning uchun biz uni hozir qilmaymiz, balki qarz sifatida yozib qo'yamiz. Takliflar tayyor: belgini o'girish — belgisiniOgir, matnniAlmashtir → matnniOzgartir, api.almashtir → hammasiniYoz, DOM elementi — royxatEl.

Bu "keyin to'laymiz" degan ish texnik qarz deyiladi. Uni ro'yxatga olish va boshqarishni Legacy kod va texnik qarz bilan ishlash darsida o'rganamiz — o'sha yerda TEXNIK-QARZ.md faylida aynan shu nomlar 9-qator bo'lib yoziladi.

Lokal nomlar esa boshqa gap. Ular faqat bitta fayl ichida yashaydi, ularni o'zgartirish xavfsiz. Bugungi qadamda aynan shularni tozalaymiz.

Tekshirib ko'ring: Nega eksport qilinadigan nomni o'zgartirish lokal nomni o'zgartirishdan xavfliroq?

Javob

Lokal nom faqat o'z faylida ishlatiladi — hamma joyini bir ko'rishda topasiz. Eksport qilingan nomni boshqa modullar import qiladi: bittasini unutsangiz, SyntaxError: The requested module './holat.js' does not provide an export named … xatosi chiqadi va ilova ochilmaydi. Bundan tashqari eksport nomi darslar va hujjatlarda ham yashaydi.

6. Qayta nomlashni xavfsiz qilish

6.1 "Topish va almashtirish" tuzog'i

render.js dagi fondaChiz funksiyasida faol nomli o'zgaruvchi bor — u fokusdagi elementni saqlaydi (document.activeElement). Uni fokusdagi ga o'zgartirmoqchimiz. Butun loyihada "faol" ni "fokusdagi" ga almashtirsak nima bo'ladi?

"faol" — filtr nomi: u marshrut.js, royxat.js (filtr === "faol") va render.js dagi bosh xabarlar jadvalida uchraydi. royxat.js ning yopilganTeglar metodida esa faol — bajarilmagan vazifalar ro'yxati. Ko'r-ko'rona almashtirish filtrni buzadi: ?filtr=faol endi ishlamaydi.

6.2 Muharrir vositasi

VS Code nomni matn sifatida emas, kod belgisi (symbol) sifatida o'zgartira oladi. Kursorni nom ustiga qo'yib, F2 (Rename Symbol) ni bosing va yangi nomni yozing. Muharrir faqat shu o'zgaruvchiga tegishli joylarni o'zgartiradi. Eksport qilingan nom bo'lsa — uni import qilgan boshqa fayllarni ham.

Bu ham kafolat emas: satr ichidagi nomni (getElementById("royxat") dagi "royxat") muharrir bilmaydi. Shuning uchun har qayta nomlashdan keyin ilovani tekshiramiz — qanday qilib, buni Vazifalar qadamida ko'rasiz.

7. Ko'p uchraydigan xatolar

7.1 Tur nomga qo'shiladi

strIsm, arrVazifalar, objHolat — bu eski odat, "venger yozuvi" (Hungarian notation): nom boshiga tur qisqartmasi qo'shiladi. Tur o'zgarsa (massiv Set ga aylansa), nom yolg'onga aylanadi. Turni muharrir va keyinroq JSDoc aytadi, nom esa ma'noni aytsin.

7.2 Juda umumiy nom

malumot, natija, obj, ishla(), boshqar() — har narsaga mos keladi, demak, hech narsani aytmaydi. "Qanday ma'lumot?" deb so'rang va javobni nomga yozing: bronlar, jamiSumma.

7.3 Yolg'on nom

vazifalarRoyxati aslida Map bo'lsa yoki tekshir() tekshirish bilan birga saqlasa ham — nom yolg'on gapiryapti. Bu eng xavfli xato: o'quvchi nomga ishonadi va noto'g'ri xulosa qiladi.

7.4 Raqamli nomlar

vazifa1, vazifa2, royxatYangi2 — farqni nom aytmaydi. Aslida nima: "eng eski"mi, "tanlangan"mi? Shuni yozing: engEskiVazifa.

7.5 Aralash til

getVazifa, bajarildiFlag, royxatList. Yuqorida aytdik: bitta loyiha — bitta til.

8. Mashqlar

1-mashq (oson): Nomlarni tuzating

Quyidagi kod «Bahor» buyurtmasining jami summasini hisoblaydi. Kod to'g'ri ishlaydi, lekin nomlari yomon. Hisob uchun reduce ishlatilgan. Har nomni darsdagi qoida bo'yicha o'zgartiring — natija 85000 bo'lib qolsin.

js
const d = [
  { n: "Osh", p: 35000, k: 2 },
  { n: "Ko'k choy", p: 5000, k: 3 },
];

function f(x) {
  return x.reduce((s, i) => s + i.p * i.k, 0);
}

console.log(f(d)); // 85000
Yechim
js
const buyurtma = [
  { taom: "Osh", narx: 35000, soni: 2 },
  { taom: "Ko'k choy", narx: 5000, soni: 3 },
];

function jamiSummaniHisobla(qatorlar) {
  return qatorlar.reduce(
    (jami, qator) => jami + qator.narx * qator.soni,
    0,
  );
}

console.log(jamiSummaniHisobla(buyurtma)); // 85000

d → buyurtma (nima saqlanadi), maydonlar — taom, narx, soni. Funksiya fe'l bilan: jamiSummaniHisobla. reduce ning callback'i ko'p ish qiladi, shuning uchun s va i emas, jami va qator — i ayniqsa chalkashtirardi, chunki u indeksga o'xshaydi.

2-mashq (o'rta): Inglizcha nomlar

Siz inglizcha nom yozadigan jamoaga qo'shildingiz. Quyidagi o'zbekcha nomlarni inglizcha odatlar bo'yicha o'giring: mosmi, matnBormi, filtrniOl, qatorYasa, SAQLASH_KALITI, VazifaXatosi, yangiVazifaniQosh (forma yuborilganda chaqiriladi).

Yechim
O'zbekcha Inglizcha Qoida
mosmi matches yoki isMatch mantiqiy — savol
matnBormi hasText has — "bormi"
filtrniOl getFilter get — qaytaradi
qatorYasa createRow create — yasaydi
O'zbekcha Inglizcha Qoida
SAQLASH_KALITI STORAGE_KEY o'zgarmas — UPPER_SNAKE
VazifaXatosi TaskError klass — PascalCase
yangiVazifaniQosh addTask yoki handleSubmit fe'l; hodisaga javob — handle

handleSubmit — "submit hodisasini ishlaydi" degani. addTask esa nima qilishini aytadi. Ko'p jamoalar ikkalasini ham ishlatadi: tinglovchi handleSubmit, uning ichida addTask(text).

3-mashq (qiyin): Bitta tushuncha — bitta nom

Kodda uchta muammo bor: bitta ma'no uchun ikki xil fe'l, inkor mantiqiy nom va sehrli raqam — kodda izohsiz turgan, ma'nosini faqat muallif biladigan raqam (keyingi darsda batafsil). Raqamga nom bering — "O'zgarmas sozlama" qoidasi bo'yicha. Natija o'zgarmasin.

js
const bronlar = [
  { mehmon: "Dilshod aka", soat: 9 },
  { mehmon: "Malika", soat: 12 },
];

function bronniOl(soat) {
  return bronlar.find((b) => b.soat === soat);
}

function bronniTop(mehmon) {
  return bronlar.find((b) => b.mehmon === mehmon);
}

function bandEmasmi(soat) {
  return bronniOl(soat) === undefined;
}

const soat = 9;
if (!bandEmasmi(soat) || soat < 10) {
  console.log("Bu vaqtga bron qilib bo'lmaydi");
}
console.log(bronniTop("Malika").soat); // 12

Konsolda:

text
Bu vaqtga bron qilib bo'lmaydi
12
Yechim
js
const BRON_BOSHLANISHI = 10; // bron 10:00 dan qabul qilinadi

const bronlar = [
  { mehmon: "Dilshod aka", soat: 9 },
  { mehmon: "Malika", soat: 12 },
];

function soatBoyichaTop(soat) {
  return bronlar.find((b) => b.soat === soat);
}

function mehmonBoyichaTop(mehmon) {
  return bronlar.find((b) => b.mehmon === mehmon);
}

function bandmi(soat) {
  return soatBoyichaTop(soat) !== undefined;
}

const soat = 9;
if (bandmi(soat) || soat < BRON_BOSHLANISHI) {
  console.log("Bu vaqtga bron qilib bo'lmaydi");
}
console.log(mehmonBoyichaTop("Malika").soat); // 12

Konsolda:

text
Bu vaqtga bron qilib bo'lmaydi
12

Ikki funksiya — bronniOl va bronniTop — bir xil ish qiladi. Endi fe'l bitta (top), farqni esa nomning boshi aytadi: soatBoyicha, mehmonBoyicha. Shart ichidagi !bandEmasmi — inkor ustiga inkor; bandmi to'g'ridan-to'g'ri o'qiladi. Raqam 10 — «Bahor»da bron qabul qilish boshlanadigan soat; nom bilan u izohsiz tushunarli. Arrow ichidagi b qoldi: qator bitta, to'plam nomi — bronlar.

4-mashq: Vazifalar qadami — noaniq lokal nomlar

vazifalar ning faqat lokal (eksport qilinmaydigan) nomlarini aniqlashtiramiz. Kanon nomlariga tegmaymiz. Branch: refactor/nomlash.

Nima o'zgaradi. Har qatorda — qaysi qoida buzilgani:

Fayl Oldin → keyin Qoida
paket.js eksportMaydonlari → EKSPORT_MAYDONLARI o'zgarmas sozlama, yonidagi VAZIFA_MAYDONLARI kabi
saqlash.js KALIT_NOMI → SERVER_KALITI_NOMI "kalit" ikki ma'noda edi
sinxron.js tingla(fn) → tingla(ishlovchi) qisqartma yo'q
royxat.js (m) =>, (eng, m) =>, (t) => → malumot, mavjud ko'p qatorli reduce/filter
api.js vaqt → vaqtSignali bu vaqt emas, AbortSignal
Fayl Oldin → keyin Qoida
api.js oxiri → sinovParametri "oxiri" — nimaning oxiri?
render.js fondaChiz faol → fokusdagi "faol" — filtr nomi, bu esa document.activeElement
render.js fokusla top = (i) => → tugmaniTop = (qatorId) => i indeksga o'xshaydi, top — royxat.top() bilan chalkashadi
asosiy.js sahifa → sahifaManzili bu new URL(location.href)

Darsning boshidagi Sardor qoqilgan joy endi shunday:

js
// Oldin (render.js, fokusla)
const top = (i) =>
  royxat.querySelector(`[data-id="${i}"] [data-amal="${amal}"]`);
const nishon = top(id) ?? top(zaxiraId) ?? sarlavha;
js
// Keyin
const tugmaniTop = (qatorId) =>
  royxat.querySelector(
    `[data-id="${qatorId}"] [data-amal="${amal}"]`,
  );
const nishon = tugmaniTop(id) ?? tugmaniTop(zaxiraId) ?? sarlavha;

fondaChiz dagi o'zgarish:

js
// Oldin
const faol = document.activeElement;
if (!royxat.contains(faol)) {
js
// Keyin
const fokusdagi = document.activeElement;
if (!royxat.contains(fokusdagi)) {

Nomlar uzaygani uchun ba'zi qatorlar 72 belgidan oshib ketdi — ular ikki qatorga bo'lindi. Masalan api.js da:

js
const vaqtSignali = AbortSignal.timeout(kutish);
const sorov = {
  method: metod,
  headers: { Accept: "application/json" },
  signal: signal
    ? AbortSignal.any([signal, vaqtSignali])
    : vaqtSignali,
};

Ataylab o'zgartirilmagan. mosmi, matnBormi(matn, ozId), xatoniTop, sinxronPulti, kutilmoqda — yetarlicha aniq. Bir qatorli arrow'lardagi v (vazifalar.filter((v) => …)) — qoida bo'yicha joiz. almashtir va royxat — kanon nomlari, ular nomlash qarzi sifatida qoladi.

Tekshiruv. Bu refaktor: xulq o'zgarmasligi kerak. Buni qanday isbotlaymiz? tekshiruv/ papkasidagi skriptlar (10–11-qismda yozgan / skriptlarimiz) chiqishini o'zgarishdan oldin va keyin faylga yozamiz va solishtiramiz. Ikki fayl bayt-bayt bir xil bo'lishi kerak.

bash
node tekshiruv/royxat.js > ../oldin.txt
node tekshiruv/paket.js >> ../oldin.txt
node tekshiruv/saqlash.js >> ../oldin.txt
node tekshiruv/marshrut.js >> ../oldin.txt

> — chiqishni faylga yozadi, >> — fayl oxiriga qo'shadi. Fayl loyiha papkasidan tashqarida (../) — git uni ko'rmasin. Nomlarni o'zgartirgach, xuddi shu to'rt buyruqni ../keyin.txt bilan takrorlang va solishtiring. --no-index git'ga aytadi: "bu fayllar repoda emas, oddiy ikki faylni solishtir":

bash
git diff --no-index ../oldin.txt ../keyin.txt

Chiqish bo'sh — ikki fayl bir xil. Bizda shunday bo'ldi: hamma qator , oldingi bilan farq yo'q. Mana royxat.js skriptining boshi:

text
✅ statistika: 2/1
✅ yangi id: 4
✅ takror matn: true
✅ faollar tepada: 3,4,1,2

tekshiruv/api.js haqiqiy serverga boradi, uni ham ishga tushiring — u ham o'zgarmasligi kerak. Undagi vaqt qatori internet tezligiga bog'liq, shuning uchun uni solishtirishga qo'shmadik. Oxirida brauzerda tekshiruv/ssenariy.md dagi qadamlarni bajarib chiqing: qo'shish, belgilash, tahrir, o'chirish, filtr, ikki tab. Hammasi avvalgidek ishlashi kerak.

Yechim (buyruqlar)
bash
git switch -c refactor/nomlash
# ... nomlarni o'zgartiring (F2) va tekshiruvni bajaring ...
git add assets/js
git commit -m "refactor: noaniq lokal nomlar aniqlashtirildi \
(xulq o'zgarmadi)"
git push -u origin refactor/nomlash
gh pr create --fill
gh pr merge --merge

Natija: 7 fayl, +39 −31 qator (git diff --shortstat). Commit turi — refactor:, branch — refactor/: xulq o'zgarmadi, faqat kodning ichi. Unicode regex darsidagi fix/ branch bilan farqi shunda — u yerda xatoni tuzatib, xulqni o'zgartirgan edik.

Natijaga qarang: 7 faylga tegdik, lekin birorta eksport nomi o'zgarmadi — boshqa modullar bu o'zgarishni sezmaydi.

9. Real ishda

  • Kod ko'rib chiqish (code review). Pull request'dagi izohlarning katta qismi nomlar haqida bo'ladi: "bu nom nimani bildiradi?", "data dan aniqroq yozing". Yaxshi nom — tezroq tasdiqlangan PR.
  • Jamoa qoidalari. Ko'p kompaniyalarda yozma uslub qo'llanmasi bor (masalan, Google JavaScript Style Guide): qachon camelCase, qachon UPPER_SNAKE. Bir qismini ESLint avtomatik tekshiradi.
  • Intervyu. "Yaxshi nom qanday bo'ladi?", "Boolean'ni qanday nomlaysiz?", "Bu funksiyaga qanday nom berardingiz?" — junior intervyularida kod parchasini ko'rsatib so'rashadi.

Xulosa

  • Nom niyatni aytadi: nima saqlanadi yoki nima qilinadi. Nom qancha uzoq yashasa, shuncha to'liq; qisqartma yo'q.
  • Funksiya — fe'l (saqla, filtrniOl), mantiqiy qiymat — savol (mosmi, isPaid), inkor nomdan qoching.
  • camelCase — o'zgaruvchi va funksiya, PascalCase — klass, UPPER_SNAKE — qo'lda yozilgan o'zgarmas sozlama, kebab-case — fayl va CSS.
  • Bitta tushuncha — bitta nom, bitta nom — bitta tushuncha. Domen tilidagi so'zlarni ishlating.
  • Ish joyida nomlar inglizcha; bitta loyiha — bitta til. vazifalar o'zbekcha qoladi.
  • Lokal nomni o'zgartirish xavfsiz (F2, keyin tekshiruv), eksport nomi — qarz sifatida yoziladi (almashtir, royxat).

Keyingi dars: Toza kod: funksiyalar, izohlar va tuzilma — uzun funksiyalarni bitta ishga bo'lamiz va "nima" izohlarini "nega" izohlariga almashtiramiz.

Manbalar

  • Robert C. Martin, "Clean Code", 2008 — 2-bob "Meaningful Names"
  • Martin Fowler, "Refactoring", 2-nashr, 2018 — "Mysterious Name" hidi, "Change Function Declaration", "Rename Variable"
  • Google JavaScript Style Guide, "Naming" bo'limi — google.github.io/styleguide/jsguide.html
  • VS Code hujjatlari: "Refactoring" — Rename Symbol (F2) — code.visualstudio.com/docs/editor/refactoring
Ulashish:Telegram'da

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
Toza kod: nomlash — o'zgaruvchi, funksiya va mantiqiy qiymatga aniq nom berish — IlmHamroh