JavaScript undefined va null: yo'qlikning ikki shakli

Qisqacha: undefined — "qiymat hali berilmagan": uni JavaScript o'zi qo'yadi, masalan qiymatsiz e'lon qilingan o'zgaruvchiga. null — "ataylab bo'sh": uni dasturchi o'zi yozadi. Ikkalasi ham "qiymat yo'q" degani, lekin kelib chiqishi har xil. Ikkalasini birga tekshirish uchun x == null ishlatiladi.

Bu darsda

• undefined qaysi 5 ta holatda paydo bo'lishini bilasiz.
• null ni qachon va nima uchun ataylab yozish kerakligini tushunasiz.
• undefined va null farqini jadval bilan tushuntira olasiz.
• === null, === undefined va == null tekshiruvlarini yoza olasiz.
• JavaScript'dagi eng ko'p uchraydigan xato — Cannot read properties of undefined — ni taniysiz.

Oldin bilishingiz kerak: Ma'lumot turlari xaritasi: primitivlar va obyektlar, typeof va turni to'g'ri aniqlash.

1. Nega bu kerak?

Oldingi ikki darsda undefined va null ni ko'rdik: ikkalasi ham "qiymat yo'q" degani. Unda nega JavaScript'da ular ikkita?

Hayotdan misol. Bank anketasini to'ldiryapsiz. "Ikkinchi telefon raqami" degan katak bor. U ikki xil holatda bo'sh bo'lishi mumkin:

1. Siz bu katakka hali yetib kelmadingiz — u shunchaki to'ldirilmagan.
2. Sizda ikkinchi raqam yo'q, shuning uchun katakka "yo'q" deb chizib qo'ydingiz.

Birinchisida bank xodimi "hali to'ldirmadimi?" deb so'raydi. Ikkinchisida esa hammasi aniq: raqam yo'q, bu — javob.

JavaScript'da ham xuddi shunday:

• undefined — to'ldirilmagan katak. "Bu yerga hali hech narsa yozilmagan."
• null — "yo'q" deb chizilgan katak. "Bu yerda qiymat yo'qligini bilamiz va ataylab belgiladik."

Bu farqni bilish sizga ikki narsa beradi. Birinchidan, kodni o'qiganda "bu qiymat unutildimi yoki ataylab bo'shmi?" degan savolga javob topasiz. Ikkinchidan, JavaScript'dagi eng ko'p uchraydigan xatolardan birini tez tuzatasiz.

2. undefined — "qiymat hali berilmagan"

undefined ni odatda siz yozmaysiz. Uni JavaScript o'zi qo'yadi — qiymat kutilgan joyda hech narsa bo'lmasa. Keling, bu qaysi holatlarda bo'lishini ko'ramiz.

2.1 Qiymatsiz e'lon qilingan o'zgaruvchi

let manzil;
console.log(manzil); // undefined

manzil e'lon qilindi, lekin = bilan unga hech narsa berilmadi. JavaScript bo'sh qoldirmaydi — u undefined yozib qo'yadi.

Bu faqat let bilan bo'ladi. const ni qiymatsiz e'lon qilib bo'lmaydi:

const manzil;

SyntaxError: Missing initializer in const declaration

Tarjimasi: "const e'lonida boshlang'ich qiymat yetishmayapti". Mantiqan to'g'ri: const ni keyin o'zgartirib bo'lmaydi. Qiymatsiz const abadiy undefined bo'lib qolardi — bundan foyda yo'q.

2.2 Obyektda yo'q xususiyat

const talaba = { ism: "Ali" };
console.log(talaba.yosh); // undefined

Oldingi darslardan eslang: talaba.yosh — "talaba obyekti ichidagi yosh". Obyektda yosh yo'q. JavaScript xato bermaydi — shunchaki undefined qaytaradi. Obyektlarni Obyekt: kalit-qiymat juftliklari darsida batafsil o'rganamiz.

2.3 Massivda yo'q o'rin

const narxlar = [5000, 8000];
console.log(narxlar[5]); // undefined

narxlar[5] — "massivdagi 5-indeksdagi qiymat" (sanash 0 dan boshlanadi). Massivda faqat ikkita qiymat bor — 0- va 1-indeksda, 5-indeks bo'sh. Natija — yana undefined. Massiv bilan ishlashni Massiv: yaratish va elementga murojaat darsida boshlaymiz.

2.4 Hech narsa qaytarmaydigan funksiya

Bu biroz g'alati tuyulishi mumkin. Keling, console.log ning natijasini console.log bilan chiqaramiz:

const natija = console.log("Salom");
console.log(natija);

Konsolda:

Salom
undefined

Birinchi qatorda console.log("Salom") ishladi va ekranga "Salom" yozdi. Lekin u hisoblab, qaytarib beradigan natijaga ega emas. Shuning uchun natija ga undefined tushdi.

