JavaScript type coercion: yashirin tur o'zgarishi qoidalari ichidan

Qisqacha: Coercion — JavaScript operator uchun turlarni o'zi o'zgartirishi. Qoida qisqa: + da bir tomon satr bo'lsa — yopishtiradi, boshqa arifmetika (-, *, /) har doim songa aylantiradi, == esa alohida algoritm bo'yicha ishlaydi. Obyekt va massiv avval primitivga aylanadi, shuning uchun [] + {} — "[object Object]". Amaliy xulosa: === ishlating va turni o'zingiz aylantiring.

Bu darsda

• JavaScript turni qachon o'zi o'zgartirishini va qaysi qoida bilan o'zgartirishini bilasiz.
• + qachon yopishtirishini, qachon qo'shishini oldindan ayta olasiz.
• == algoritmini qadamma-qadam bajara olasiz.
• Obyekt va massiv primitivga qanday aylanishini (ToPrimitive) tushuntira olasiz.
• [] + {}, [] == ![] kabi "sirli" natijalarni qoida bilan yecha olasiz.

Oldin bilishingiz kerak: Turlarni aniq (explicit) o'zgartirish, Tenglik: ==, === va Object.is, Boolean va truthy/falsy.

1. Nega bu kerak?

Oldingi darsda turni o'zimiz, ochiq o'zgartirdik: Number("25"), String(25). Lekin JavaScript ba'zan turni so'ramasdan o'zgartiradi:

console.log("5" + 3); // 53
console.log("5" - 3); // 2
console.log([] + {}); // [object Object]

Internetda bunday misollar bilan "JavaScript aqldan ozgan til" degan hazillar ko'p. Hatto 2012-yildagi mashhur "WAT" nomli qisqa chiqish bor — unda shunday natijalar ustidan kulishadi.

Aslida bu yerda sehr yo'q. Har bir natija aniq qoida bo'yicha chiqadi. Chet ellik uchun o'zbek tilidagi qo'shimchalar "tartibsiz" tuyulishi mumkin. Grammatikani bilgan odam uchun esa hammasi joyida. Bu dars — JavaScript'ning shu "grammatikasi".

Nega bilish kerak? Uch sabab:

1. Xato topish. Ekranda NaN, undefined10 yoki [object Object] chiqsa, sababini darhol taniysiz.
2. Begona kodni o'qish. Eski loyihalarda == va x + "" juda ko'p.
3. Intervyu. Coercion savollari JavaScript intervyularining eng sevimli mavzularidan.

2. Coercion nima?

Yashirin tur o'zgarishi (implicit coercion) — operator boshqa turdagi qiymat kutganda, JavaScript qiymatni o'zi o'sha turga aylantirishi. Qisqacha "coercion" deymiz.

Yaxshi xabar: bu yerda yangi aylantirish qoidalari yo'q. JavaScript o'tgan darsdagi uchta yo'ldan birini tanlaydi:

• songa kerak bo'lsa — xuddi Number() kabi aylantiradi;
• satrga kerak bo'lsa — xuddi String() kabi;
• mantiqiy qiymatga kerak bo'lsa — xuddi Boolean() kabi.

Ya'ni Number("") = 0 va Number(null) = 0 degan jadvallar bu yerda ham aynan ishlaydi. Yangi narsa faqat bitta: qaysi operator qaysi turni kutadi.

Mantiqiy aylantirishni truthy/falsy darsida to'liq ko'rganmiz. Endi qolganlariga o'tamiz.

3. + operatori: yopishtiradimi yoki qo'shadimi?

+ — JavaScript'dagi eng "ikki yuzli" operator. U ham sonlarni qo'shadi, ham satrlarni yopishtiradi. Qaysi birini tanlashi shu qoidaga bog'liq:

1. Ikkala tomon primitiv qiymatga keltiriladi (obyektlar uchun — 7-bo'limda, oddiy qiymatlar o'zgarmaydi).
2. Kamida bitta tomon satr bo'lsa — ikkinchisi ham satrga aylanadi va ular yopishtiriladi.
3. Aks holda — ikkalasi songa aylanadi va qo'shiladi.

