O'zgaruvchilar va ma'lumot turlari - JavaScript asoslari

O'zgaruvchi - qiymat saqlanadigan nomlangan quti. JavaScript da uni e'lon qilishning uch usuli bor, lekin bugun ikkitasi ishlatiladi.

`let`, `const` va `var` #

JavaScript

let hisob = 10;          // keyin o'zgartirish mumkin
const PI = 3.14159;      // o'zgarmas
var eski = "ishlatmang"; // eski usul

hisob = 20;              // ruxsat
console.log("hisob:", hisob);
console.log("PI   :", PI);

try {
    PI = 3;              // xato beradi
} catch (xato) {
    console.log("Xato:", xato.constructor.name);
}

Natija

hisob: 20
PI   : 3.14159
Xato: TypeError

var ning funksiya ko'lami kutilmagan xatolarga sabab bo'ladi

`var` nima uchun muammoli #

JavaScript

function varSinovi() {
    for (var i = 0; i < 3; i++) {
        // ...
    }
    return i;              // sikldan tashqarida ham ko'rinadi
}

function letSinovi() {
    for (let j = 0; j < 3; j++) {
        // ...
    }
    try {
        return j;          // bu yerda mavjud emas
    } catch (xato) {
        return "j mavjud emas - " + xato.constructor.name;
    }
}

console.log("var bilan:", varSinovi());
console.log("let bilan:", letSinovi());

Natija

var bilan: 3
let bilan: j mavjud emas - ReferenceError

var va sikl ichidagi funksiyalar

Klassik xato:

JavaScript

for (var i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);
}
// natija: 3, 3, 3

var bitta o'zgaruvchi yaratadi, sikl esa uni o'zgartiraveradi. Taymer ishlaganda i allaqachon 3 bo'lgan.

let bilan esa har takrorlanish uchun yangi o'zgaruvchi yaratiladi:

JavaScript

for (let i = 0; i < 3; i++) {
    setTimeout(() => console.log(i), 100);
}
// natija: 0, 1, 2

Bu ES6 gacha JavaScript dagi eng ko'p savol tug'diradigan xatti-harakat edi. Yechim uchun IIFE yozishga to'g'ri kelardi - hozir shunchaki let yozasiz.

`const` va obyektlar #

JavaScript

const foydalanuvchi = { ism: "Nodira", yosh: 23 };

foydalanuvchi.yosh = 24;              // RUXSAT - ichini o'zgartirdik
foydalanuvchi.shahar = "Andijon";     // RUXSAT - yangi xossa

console.log(foydalanuvchi);

try {
    foydalanuvchi = { ism: "Boshqa" }; // TAQIQ - butunlay almashtirish
} catch (xato) {
    console.log("Xato:", xato.constructor.name);
}

Natija

{ ism: 'Nodira', yosh: 24, shahar: 'Andijon' }
Xato: TypeError

const obyektni muzlatmaydi

const faqat o'zgaruvchi qaysi qiymatga ishora qilishini qulflaydi. Obyektning ichi ochiq qoladi.

Haqiqatan muzlatish uchun Object.freeze kerak:

JavaScript

const sozlama = Object.freeze({ til: "uz" });
sozlama.til = "en";              // jimgina e'tiborsiz qoldiriladi
console.log(sozlama.til);        // "uz"

Lekin Object.freeze ham sayoz (shallow) - ichma-ich obyektlarni muzlatmaydi:

JavaScript

const a = Object.freeze({ ichki: { son: 1 } });
a.ichki.son = 99;                // bu o'tadi!

Chuqur muzlatish uchun rekursiv funksiya yozish kerak.

Primitiv turlar #

JavaScript

const son = 42;
const kasr = 3.14;
const satr = "Salom";
const mantiq = true;
const yoq = null;
const aniqlanmagan = undefined;
const katta = 9007199254740993n;
const noyob = Symbol("id");

console.log(typeof son);
console.log(typeof kasr);
console.log(typeof satr);
console.log(typeof mantiq);
console.log(typeof yoq);
console.log(typeof aniqlanmagan);
console.log(typeof katta);
console.log(typeof noyob);

