IlmHamroh
JavaScript Full-stack/8-qism. JavaScript asoslari8/61-dars12 daqiqa
Mundarija (26)

JavaScript typeof: qiymat turini to'g'ri aniqlash

Qisqacha: typeof — qiymatning turini satr ko'rinishida aytib beradigan operator: typeof 42 natijasi "number". U deyarli hamma turda to'g'ri ishlaydi, lekin ikki joyda aldaydi: typeof null va typeof [] ikkalasi ham "object" qaytaradi. null ni === null bilan, massivni esa Array.isArray() bilan tekshiring.

Bu darsda

  • typeof bilan istalgan qiymatning turini aniqlay olasiz.
  • typeof ning to'liq natijalar jadvalini bilasiz.
  • Nega typeof null natijasi "object" ekanini tushuntira olasiz.
  • null, massiv va funksiyani to'g'ri usul bilan tekshira olasiz.
  • typeof bilan qilinadigan 4 ta keng tarqalgan xatoni taniysiz.

Oldin bilishingiz kerak: Ma'lumot turlari xaritasi: primitivlar va obyektlar, console API.

1. Nega bu kerak?

Oldingi darsda ko'rdik: 25 va "25" ekranda bir xil ko'rinadi, lekin ular ikki xil tur. "25" + 5 esa 255 beradi.

Endi tasavvur qiling: dasturingiz noto'g'ri hisoblayapti. Siz o'zgaruvchini konsolga chiqarasiz va 25 ni ko'rasiz. Bu son yoki satrmi? Ko'z bilan bilib bo'lmaydi.

Shu yerda typeof yordamga keladi. U qiymatga qarab, "bu — satr" yoki "bu — son" deb aniq aytadi. Dasturchilar undan ikki maqsadda foydalanadi:

  1. Xato qidirishda — "bu o'zgaruvchida aslida nima bor?"
  2. Tekshirishda — "menga son kelishi kerak edi, haqiqatan son keldimi?"

2. typeof qanday ishlaydi

typeof — operator, ya'ni qiymat ustida amal bajaradigan maxsus so'z. Uni qiymat oldiga yozasiz:

js
console.log(typeof "Salom"); // string
console.log(typeof 42);      // number
console.log(typeof true);    // boolean

typeof "Salom" ifodasi "string" degan satrni beradi. Biz uni console.log ga berib, ekranga chiqardik.

O'zgaruvchi bilan ham ishlaydi. Bunda typeof o'zgaruvchi ichidagi qiymatning turini aytadi:

js
const narx = "25000";
const soni = 3;

console.log(typeof narx); // string
console.log(typeof soni); // number

Mana, 1-bo'limdagi savolga javob: narx — satr, garchi ichida faqat raqamlar bo'lsa ham.

2.1 Natija — har doim satr

typeof natijasi har doim satr bo'ladi: "string", "number" va boshqalar. Konsolda tirnoqsiz chiqadi, chunki console.log satrni tirnoqsiz ko'rsatadi.

Buni isbotlash mumkin — typeof natijasining turini so'raymiz:

js
console.log(typeof typeof 42); // string

O'ngdan chapga o'qing: typeof 42 — "number" satri. Undan keyin typeof "number" — "string". Bu g'alati ko'rinadi, lekin keyingi bo'limlarda natijani satr bilan solishtirganda shu fakt kerak bo'ladi.

2.2 Qavs kerakmi?

typeof funksiya emas, shuning uchun qavs shart emas. Lekin qavs qo'ysangiz ham ishlaydi:

js
console.log(typeof 42);   // number
console.log(typeof(42));  // number

Ikkinchi qatordagi qavs shunchaki 42 ni "o'rab" turibdi, xuddi matematikadagi (2 + 3) kabi. Ko'pchilik dasturchilar qavssiz yozadi: typeof qiymat. Kursda ham shunday yozamiz.

Tekshirib ko'ring: typeof "123" natijasi nima?

Javob