Funksiya natija qaytarishi nima ekanini return va erta qaytish darsida o'rganamiz. Hozircha eslab qoling: natija qaytarmaydigan funksiyaning "javobi" — undefined.

2.5 Berilmagan argument

Funksiya qavs ichida qiymat kutsa-yu, siz uni bermasangiz — u ham undefined bo'ladi. Bu holatni Parametrlar, argumentlar va default qiymatlar darsida ko'rasiz.

2.6 Umumiy jadval

Hamma holatda umumiy g'oya bitta: JavaScript qiymat qidirdi, lekin topmadi.

Tekshirib ko'ring: Quyidagi kod nima chiqaradi?

js

let telefon;
console.log(telefon);
telefon = "+998 90 123 45 67";
console.log(telefon);

3. null — "ataylab bo'sh"

null ni JavaScript o'zi deyarli hech qachon qo'ymaydi. Uni dasturchi yozadi. null orqali siz boshqa dasturchiga aytasiz: "Men bu yerni unutganim yo'q. Bu yerda qiymat yo'q — va bu to'g'ri holat."

3.1 Qachon null yoziladi?

Uchta tipik vaziyat:

let tanlanganTaom = null;  // mijoz hali taom tanlamagan
let chegirma = null;       // bu buyurtmada chegirma yo'q
let xatoXabari = null;     // hozircha xato yo'q

console.log(tanlanganTaom); // null
console.log(chegirma);      // null
console.log(xatoXabari);    // null

Uchalasida ham biz "hozircha bo'sh" holatni o'zimiz belgiladik. Keyinchalik bu o'zgaruvchilarga haqiqiy qiymat yozilishi mumkin:

let tanlanganTaom = null;
console.log(tanlanganTaom); // null

tanlanganTaom = "Lag'mon";
console.log(tanlanganTaom); // Lag'mon

3.2 Tayyor vositalar ham null qaytaradi

Ba'zi tayyor funksiyalar "topilmadi" degan javobni null bilan beradi. Masalan, brauzerda sahifadan element (tugma, sarlavha, matn) qidiradigan document.querySelector() funksiyasi element topilmasa null qaytaradi. Hozir bilish shart emas. Uni Elementlarni tanlash darsida o'rganamiz.

Serverlar bilan almashiladigan JSON formatida ham null bor, undefined esa yo'q. Shuning uchun serverdan kelgan ma'lumotda "bo'sh" qiymat doim null bo'lib keladi.

3.3 Qoida: bo'shatmoqchi bo'lsangiz — null

Texnik jihatdan undefined ni ham qo'lda yozish mumkin: let x = undefined;. Lekin dasturchilar orasida kelishuv bor:

• undefined — JavaScript'ga qoldiring. Uni o'zingiz yozmang.
• "Bu yer ataylab bo'sh" demoqchi bo'lsangiz — null yozing.

Shunda kodni o'qigan odam darhol farqlaydi. undefined ko'rsa — "biror narsa to'ldirilmagan, balki xato bordir". null ko'rsa — "bu rejalashtirilgan bo'shliq".

Tekshirib ko'ring: Foydalanuvchi profilida "otasining ismi" maydoni bor. Foydalanuvchi uni to'ldirishni xohlamadi. Qaysi qiymatni yozasiz: undefined yoki null?

4. undefined va null: yonma-yon

Ikkalasining farqini bitta jadvalda to'playmiz:

typeof farqi oldingi darsdan tanish. Songa qo'shish farqini kodda ko'ramiz:

console.log(undefined + 1); // NaN
console.log(null + 1);      // 1

null hisobda 0 ga aylanadi, undefined esa NaN ("son emas") beradi. Ikkalasi ham kutilmagan natija. Hisob-kitobda bu qiymatlar paydo bo'lsa — kodda qayerdadir xato bor. Bunday "yashirin aylanishlar"ni Yashirin coercion qoidalari darsida chuqur ko'ramiz.

5. Qiymat yo'qligini tekshirish

5.1 Aniq tekshiruv: ===

Oldingi darsda === bilan tanishdik: u ikki qiymat aynan tengligini tekshiradi.

let manzil;
const chegirma = null;

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

null va undefined — ikki xil qiymat. Shuning uchun oxirgi qator false.

5.2 Ikkalasini birga: == null

Ko'pincha farqi muhim emas. Bizni bitta savol qiziqtiradi: "Qiymat bormi yoki yo'qmi?" Buning uchun dasturchilar maxsus usuldan foydalanadi — == null:

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

== — === ning "yumshoq" varianti. U taqqoslashdan oldin qiymatlarni bir-biriga moslashga harakat qiladi. Bu ko'pincha kutilmagan natijalarga olib keladi, shuning uchun odatda === ishlatiladi. Batafsil — Tenglik: ==, === va Object.is darsida.