Natija

number
number
string
boolean
object
undefined
bigint
symbol

typeof null - tildagi mashhur xato

null obyekt emas, lekin typeof null "object" qaytaradi.

Bu 1995-yildagi dastlabki amalga oshirishdagi xato. JavaScript ichida qiymatlar teg bilan saqlanardi va obyekt tegi 0 edi. null esa nol ko'rsatkich - u ham 0 bo'lib chiqdi.

Uni tuzatib bo'lmaydi: millionlab saytlar buzilardi. ECMAScript qo'mitasi tuzatishni rasman rad etgan.

null ni to'g'ri tekshirish:

JavaScript

qiymat === null                          // aniq tekshiruv
qiymat == null                           // null yoki undefined
typeof qiymat === "object" && !qiymat    // uzun yo'l

null - "ataylab bo'sh", undefined - "hali qiymat berilmagan". Farqi:

JavaScript

let a;                    // undefined - o'zimiz bermadik
let b = null;             // null - ataylab bo'sh qo'ydik

Sonlar bilan ehtiyot bo'ling #

JavaScript

console.log(0.1 + 0.2);
console.log(0.1 + 0.2 === 0.3);
console.log((0.1 + 0.2).toFixed(2));

// To'g'ri taqqoslash
const farq = Math.abs((0.1 + 0.2) - 0.3);
console.log("Farq juda kichikmi?", farq < Number.EPSILON);

// Butun sonlar chegarasi
console.log(Number.MAX_SAFE_INTEGER);
console.log(Number.MAX_SAFE_INTEGER + 1 === Number.MAX_SAFE_INTEGER + 2);

Natija

0.30000000000000004
false
0.30
Farq juda kichikmi? true
9007199254740991
true

Barcha sonlar - suzuvchi nuqtali

JavaScript da int va float ajratilmagan. Har bir son - 64 bitli IEEE 754 suzuvchi nuqtali qiymat.

0.1 ni ikkilik sanoqda aniq ifodalab bo'lmaydi, xuddi 1/3 ni o'nlikda yozib bo'lmagani kabi. Shuning uchun 0.1 + 0.2 biroz og'adi.

Bu JavaScript ning kamchiligi emas - Python, C, Java da ham xuddi shunday.

Pul bilan ishlaganda hech qachon suzuvchi nuqta ishlatmang:

JavaScript

// NOTO'G'RI
const narx = 19.99;

// TO'G'RI - tiyinlarda butun son sifatida
const narxTiyin = 1999;
console.log(`${Math.floor(narxTiyin / 100)}.${narxTiyin % 100} so'm`);

Yoki juda katta sonlar uchun BigInt ishlating: 123n.

Turlarni o'zgartirish #

JavaScript

// Satrga
console.log(String(42), typeof String(42));
console.log((42).toString(), typeof (42).toString());

// Songa
console.log(Number("42"), typeof Number("42"));
console.log(parseInt("42px"), parseFloat("3.14rem"));
console.log(Number("salom"));

// Mantiqiy qiymatga
console.log(Boolean(0), Boolean(""), Boolean("salom"), Boolean([]));

Natija

42 string
42 string
42 number
42 3.14
NaN
false false true true

Yolg'on (falsy) qiymatlar - hammasi sakkizta

Quyidagi qiymatlar if ichida yolg'on deb hisoblanadi:

Qiymat	Izoh
`false`	mantiqiy yolg'on
`0`, `-0`	nol
`0n`	BigInt nol
`""`	bo'sh satr
`null`	bo'sh
`undefined`	aniqlanmagan
`NaN`	son emas

Qolgan hamma narsa rost. Shu jumladan ajablanarli holatlar:

JavaScript

Boolean([])         // true  - bo'sh massiv ham rost!
Boolean({})         // true  - bo'sh obyekt ham rost!
Boolean("0")        // true  - "0" satri rost!
Boolean("false")    // true  - "false" satri ham rost!

Massiv bo'shligini tekshirish uchun uzunligiga qarang:

JavaScript

if (royxat.length === 0) { /* bo'sh */ }