"string". Qiymat tirnoq ichida — demak u satr, ichida raqamlar bo'lsa ham. typeof qiymatning ko'rinishiga emas, haqiqiy turiga qaraydi.

3. typeof ning to'liq jadvali

Oldingi darsdagi 8 ta turning har biri uchun typeof natijasi:

Qiymat typeof natijasi To'g'rimi?
"Toshkent" "string"
42, 3.5 "number"
NaN, Infinity "number" (g'alati, lekin rost)
10n "bigint"
true "boolean"
undefined "undefined"
Symbol("id") "symbol"
null "object" tarixiy xato
{ ism: "Ali" } "object"
[1, 2, 3] "object" massiv ham obyekt
console.log "function" funksiya uchun alohida

Kod bilan tekshiramiz:

js
console.log(typeof "Toshkent");    // string
console.log(typeof 3.5);           // number
console.log(typeof 10n);           // bigint
console.log(typeof undefined);     // undefined
console.log(typeof Symbol("id"));  // symbol
console.log(typeof { ism: "Ali" }); // object
console.log(typeof null);          // object
console.log(typeof [1, 2, 3]);     // object

Jadvalda uchta qiziq joy bor: NaN, null va massiv. Ularni birma-bir ko'ramiz. To'rtinchisi — funksiya — ham alohida bo'limga loyiq.

3.1 NaN — "son emas", lekin number

NaN — "Not a Number", ya'ni "son emas" degani. U noto'g'ri hisob natijasida paydo bo'ladi. Masalan, matnni songa ko'paytirsangiz:

js
console.log("non" * 2);        // NaN
console.log(typeof ("non" * 2)); // number

Nomi "son emas", lekin turi — number. Paradoks emas: NaN — number turidagi maxsus qiymat, "bu hisobdan son chiqmadi" degan belgi. Uni sonlar darsida batafsil ko'ramiz.

4. typeof null — 30 yildan oshgan xato

js
console.log(typeof null); // object

null — primitiv. U obyekt emas. Lekin typeof "object" deydi. Bu — JavaScript'ning eng mashhur xatosi (bug).

4.1 Bu qanday paydo bo'lgan?

JavaScript 1995 yilda juda shoshilib yaratilgan — birinchi versiyasi taxminan 10 kunda yozilgan. O'sha versiyada har bir qiymat xotirada kichik "tur belgisi" bilan saqlangan. Obyektlarning belgisi 0 edi.

null esa xotirada butunlay nollardan iborat qilib saqlangan. typeof belgiga qarab 0 ni ko'rgan va "bu obyekt" deb qaror qilgan.

4.2 Nega tuzatilmaydi?

Keyinchalik xatoni tuzatish taklif qilingan: typeof null "null" qaytarsin. Lekin bu taklif rad etilgan. Sababi: internetdagi millionlab saytlar allaqachon shu xatoga moslab yozilgan edi. Tuzatish ularni buzib yuborardi.

JavaScript'ning oltin qoidasi bor: eski saytlarni buzmaslik. Shuning uchun bu xato abadiy qoladi va biz uni bilib yashaymiz.

4.3 null ni qanday tekshirish kerak?

typeof o'rniga qiymatni to'g'ridan-to'g'ri null bilan solishtiring. Buning uchun === operatori bor. U ikki qiymat aynan tengmi, tekshiradi va true yoki false beradi. Uni tenglik darsida batafsil o'rganamiz.

js
const haydovchi = null;

console.log(haydovchi === null);        // true
console.log(typeof haydovchi === "object"); // true

Ikkinchi qator ham true berdi — lekin bu aldamchi true. typeof bilan null ni haqiqiy obyektdan ajratib bo'lmaydi. Birinchi qator esa aniq: "bu aynan nullmi?"

Tekshirib ko'ring: Nima uchun typeof x === "object" natijasi true bo'lsa ham, x obyekt ekaniga ishonch hosil qila olmaysiz?

Javob

Chunki x null bo'lishi mumkin: typeof null ham "object" beradi. Bundan tashqari, x massiv ham bo'lishi mumkin. Shuning uchun null ni === null bilan alohida tekshirish kerak.

5. typeof va funksiyalar

Oldingi darsda aytdik: funksiya ham obyektning bir turi. Mantiqan typeof unga "object" deyishi kerak edi. Lekin funksiyalar uchun alohida javob bor — "function":

js
console.log(typeof console.log); // function
console.log(typeof console);     // object

console.log — funksiya, siz uni birinchi darsdan beri chaqirib kelyapsiz. console esa oddiy obyekt: log, table, error kabi funksiyalarni o'z ichida saqlaydigan "quti".

O'zingiz yaratgan funksiya ham "function" beradi:

js
function salomBer() {
  console.log("Salom!");
}

console.log(typeof salomBer); // function

Funksiya yozishni hali o'rganmadik — bu yerda faqat natijaga qarang. Funksiyalarni Funksiya e'lon qilish va chaqirish darsida boshlaymiz.

"function" natijasi juda foydali. Qiymatni chaqirishdan oldin "bu haqiqatan funksiyami?" deb tekshirish mumkin. Kutubxonalar ichida bu tekshiruv tez-tez uchraydi.

6. Massivni to'g'ri aniqlash: Array.isArray

Massivga typeof "object" deydi — oddiy obyekt bilan bir xil:

js
console.log(typeof [5000, 8000]);       // object
console.log(typeof { narx: 5000 });     // object

Bu xato emas: massiv haqiqatan ham obyektning bir ko'rinishi. Lekin amalda massivni oddiy obyektdan ajratish kerak bo'ladi. Buning uchun maxsus tayyor funksiya bor — Array.isArray():

js
console.log(Array.isArray([5000, 8000]));   // true
console.log(Array.isArray({ narx: 5000 })); // false
console.log(Array.isArray("salom"));        // false

Qavs ichiga qiymat berasiz, u true (massiv) yoki false (massiv emas) qaytaradi. Massivlar bilan ishlashni Massiv: yaratish va elementga murojaat darsida boshlaymiz.

Tekshirib ko'ring: typeof [] va Array.isArray([]) — qaysi biri massivni aniqroq aniqlaydi?

Javob

Array.isArray([]). U true qaytaradi va faqat massivga true deydi. typeof [] esa "object" beradi — oddiy obyekt ham, null ham shu javobni beradi.

7. Universal usul: Object.prototype.toString

Maslahat: Bu bo'lim — qo'shimcha, qiziquvchilar uchun. Kodni tushunmasangiz, xavotir olmang: keyingi bo'limga o'tavering. Bu darsdagi mashqlarda u kerak bo'lmaydi.

Har qanday qiymatning aniq turini bilishning yana bir usuli bor. Ko'rinishi uzun va g'alati, lekin u hech qachon aldamaydi:

js
const turi = Object.prototype.toString;

console.log(turi.call(null));       // [object Null]
console.log(turi.call([1, 2]));     // [object Array]
console.log(turi.call(new Date())); // [object Date]
console.log(turi.call(42));         // [object Number]

Natija [object Tur] ko'rinishida bo'ladi: Null, Array, Date — hammasi aniq. .call(...) qanday ishlashini hozir tushunish shart emas. U call, apply, bind darsida tushuntiriladi.

Kundalik ishda bu usul kam kerak bo'ladi. Uni eski kutubxonalar kodida yoki sanani (Date) aniqlash kerak bo'lganda uchratasiz. Bilib qo'ying — lekin yodlab olish shart emas.

Qaysi holatda qaysi usul:

Nimani tekshiramiz To'g'ri usul
Satr, son, boolean, bigint, symbol typeof x === "number" kabi
undefined x === undefined yoki typeof x
null x === null
Massiv Array.isArray(x)
Funksiya typeof x === "function"

8. E'lon qilinmagan o'zgaruvchi va typeof

Odatda e'lon qilinmagan o'zgaruvchiga murojaat qilsangiz, xato chiqadi:

js
console.log(yoqNom);
text
ReferenceError: yoqNom is not defined

Tarjimasi: "yoqNom aniqlanmagan". Dastur shu joyda to'xtaydi.

typeof esa bu holatda xato bermaydi. U shunchaki "undefined" qaytaradi:

js
console.log(typeof yoqNom); // undefined

Bu typeof ning yagona "imtiyozi". U qaysi muhitda ishlayotganini bilish uchun kerak. Masalan, window — faqat brauzerda bor narsa. Node'da esa u yo'q:

js
console.log(typeof window); // undefined

Brauzerda bu qator "object" chiqaradi, Node'da — "undefined". Shu farq orqali kod "men brauzerdamanmi yoki serverdami?" deb bilib oladi.

Diqqat: Bir istisno bor. let yoki const bilan keyinroq e'lon qilinadigan o'zgaruvchiga typeof baribir xato beradi. Farqi shunda: bunday o'zgaruvchi "e'lon qilinmagan" emas — u pastroqda e'lon qilingan. JavaScript uni biladi, lekin e'lon qatorigacha unga tegishga ruxsat bermaydi:

js
console.log(typeof narx);
let narx = 5000;

ReferenceError: Cannot access 'narx' before initialization — "narx ga qiymat berilishidan oldin murojaat qilib bo'lmaydi". Nega shunday ekanini Temporal Dead Zone darsida ko'ramiz. Qoida oddiy: o'zgaruvchini avval e'lon qiling, keyin ishlating.

9. Ko'p uchraydigan xatolar

9.1 Tur nomini tirnoqsiz yozish

js
const soni = 5;
console.log(typeof soni === number);
text
ReferenceError: number is not defined

Tarjimasi: "number aniqlanmagan". typeof satr qaytaradi, shuning uchun uni satr bilan solishtirish kerak. Tirnoqsiz number ni JavaScript o'zgaruvchi nomi deb o'ylaydi va uni topa olmaydi. Qoida: typeof bilan solishtirganda tur nomi doim qo'shtirnoqda — "number", "string". To'g'risi:

js
const soni = 5;
console.log(typeof soni === "number"); // true

9.2 Tur nomini katta harf bilan yozish

js
const ism = "Ali";
console.log(typeof ism === "String"); // false

Xato chiqmaydi, lekin natija har doim false. typeof doim kichik harfli satr qaytaradi: "string", "String" emas. Bunday xato jim o'tadi va sizni adashtiradi.

9.3 "array" yoki "null" ni kutish

js
const royxat = [1, 2, 3];
console.log(typeof royxat === "array"); // false

typeof hech qachon "array" yoki "null" qaytarmaydi. Uning barcha mumkin javoblari 8 ta: "string", "number", "bigint", "boolean", "undefined", "symbol", "object", "function". Massiv uchun — Array.isArray, null uchun — === null.

9.4 NaN ni son deb ishonish

js
const natija = "non" * 2;
console.log(typeof natija === "number"); // true
console.log(natija);                      // NaN

typeof "bu son" dedi, lekin ichida NaN — foydali son emas. Faqat typeof ga tayanib "hisob to'g'ri" deb bo'lmaydi. NaN ni qanday tekshirish — sonlar darsida.

10. Mashqlar

1-mashq (oson): Natijani toping

Har bir ifodaning natijasini yozing.

  • typeof "Buxoro" →
  • typeof 0 →
  • typeof false →
  • typeof null →
  • typeof [10, 20] →
Yechim
js
console.log(typeof "Buxoro"); // string
console.log(typeof 0);        // number
console.log(typeof false);    // boolean
console.log(typeof null);     // object
console.log(typeof [10, 20]); // object

Oxirgi ikkitasi — darsning asosiy "tuzoqlari". null uchun "object" — tarixiy xato. Massiv uchun "object" — chunki massiv obyektning bir ko'rinishi.

2-mashq (o'rta): To'g'ri tekshiruvni tanlang

Quyidagi o'zgaruvchilar berilgan. Har biri uchun to'g'ri tekshiruv yozing — natija true chiqsin. 7-bo'limdagi jadvaldan foydalaning.

js
const shahar = "Namangan";
const narxlar = [3000, 4500];
const chegirma = null;
const hisobla = console.log;

Ishora: satr uchun typeof ... === "string", massiv uchun Array.isArray(...), null uchun === null, funksiya uchun typeof ... === "function".

Yechim
js
const shahar = "Namangan";
const narxlar = [3000, 4500];
const chegirma = null;
const hisobla = console.log;

console.log(typeof shahar === "string");     // true
console.log(Array.isArray(narxlar));         // true
console.log(chegirma === null);              // true
console.log(typeof hisobla === "function");  // true

hisobla ga console.log funksiyasining o'zi (qavssiz!) yozildi. Shuning uchun uning turi — "function". Qavs bilan yozilganda (console.log()) funksiya chaqirilgan bo'lardi.

3-mashq (qiyin): Tuzoqli savollar

Kodni ishga tushirmasdan, har bir qator nima chiqarishini yozing. Keyin tekshiring.

js
console.log(typeof typeof null);
console.log(typeof "undefined");
console.log(typeof undefinedNom);
console.log(typeof ("5" * 2));
console.log(typeof ("5" + 2));

Ishora: * satrni songa aylantirishga harakat qiladi, + esa satrni yopishtiradi (oldingi darsdagi "25" + 5 misoli).

Yechim
js
console.log(typeof typeof null);
console.log(typeof "undefined");
console.log(typeof undefinedNom);
console.log(typeof ("5" * 2));
console.log(typeof ("5" + 2));

Konsolda:

text
string
string
undefined
number
string
  1. typeof null — "object". "object" esa satr, shuning uchun typeof "object" — "string".
  2. "undefined" tirnoq ichida — bu 9 harfli satr, undefined qiymati emas.
  3. undefinedNom hech qayerda e'lon qilinmagan. typeof bunda xato bermaydi — "undefined" qaytaradi.
  4. "5" * 2 — 10, son. * satrni songa aylantirdi.
  5. "5" + 2 — "52", satr. + satr bilan uchrashganda yopishtiradi.

11. Real ishda

  • Ma'lumotni tekshirish: foydalanuvchi yoki serverdan kelgan qiymatni ishlatishdan oldin typeof bilan tekshiriladi: "yosh son bo'lib keldimi?". Keyinroq bu ishni Zod kabi kutubxonalar qiladi (tekshiruv uchun tayyor vosita, kursda o'rganamiz).
  • TypeScript: typeof x === "string" tekshiruvidan keyin TypeScript x ni satr deb "tushunadi". Bu TypeScript qismida juda ko'p ishlatiladi.
  • Kutubxonalar: mashhur kutubxonalar ichida typeof x === "function" va Array.isArray(x) tekshiruvlari har qadamda uchraydi.

Intervyuda deyarli har doim so'raladi: "typeof null nima qaytaradi va nega?" Javob: "object" — bu JavaScript'ning birinchi versiyasidan qolgan xato, eski saytlarni buzmaslik uchun tuzatilmagan.

Xulosa

  • typeof x — x ning turini satr ko'rinishida qaytaradi, masalan "string" yoki "number".
  • typeof null — "object". Bu tarixiy xato. null ni === null bilan tekshiring.
  • Massiv uchun typeof "object" beradi. Massivni Array.isArray() bilan tekshiring.
  • Funksiya uchun typeof alohida javob beradi — "function".
  • E'lon qilinmagan nomga typeof xato bermaydi, "undefined" qaytaradi.
  • Natijani har doim kichik harfli, tirnoqli satr bilan solishtiring: "number".

Keyingi dars: undefined va null: yo'qlikning ikki shakli — "qiymat yo'q"ning bu ikki ko'rinishi qachon paydo bo'lishini va qaysi birini qachon ishlatishni o'rganamiz.

Ulashish:Telegram'da

Izohlar (0)

Izoh yozish uchun kiring.

  • Hozircha izoh yo'q. Birinchi bo'ling!
JavaScript typeof: qiymat turini to'g'ri aniqlash — IlmHamroh