Lekin == null — foydali istisno. Boshqa hamma joyda === qoidasi o'z kuchida qoladi. == null — dasturchilar kelishib olgan, deyarli yagona qulay istisno. Qoida aniq: x == null faqat ikki holatda true beradi — x null yoki undefined bo'lsa. 0, bo'sh satr "" va false uchun esa false. Ya'ni u "haqiqatan qiymat yo'qmi?" degan savolga aniq javob beradi.

let telefon;
const email = null;
const bal = 0;

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

bal ning qiymati 0 — bu "yo'q" emas, bu haqiqiy son. == null buni to'g'ri ajratdi.

5.3 Zaxira qiymat: ?? bilan tanishuv

Qiymat yo'q bo'lsa, o'rniga boshqa qiymat qo'yish tez-tez kerak bo'ladi. Masalan, foydalanuvchi ismi bo'lmasa — "Mehmon" deb yozish. Buning uchun ?? operatori bor:

const ism = null;
console.log(ism ?? "Mehmon"); // Mehmon

const bal = 0;
console.log(bal ?? 100); // 0

?? shunday ishlaydi: chapdagi qiymat null yoki undefined bo'lsa, o'ngdagisini oladi. Aks holda chapdagini qoldiradi. Shuning uchun 0 saqlanib qoldi — 0 "yo'q" emas.

?? va unga o'xshash operatorlarni ??, ?. va mantiqiy tayinlash darsida to'liq o'rganamiz.

Tekshirib ko'ring: "" == null natijasi nima va nega?

6. Ko'p uchraydigan xatolar

6.1 Cannot read properties of undefined

Bu — JavaScript dasturchilari eng ko'p ko'radigan xato. Uni albatta uchratasiz, shuning uchun hozirdan tanishib qo'ying:

let foydalanuvchi;
console.log(foydalanuvchi.ism);

TypeError: Cannot read properties of undefined (reading 'ism')

Tarjimasi: "undefined ning xususiyatlarini o'qib bo'lmaydi (ism ni o'qishga urinilgan edi)".

Nima bo'ldi? foydalanuvchi da obyekt bo'lishi kerak edi, lekin u undefined. undefined ichida hech narsa yo'q — undan ism ni olib bo'lmaydi. Anketa varag'ini olib kelishni so'radingiz, lekin qo'lingizga bo'sh havo tutqazishdi — varaqdagi ismni o'qiy olmaysiz.

Xabarda ism so'zi bor, lekin muammo ism da emas. Muammo — nuqtadan oldingi narsada (foydalanuvchi). Qoida: bu xatoni ko'rsangiz, nuqtadan oldingi o'zgaruvchi nega bo'sh qolganini qidiring.

null bilan ham xuddi shunday:

const tanlanganTaom = null;
console.log(tanlanganTaom.narx);

TypeError: Cannot read properties of null (reading 'narx')

Bu xatodan himoyalanishning qulay usuli — ?. operatori. U ham ??, ?. va mantiqiy tayinlash darsida.

6.2 is not defined va undefined ni adashtirish

Ikki xabar bir-biriga o'xshaydi, lekin ma'nosi butunlay boshqa:

let manzil;
console.log(manzil); // undefined

console.log(manzilim);

ReferenceError: manzilim is not defined

• undefined — o'zgaruvchi bor, lekin unda qiymat yo'q. Bu xato emas, oddiy qiymat.
• is not defined — bunday nomli o'zgaruvchi umuman yo'q. Bu haqiqiy xato, dastur to'xtaydi. Ko'pincha sababi — nomdagi imlo xatosi yoki o'zgaruvchini e'lon qilishni unutish.

Inglizchada "defined" — "aniqlangan". Shuning uchun undefined so'zi "aniqlanmagan" deb tarjima qilinadi va ikki xabar chalkashib ketadi. Eslab qolish uchun: undefined — bo'sh quti, is not defined — quti umuman yo'q.

Konsolda ularni xabarning boshidan ajrating. ReferenceError: ... is not defined — xato turi nomi bilan boshlanadi va dastur to'xtaydi. undefined esa hech qanday xato nomisiz, oddiy natija sifatida chiqadi.

6.3 "undefined" satri va undefined qiymati

const holat = "undefined";
console.log(typeof holat); // string

Tirnoq ichidagi "undefined" — 9 harfli oddiy matn. U undefined qiymati emas. Bu xato ko'pincha matnni qo'lda yozganda paydo bo'ladi. Konsolda ikkalasi bir xil ko'rinadi, typeof esa farqni ko'rsatadi.

6.4 undefined ni qo'lda yozish

let chegirma = undefined; // ❌ ishlaydi, lekin ma'nosi noaniq
let chegirmaYoq = null;   // ✅ "ataylab bo'sh" — aniq

