JavaScript scope va closure

O’zgaruvchi qayerda ko’rinadi va qachon yo’qoladi? Bu savolga scope javob beradi. Uning ustiga qurilgan closure esa JavaScript’dagi eng kuchli tushunchalardan biri.

Scope — ko’rinish sohasi

JavaScript

const global = "hammaga ko'rinadi";

function tashqi() {
const ichki = "faqat funksiya ichida";
console.log(global);
console.log(ichki);
}

tashqi();
console.log(global);

try {
console.log(ichki);
} catch (xato) {
console.log("Xato:", xato.message);
}

Ichkaridan tashqariga qarash mumkin, teskarisi — yo’q. Bu bir tomonlama oyna kabi.

Blok scope — let va const

JavaScript

if (true) {
let a = "let";
const b = "const";
var c = "var";
}

console.log(c);

try {
console.log(a);
} catch (xato) {
console.log("a:", xato.message);
}

let va const blokda qamalgan, var esa emas — aynan shu sabab o’zgaruvchilar darsida var tavsiya qilinmagan edi.

Sikldagi farq yanada aniqroq:

JavaScript

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

for (let j = 0; j < 3; j++) {
setTimeout(() => console.log("let:", j), 20);
}

var uchta 3 chiqardi — sikl tugagach barcha callback’lar bitta o’zgaruvchini ko’rdi. let esa har aylanish uchun yangi nusxa yaratdi.

Lexical scope

Funksiya qayerda yozilganiga qarab tashqi o’zgaruvchilarni ko’radi — qayerdan chaqirilganiga emas:

JavaScript

const nom = "tashqi";

function korsat() {
console.log(nom);
}

function boshqa() {
const nom = "ichki";
korsat();
}

boshqa();

"tashqi" chiqdi: korsat global darajada yozilgan, shuning uchun global nom ni ko’radi.

Closure — yopilma

Endi asosiy g’oya. Funksiya tashqi o’zgaruvchini eslab qoladi, hatto tashqi funksiya tugagandan keyin ham:

JavaScript

function hisoblagichYarat() {
let soni = 0;

return function () {
  soni++;
  return soni;
};
}

const hisobla = hisoblagichYarat();

console.log(hisobla());
console.log(hisobla());
console.log(hisobla());

hisoblagichYarat allaqachon tugadi, lekin soni yo’qolmadi — qaytarilgan funksiya uni ushlab turibdi. Bu closure.

Har chaqiruv alohida muhit yaratadi:

JavaScript

function hisoblagichYarat() {
let soni = 0;
return () => ++soni;
}

const a = hisoblagichYarat();
const b = hisoblagichYarat();

console.log(a(), a(), a());
console.log(b());

b noldan boshladi — a bilan hisobi umumiy emas.

Nima uchun kerak — yopiq ma’lumot

Closure o’zgaruvchini tashqaridan himoyalaydi:

JavaScript

function hisobYarat(boshlangich) {
let balans = boshlangich;

return {
  qoshish(summa) {
    if (summa <= 0) return "Noto'g'ri summa";
    balans += summa;
    return balans;
  },
  yechish(summa) {
    if (summa > balans) return "Mablag' yetarli emas";
    balans -= summa;
    return balans;
  },
  korish() {
    return balans;
  },
};
}

const hisob = hisobYarat(1000);

console.log(hisob.qoshish(500));
console.log(hisob.yechish(2000));
console.log(hisob.korish());
console.log(hisob.balans);

Oxirgi qator undefined — balans ga faqat qaytarilgan uch metod orqali tegish mumkin. Tekshiruvlarni aylanib o’tib bo’lmaydi.

Sozlanadigan funksiya yasash

JavaScript

function kopaytiruvchi(n) {
return (son) => son * n;
}

const ikkilantir = kopaytiruvchi(2);
const uchlantir = kopaytiruvchi(3);

console.log(ikkilantir(10));
console.log(uchlantir(10));

Bitta shablon — bir nechta tayyor funksiya. Har biri o’z n ini eslab qolgan.

Bir marta bajariladigan funksiya

JavaScript

function birMarta(amal) {
let bajarildi = false;
let natija;

return (...args) => {
  if (bajarildi) return natija;
  bajarildi = true;
  natija = amal(...args);
  return natija;
};
}

const salom = birMarta((ism) => {
console.log("Hisoblanmoqda...");
return "Salom, " + ism;
});

console.log(salom("Aziz"));
console.log(salom("Dilnoza"));

Ikkinchi chaqiruvda “Hisoblanmoqda” chiqmadi — natija closure’da saqlangan.

Amaliy mashq

Funksiya ichida o’zgaruvchi yaratib, tashqaridan o’qishga urinib ko’ring;
if bloki ichida let va var e’lon qilib, farqini kuzating;
hisoblagich yaratuvchi funksiya yozing va ikki nusxa oling;
closure bilan yopiq balans saqlaydigan obyekt tuzing;
kopaytiruvchi(5) kabi sozlanadigan funksiya yasang;
var li siklni setTimeout bilan yozib, nega uchta bir xil son chiqishini tushuntiring.

6-qadam scope va closure bog’liqligini yaxshi ko’rsatadi.

Qisqacha xulosa

Scope — o’zgaruvchi ko’rinadigan hudud: global, funksiya, blok.
Ichkaridan tashqariga ko’rinadi, tashqaridan ichkariga — yo’q.
let/const blokda qamaladi, var — yo’q.
Lexical scope: funksiya yozilgan joyiga qarab ko’radi.
Closure — funksiya tashqi o’zgaruvchini tugagandan keyin ham eslaydi.
Closure yopiq ma’lumot va sozlanadigan funksiyalar uchun ishlatiladi.

Keyingi darsda this kalit so’zi — kontekst qanday aniqlanishi haqida.