Avtomatik o'zgartirish tuzoqlari #

JavaScript

console.log("5" + 3);
console.log("5" - 3);
console.log("5" * "2");
console.log(1 + "2" + 3);
console.log(1 + 2 + "3");
console.log([] + {});
console.log(true + true);

Natija

53
2
10
123
33
[object Object]
2

+ ikki xil ishlaydi

+ operatori JavaScript da ikki vazifa bajaradi:

Sonlarni qo'shish;
Satrlarni ulash.

Agar operandlardan birortasi satr bo'lsa, ulash g'alaba qozonadi:

JavaScript

"5" + 3    // "53"  - ulash

Boshqa arifmetik operatorlar (-, *, /) esa ulashni bilmaydi, shuning uchun satrni songa aylantiradi:

JavaScript

"5" - 3    // 2     - ayirish

Chapdan o'ngga bajarilishini unutmang:

JavaScript

1 + 2 + "3"    // (1+2) + "3"   -> "33"
1 + "2" + 3    // (1+"2") + 3   -> "123"

Yechim: turni aniq belgilang.

JavaScript

Number(kiritilgan) + 3

Bu ayniqsa formadan kelgan ma'lumot bilan muhim - HTML input har doim satr qaytaradi.

O'zgaruvchi nomlash qoidalari #

JavaScript

// To'g'ri
let ism = "Kamola";
let _shaxsiy = true;
let $element = "jQuery uslubi";
let foydalanuvchiYoshi = 30;      // camelCase - JS an'anasi
const MAKS_URINISH = 3;            // o'zgarmas uchun SCREAMING_CASE

console.log(ism, _shaxsiy, $element, foydalanuvchiYoshi, MAKS_URINISH);

Natija

Kamola true jQuery uslubi 30 3

Qoida	Misol
Raqam bilan boshlanmaydi	`2ism` — xato
Bo'shliq bo'lmaydi	`mening ism` — xato
Zaxira so'z bo'lmaydi	`let`, `class`, `return`
Katta-kichik harf farqlanadi	`ism` va `Ism` — turlicha
An'ana: camelCase	`foydalanuvchiYoshi`

Amaliy topshiriq

const bilan e'lon qilingan qiymatni o'zgartirib, xatoni ko'ring.
const obyektning ichki xossasini o'zgartiring - ishlaydimi?
Object.freeze bilan obyektni muzlating va sinang.
var va let ni sikl ichida setTimeout bilan taqqoslang.
Sakkizta primitiv turni typeof bilan tekshiring.
typeof null nima uchun "object" ekanini tushuntiring.
0.1 + 0.2 === 0.3 nima uchun false ekanini ayting.
Sakkizta yolg'on qiymatni sanang.
"5" + 3 va "5" - 3 farqini tushuntiring.
Formadan kelgan satrni songa aylantirib qo'shing.

Xulosa #

const dan boshlang, o'zgarishi kerak bo'lsagina let.
var ni ishlatmang - funksiya ko'lami xatolarga olib keladi.
const qayta tayinlashni taqiqlaydi, obyekt ichini emas.
Object.freeze sayoz muzlatadi.
Primitiv turlar: number, string, boolean, null, undefined, bigint, symbol.
typeof null === "object" - tuzatilmaydigan tarixiy xato.
null "ataylab bo'sh", undefined "qiymat berilmagan".
Barcha sonlar 64 bitli suzuvchi nuqtali - pul uchun butun son.
Sakkizta yolg'on qiymat bor; [] va {} ular orasida yo'q.
+ satr bilan ulaydi, qolgan amallar songa aylantiradi.

Keyingi bo'limda operatorlar va shart konstruksiyalarini ko'ramiz.

let, const va var #

var nima uchun muammoli #

const va obyektlar #

Primitiv turlar #

Sonlar bilan ehtiyot bo'ling #

Turlarni o'zgartirish #

Avtomatik o'zgartirish tuzoqlari #

O'zgaruvchi nomlash qoidalari #

Xulosa #

Xatolik topdingizmi?

`let`, `const` va `var` #

`var` nima uchun muammoli #

`const` va obyektlar #