console.log(chegirma);    // undefined
console.log(chegirmaYoq); // null

Birinchi qator xato bermaydi. Lekin kodni o'qigan odam tushunmaydi: "bu ataylabmi yoki kimdir qiymatni unutdimi?" Bo'sh qiymat kerak bo'lsa — null yozing.

7. Mashqlar

1-mashq (oson): Nima chiqadi?

Har bir qator nima chiqarishini yozing.

• let a; console.log(a); →
• console.log(null == undefined); →
• console.log(null === undefined); →
• console.log(typeof null); →

let a;
console.log(a);                  // undefined
console.log(null == undefined);  // true
console.log(null === undefined); // false
console.log(typeof null);        // object

2-mashq (o'rta): Taksi buyurtmasi

Taksi buyurtmasi uchun o'zgaruvchilar yarating. Har birida null yoki qiymatsiz let ni to'g'ri tanlang:

• yolovchi — "Malika".
• haydovchi — hali haydovchi qidirilmoqda. Tizim buni biladi, bu rejalashtirilgan bo'sh holat.
• promokod — Malika promokod kiritmasligini aytdi.
• izoh — hali hech narsa berilmagan, faqat e'lon qiling.

Keyin har biri uchun == null tekshiruvini console.log bilan chiqaring.

const yolovchi = "Malika";
let haydovchi = null;
const promokod = null;
let izoh;

console.log(yolovchi == null);  // false
console.log(haydovchi == null); // true
console.log(promokod == null);  // true
console.log(izoh == null);      // true

3-mashq (qiyin): Zaxira qiymatlar

Do'kon ilovasida mahsulot kartochkasi chiqarilyapti. Ba'zi ma'lumotlar yo'q. ?? yordamida quyidagicha chiqaring:

• nomi — "Non". Bo'lmasa "Nomsiz mahsulot" chiqsin.
• chegirma — 0 (chegirma 0 foiz). Bo'lmasa 5 chiqsin.
• tavsif — null. Bo'lmasa "Tavsif yo'q" chiqsin.
• reyting — qiymatsiz let. Bo'lmasa "Hali baho berilmagan" chiqsin.

Ishora: ?? faqat null va undefined bo'lganda o'ngdagi qiymatni oladi. 0 uchun nima bo'lishini oldindan o'ylab ko'ring.

const nomi = "Non";
const chegirma = 0;
const tavsif = null;
let reyting;

console.log(nomi ?? "Nomsiz mahsulot");
console.log(chegirma ?? 5);
console.log(tavsif ?? "Tavsif yo'q");
console.log(reyting ?? "Hali baho berilmagan");

Non
0
Tavsif yo'q
Hali baho berilmagan

8. Real ishda

• Serverdan kelgan ma'lumot: API (Application Programming Interface — dasturlar bir-biri bilan gaplashadigan "eshik", kursda o'rganamiz) javobida bo'sh maydonlar null bo'lib keladi: "otasiningIsmi": null. Kodingiz bunga tayyor turishi kerak.
• Ma'lumotlar bazasi: bazalarda ham NULL tushunchasi bor — "qiymat yo'q". U JavaScript'ga null bo'lib keladi. Bazalarni kursning alohida qismida o'rganamiz.
• React va frontend: Cannot read properties of undefined — frontend loyihalarida eng ko'p uchraydigan xato. Odatda ma'lumot serverdan hali kelib ulgurmagan paytda chiqadi.
• TypeScript: u null va undefined bo'lishi mumkin bo'lgan joylarni oldindan ko'rsatib beradi. Aynan shu xatolarning oldini olish uchun.

Intervyuda deyarli har doim so'raladi: "null va undefined farqi nima?" Javob: undefined — qiymat hali berilmagan, uni JavaScript qo'yadi; null — ataylab qo'yilgan bo'sh qiymat, uni dasturchi yozadi. Qo'shimcha ball uchun: typeof null — "object", va ikkalasini == null bilan birga tekshirish mumkin.

Xulosa

• undefined — qiymat hali berilmagan. Uni JavaScript o'zi qo'yadi.
• undefined paydo bo'ladi: qiymatsiz let, yo'q xususiyat, massivdagi yo'q o'rin, natija qaytarmagan funksiya, berilmagan argument.
• null — ataylab bo'sh. Uni dasturchi yozadi. Bo'shatmoqchi bo'lsangiz — null.
• x == null — x null yoki undefined bo'lsa true. 0 va "" uchun false.
• ?? — qiymat yo'q bo'lganda zaxira qiymat beradi.
• Cannot read properties of undefined — nuqtadan oldingi o'zgaruvchi bo'sh qolgan.

Keyingi dars: Boolean va truthy/falsy qiymatlar — true va false ni chuqurroq ko'ramiz va nega 0, "" hamda null shartda "yolg'on" hisoblanishini bilib olamiz.