console.log("5" + 3); // 53
console.log(3 + "5"); // 35
console.log(true + "1"); // true1
console.log(true + 1); // 2
console.log(null + 1); // 1
console.log(undefined + 1); // NaN

Birinchi uchtasida bir tomon satr — yopishtirish. Oxirgi uchtasida satr yo'q — qo'shish. true → 1, null → 0, undefined → NaN. Bu Number() jadvalining aynan o'zi.

3.1 Tartib muhim

+ chapdan o'ngga bajariladi. Shuning uchun satr qayerda turgani natijani o'zgartiradi:

console.log(1 + 2 + "3"); // 33
console.log("1" + 2 + 3); // 123

Birinchi qatorda: 1 + 2 = 3 (ikkalasi son), keyin 3 + "3" = "33". Ikkinchi qatorda: "1" + 2 = "12" (satr paydo bo'ldi), keyin "12" + 3 = "123". Satr bir marta paydo bo'lsa, undan keyingi hamma narsa yopishtiriladi.

Tekshirib ko'ring: "Narx: " + 10 + 5 va 10 + 5 + " so'm" nima beradi?

4. Boshqa arifmetik operatorlar: har doim son

-, *, /, % va ** da ikki ma'no yo'q — ular faqat sonlar bilan ishlaydi. Shuning uchun ikkala tomonni har doim songa aylantiradi:

console.log("10" - 3); // 7
console.log("5" * "2"); // 10
console.log("10" / "2"); // 5
console.log("  7  " * 1); // 7
console.log(null * 5); // 0
console.log("abc" * 1); // NaN

Mana + va - orasidagi assimetriya:

console.log("5" + 2); // 52
console.log("5" - 2); // 3

Faqat + da satr "g'olib" keladi. Qolgan hammasida son.

4.1 "baNaNa" sirini ochamiz

Internetdagi mashhur misol:

console.log("b" + "a" + +"a" + "a"); // baNaNa

Qadamma-qadam:

1. +"a" — bu yerda ikki + yonma-yon. Ikkinchisi unar +: "a" ni songa aylantiradi. Number("a") — NaN.
2. "b" + "a" = "ba".
3. "ba" + NaN = "baNaN" — satr bor, demak NaN ham "NaN" satriga aylanadi.
4. "baNaN" + "a" = "baNaNa".

Sehr yo'q — faqat ustuvorlik (unar + kuchliroq) va + qoidasi.

5. Taqqoslash: <, >, <=, >=

Taqqoslash darsida qoidani ko'rgan edik. Endi uni coercion nuqtai nazaridan qisqacha:

• Ikkala tomon satr — belgilar kodi bo'yicha, harfma-harf solishtiriladi ("10" < "9" — true).
• Aks holda — ikkala tomon songa aylanadi (Number() qoidasi).

console.log("10" < "9"); // true
console.log("10" < 9); // false
console.log(null >= 0); // true
console.log(undefined > 0); // false

null >= 0 — null songa aylanib 0 bo'ldi, 0 >= 0 — rost. undefined esa NaN ga aylanadi, NaN bilan har qanday taqqoslash false.

6. == algoritmi

6.1 Qadamlar

Tenglik darsida == turlarni o'zgartirishini ko'rgan edik. Endi aynan qanday o'zgartirishini ko'ramiz. a == b ni hisoblashda JavaScript shu qadamlarni tartib bilan bajaradi:

1. Turlar bir xil bo'lsa — xuddi === kabi solishtiradi. Hech qanday aylantirish yo'q.
2. null va undefined — faqat bir-biriga (va o'zlariga) teng. Boshqa hech narsaga teng emas.
3. Son va satr — satr songa aylanadi.
4. Bir tomon boolean bo'lsa — u birinchi bo'lib songa aylanadi (true → 1, false → 0). Keyin 1-qadamdan qaytadan.
5. Obyekt va primitiv — obyekt primitivga aylanadi (7-bo'lim). Keyin qaytadan.
6. NaN hech narsaga teng emas, hatto o'ziga ham.

Asosiy g'oya: == oxir-oqibat deyarli hamma narsani songa aylantirib solishtiradi. Faqat null / undefined bunga kirmaydi.

6.2 Jadval

Har bir qatorni qadamlar orqali tekshirib chiqing:

Keling, eng ayyor qatorlarni alohida ko'ramiz.

"0" == false — true. Lekin "0" — bo'sh bo'lmagan satr, demak truthy! Bir qarashda ziddiyat: qiymat ham "rost", ham false ga teng. Aslida ikkalasi rost, chunki ular ikki xil qoida. Shart ichida Boolean() qoidasi ishlaydi, == da esa 4-qadam: boolean songa aylanadi. "0" va false ikkalasi 0 ga aylangani uchun teng chiqadi.

"2" == true — false. Shuning uchun if (x == true) deb yozish xavfli: x qiymati "2" yoki "ha" bo'lsa, truthy bo'lsa ham false chiqadi.

"" == 0 va "0" == 0 rost, lekin "" == "0" yolg'on. Matematikada a = c va b = c bo'lsa, a = b bo'ladi. == da bu qoida ishlamaydi. Oxirgi holatda ikkala tomon satr — aylantirish yo'q, ular shunchaki har xil satrlar.

null == 0 — false, lekin null >= 0 — true. Taqqoslash null ni songa aylantiradi (5-bo'lim). == esa aylantirmaydi — 2-qadamda to'xtaydi.

Tekshirib ko'ring: undefined == 0 va undefined == null nima beradi?

6.3 == ning yagona foydali ishlatilishi

Bu qoidalardan bitta foydali narsa chiqadi. x == null — x null yoki undefined bo'lsa true, boshqa hamma narsada (0, "", false da ham) false:

const telefon = undefined;
const chegirma = 0;

console.log(telefon == null); // true
console.log(chegirma == null); // false

Bu idiomani tenglik darsida ko'rgan edik. Endi nega ishlashini ham bilasiz — 2-qadam. Qolgan barcha holatlarda === ishlating.

7. Obyektlar: ToPrimitive

7.1 Massiv va obyekt — qisqa tanishuv

"WAT" misollarining ko'pida [] va {} qatnashadi. Ularni kursda keyinroq to'liq o'rganamiz, hozir bir gap bilan:

• [1, 2] — massiv (array), qiymatlar ro'yxati. [] — bo'sh massiv. Massivlar darsida batafsil.
• {} — obyekt (object), nomlangan qiymatlar to'plami. Obyektlar darsida batafsil.

Ma'lumot turlari darsidan eslang: ular primitiv emas, obyekt turiga kiradi. Hozir ularning ichini bilish shart emas — bizga faqat ular operator ichida nimaga aylanishi kerak.

7.2 Nega obyekt primitivga aylanadi?

+, -, == kabi operatorlar faqat primitiv qiymatlar bilan ishlay oladi: son, satr, boolean. Obyektni "qo'shib" bo'lmaydi. Shuning uchun JavaScript avval obyektni primitivga aylantiradi.

Bu ichki algoritm ToPrimitive deb ataladi. U obyektdan ikkita maxsus metodni so'raydi:

• valueOf() — "sening son qiymating qanday?"
• toString() — "seni matn qilib yozsa qanday bo'ladi?"

Qaysi biri birinchi so'ralishi operatorga bog'liq. Operator JavaScript'ga "menga qaysi tur ma'qulroq" degan ishora (hint) beradi:

Qoida: birinchi metod primitiv qaytarsa — o'sha olinadi. Aks holda ikkinchisi so'raladi.

7.3 Massiv va oddiy obyektda nima bo'ladi?

Mana eng muhim detal. Oddiy obyekt va massivning valueOf() metodi obyektning o'zini qaytaradi — primitiv emas. Demak, ular uchun har doim toString() hal qiladi:

console.log(typeof [].valueOf()); // object

toString() esa quyidagilarni beradi:

const bosh = {};

console.log([1, 2].toString()); // 1,2
console.log([7].toString()); // 7
console.log(bosh.toString()); // [object Object]

Bo'sh massiv esa bo'sh satr beradi:

console.log([].toString() === ""); // true

Eslab qolish uchun:

7.4 O'z valueOf va toString ini yozgan obyekt

Obyekt bu ikki metodni o'zi belgilashi mumkin. Quyidagi kodning sintaksisini hali bilmaysiz — obyekt ichida metod yozishni keyinroq o'rganamiz. Hozir faqat natijalarga qarang:

const hamyon = {
  valueOf() { return 50000; },
  toString() { return "Ali hamyoni"; },
};

console.log(hamyon + 1000); // 51000
console.log(hamyon * 2); // 100000
console.log(`${hamyon}`); // Ali hamyoni
console.log(String(hamyon)); // Ali hamyoni
console.log(hamyon + ""); // 50000

Jadval bilan solishtiring:

• hamyon + 1000 — "default" ishora, avval valueOf → 50000. Keyin 50000 + 1000.
• hamyon * 2 — "number" ishora, valueOf → 50000.
• ${hamyon} va String(hamyon) — "string" ishora, avval toString → "Ali hamyoni".
• hamyon + "" — qiziq holat. Bu yerda ham "default" ishora, shuning uchun valueOf g'olib: 50000, keyin "50000" satri. Ya'ni x + "" va String(x) har doim ham bir xil emas!

Uchinchi, eng kuchli yo'l ham bor: Symbol.toPrimitive nomli maxsus metod. Agar obyektda u bo'lsa, JavaScript valueOf va toString ga umuman qaramaydi. U ishorani to'g'ridan-to'g'ri oladi va nima qaytarishni o'zi hal qiladi. Symbol — alohida primitiv tur. Uni va shu metodni Well-known symbols darsida o'rganamiz.

Maslahat: Date (sana obyekti) — istisno. U "default" ishorada ham avval toString ni ishlatadi. Shuning uchun sana + 1 sonni emas, satrni beradi. Buni Date asoslari darsida ko'rasiz.

Tekshirib ko'ring: [5] * 2 nima beradi?

8. "WAT" misollarini qoidalar bilan yechamiz

Endi qo'limizda hamma qoidalar bor. Mashhur misollarni birma-bir yechamiz:

console.log([] + []);
console.log([] + {});
console.log([1, 2] + 1);
console.log([2] * [3]);
console.log(true + true);
console.log([] == ![]);

Konsolda:

[object Object]
1,21
6
2
true

Birinchi qator bo'sh — bu xato emas, natija bo'sh satr.

[] + [] → "". Ikkalasi primitivga: "" + "". Satr bor — yopishtirish. Natija — bo'sh satr.

[] + {} → "[object Object]". Primitivga: "" + "[object Object]". Yopishtirish.

[1, 2] + 1 → "1,21". [1, 2] → "1,2". Satr bor — 1 ham satrga aylanib yopishadi.

[2] * [3] → 6. * — faqat son. [2] → "2" → 2, [3] → "3" → 3.

true + true → 2. Satr yo'q — ikkalasi songa: 1 + 1.

[] == ![] → true. Eng mashhuri. Keling, sekin:

1. Ustuvorlik: avval ![] bajariladi. [] — obyekt, obyektlar doim truthy. Demak ![] — false.
2. Endi [] == false. 4-qadam: boolean songa — false → 0. Endi [] == 0.
3. 5-qadam: obyekt primitivga — [] → "". Endi "" == 0.
4. 3-qadam: satr songa — "" → 0. Endi 0 == 0 — true.

Bitta massiv o'zining inkoriga teng chiqdi. Bu == ning qanchalik ayyor ekanini ko'rsatadi — va === nega yaxshiroq ekanini ham.

8.1 {} + [] haqida

"WAT" chiqishida {} + [] — 0 degan misol bor. Bizning kodda esa:

console.log({} + []); // [object Object]

Farq qayerdan? Qator boshida turgan {} ni JavaScript ba'zan obyekt emas, bo'sh kod bloki deb o'qiydi. Kod bloki — jingalak qavslar ichidagi kod qatorlari — uni var darsida ko'rgan edik. Shunda {} "hech narsa qilmaydigan blok" bo'lib o'tib ketadi. Qolgani esa +[] — unar +: [] → "" → 0.

console.log(...) ichida {} har doim obyekt, shuning uchun natija boshqacha. Ba'zi brauzer konsollari qatorni yozganingizdek o'qiydi va 0 ko'rsatadi, ba'zilari esa [object Object]. Ikkalasi ham qoidaga mos — faqat {} har xil o'qilgan.

9. Amaliy qoidalar

Qoidalarni bilish — ularga tayanish degani emas. Professional kodda coercion'dan ataylab qochiladi. Sabab oddiy: kodni o'qigan har kim barcha qadamlarni boshida aylantirib chiqmasligi kerak.

1. Har doim === va !==. Yagona istisno — x == null.
2. Tashqi ma'lumotni kirishdayoq aylantiring. Formadan kelgan satr — darhol Number(). Keyin kodda faqat son bilan ishlaysiz.
3. Satr yasash uchun template literal. `Jami: ${a + b}` — + ning ikki ma'nosi bilan bosh qotirmaysiz.
4. x == true yoki x == false yozmang. Shart uchun qiymatning o'zi yetarli (x, !x), aniq tekshiruv kerak bo'lsa — x === true.
5. Mantiqiy aylantirish — normal. Shartdagi truthy/falsy har joyda ishlatiladi. Faqat 0 va "" ni "yo'q" deb hisoblamaslik kerak bo'lsa, ?? ni eslang.

10. Ko'p uchraydigan xatolar

10.1 Satrdan keyin hisoblash

const a = 2;
const b = 3;

console.log("Jami: " + a + b); // Jami: 23

Satr birinchi turgani uchun a va b alohida yopishtirildi. Tuzatish — qavs yoki template literal:

const a = 2;
const b = 3;

console.log("Jami: " + (a + b)); // Jami: 5
console.log(`Jami: ${a + b}`); // Jami: 5

10.2 Ekranda [object Object]

const mijoz = { ism: "Malika" };

console.log("Mijoz: " + mijoz); // Mijoz: [object Object]

Obyekt + bilan satrga yopishtirilganda toString() chaqiriladi va "[object Object]" chiqadi. Konsolga chiqarishda vergul ishlating — console.log("Mijoz:", mijoz). Shunda konsol obyektni ichidagi ma'lumoti bilan ko'rsatadi. Saytda bu matnni ko'rsangiz — obyektni satrga aylantirish esdan chiqqan.

10.3 Ekranda NaN yoki undefined

undefined + 1 — NaN. "Salom, " + undefined — "Salom, undefined". Bu natijalardan biri ekranda ko'rinsa, qaysidir qiymat kelmay qolgan. Qiymatni hisoblashdan oldin tekshiring yoki ?? bilan zaxira bering.

10.4 == ga ishonish

if (kiritilgan == 0) — bo'sh satr "" ham, "0" ham, [] ham o'tib ketadi. Hammasi songa aylanib 0 bo'ladi. === ishlatsangiz, faqat haqiqiy 0 o'tadi.

11. Mashqlar

1-mashq (oson): + va -

Natijalarni daftarga yozing, keyin tekshiring.

console.log("4" + 2);
console.log("4" - 2);
console.log("4" * "2");
console.log(4 + 2 + "px");
console.log("px" + 4 + 2);

console.log("4" + 2); // 42
console.log("4" - 2); // 2
console.log("4" * "2"); // 8
console.log(4 + 2 + "px"); // 6px
console.log("px" + 4 + 2); // px42

2-mashq (o'rta): == algoritmi

Har birini == algoritmi qadamlari bilan yeching: qaysi qadam ishladi va natija nima?

console.log(null == false);
console.log("1" == true);
console.log("" == false);
console.log([0] == false);
console.log(undefined == 0);

console.log(null == false); // false
console.log("1" == true); // true
console.log("" == false); // true
console.log([0] == false); // true
console.log(undefined == 0); // false

Bo'sh joyni to'ldiring. [7] * 2 ifodasida [7] avval toString() orqali "7" satriga aylanadi, keyin songa — [:7]. Natija — [:14].

3-mashq (qiyin): Buxgalteriya xatosi

Jasur do'kon uchun kod yozdi. Formadan ikkita summa keldi, u ularni qo'shib, 100 000 dan oshganini tekshirmoqchi:

const naqd = "60000";
const karta = "50000";

const jami = naqd + karta;
console.log("Jami:", jami); // Jami: 6000050000
console.log(jami > 100000); // true

1. Nega jami noto'g'ri, lekin taqqoslash baribir true?
2. naqd = "30000", karta = "20000" bo'lsa, taqqoslash nima beradi va nega bu xavfli?
3. Kodni to'g'rilang.

const naqd = Number("30000");
const karta = Number("20000");

const jami = naqd + karta;
console.log("Jami:", jami); // Jami: 50000
console.log(jami > 100000); // false

4-mashq (qiyin): WAT'ni o'zingiz yeching

Har bir ifodaning natijasini qadamma-qadam tushuntiring: qaysi operator, qaysi ishora, qaysi aylantirish.

console.log([] + null + 1);
console.log([1] == 1);
console.log(+[]);
console.log([] == []);

console.log([] + null + 1); // null1
console.log([1] == 1); // true
console.log(+[]); // 0
console.log([] == []); // false

12. Real ishda

• ESLint (kod tekshiruvchi vosita, kursda alohida o'rganamiz) eqeqeq qoidasi bilan == ni taqiqlaydi. Deyarli barcha jamoalarda u yoqilgan — faqat == null ga ruxsat beriladi.
• TypeScript "5" - 3 kabi aralash turdagi hisoblarni kod ishga tushmasdan oldin xato deb belgilaydi. Coercion muammolarining ko'pchiligi shu bilan yo'qoladi.
• Xato topish: saytda NaN so'm, undefined yoki [object Object] chiqsa — bu coercion izi. Qaysi qiymat qaysi qoida bilan aylanganini topsangiz, xato manbai topiladi.
• Intervyu: [] + {}, [] == ![], "0" == false, null >= 0 — o'rta darajadagi JavaScript intervyularining klassik savollari. Javobni qadamlar bilan aytib bersangiz — "tilni ichidan biladi" degan taassurot qoldirasiz.
• Kutubxonalar: pul, sana yoki vaqt bilan ishlaydigan kutubxonalar valueOf va Symbol.toPrimitive orqali o'z obyektlarini son yoki satrga to'g'ri aylanadigan qiladi.

Manbalar

• MDN: Type coercion va Equality comparisons and sameness.
• ECMAScript standarti: IsLooselyEqual va ToPrimitive algoritmlari.

Xulosa

• Coercion yangi qoida emas: JavaScript Number(), String() yoki Boolean() qoidalaridan birini o'zi qo'llaydi.
• + da kamida bitta satr bo'lsa — yopishtirish, aks holda qo'shish. -, *, / da har doim son.
• ==: bir xil tur → ===; null/undefined faqat bir-biriga teng; boolean va satr songa aylanadi; obyekt primitivga.
• Obyekt ToPrimitive orqali aylanadi: valueOf va toString (yoki Symbol.toPrimitive). Massiv → "1,2", {} → "[object Object]".
• "WAT" misollari — shu qoidalarning natijasi, sehr emas.
• Amalda: === ishlating, turni kirishda o'zingiz aylantiring, satrni template literal bilan yasang.

Keyingi dars: Bitwise operatorlar va bit bayroqlar — sonlarni bitlar darajasida o'zgartiradigan operatorlar va ruxsatlarni ixcham saqlash usulini o'rganamiz.