Lexical environment, IIFE (Immediately Invoked Function Expression), Closure

Assalomu aleykum hammaga. Bugun ham sizlar bilan javascriptdagi muammoli mavzularni oson va sodda ko'rinishda tushuntirishga ushbu maqola orqali harakat qilaman. Demak biz boshladik, tayyormisiz

1. Lexical environment

JavaScript kontekstida leksik muhit (lexical environment) kod tarkibidagi identifikatorlar (o‘zgaruvchilar va funksiyalar) va ularning qiymatlari o‘rtasidagi bog‘lanishni bildiradi. Bu kodning qayerda ma'lum bir o'zgaruvchiga yoki funksiyaga kirishingiz mumkinligini tavsiflovchi asosiy tushunchadir.

Leksik muhitni tasvirlash uchun oddiy misol:

function outerFunction() {

const outerVariable = 'I am from outer';

function innerFunction() {

const innerVariable = 'I am from inner';

console.log(innerVariable); // Ichki muhitdan innerVariable-ga kirish

console.log(outerVariable); // Tashqi muhitdan outerVariable-ga kirish

}

innerFunction();

}

outerFunction();

Ko'rib turganingizday javaScripda har bir funksiya o'zidan tashqarida e'lon qilingan o'zgaruvchidan foydalana oladi va tashqaridagi esa ichkaridagi scope da e'lon qilingan o'zgaruvchidan foydala olmaydi. Buni Lexical environment deymiz.

Lexical environment haqida qisqacha shu ana endi esa asosiy mavzularga o'tamiz.

2. IIFE (Immediately Invoked Function Expression)

(IIFE) JavaScript-dagi dizayn namunasi bo'lib, unda funksiya yaratilgandan so'ng darhol aniqlanadi va bajariladi. Ushbu ko'rinish o'zgaruvchilar uchun shaxsiy doirani yaratishga yordam beradi va ularning global miqyosni ifloslanishiga yo'l qo'ymaydi. IIFE sintaksisi funktsiya deklaratsiyasini qavslar ichiga o'rashni va keyin darhol uni chaqirishni o'z ichiga oladi.

Mana IIFE ning asosiy sintaksisi:

(function() {

// mavjud kod

})();

Ushbu holatda kodni inkapsulyatsiya qilish va boshqa skriptlar bilan o'zgaruvchilar va funksiya nomlari to'qnashuvining oldini olish uchun foydalidir.

Argumentlarni IIFE ga o'tkazish:

(function(arg1, arg2) {

console.log(arg1, arg2); //Hi Doston !

})('Hi ', 'Doston !');

Siz IIFE dan qiymatni qaytarishingiz va uni o'zgaruvchiga belgilashingiz yoki uni qandaydir tarzda ishlatishingiz mumkin:

const result = (function() {

return 'something';

})();

console.log(result); // 'something'

Asosiy fikr shundan iboratki, funktsiyani ifoda qilish uchun qavslar ichida aniqlanadi, keyin esa keyingi qavslar (/* argumentlar */)(); darhol uni chaqiring. Shunday qilib, funktsiya global qamrovga qo'shilmaydi va uning ichida e'lon qilingan har qanday o'zgaruvchilar global qamrovga chiqmaydi.

3. Closure

JavaScript-dagi closure funksiya va ushbu funksiya e'lon qilingan leksik muhitning birikmasidir. Closure funksiyaga oʻz doirasidan oʻzgaruvchilarga kirishni, hatto doirani bajarishni tugatgandan keyin ham saqlab qolish imkonini beradi. Ushbu kontseptsiya JavaScript-da shaxsiy (local) o'zgaruvchilarni yaratish, ma'lumotlarni yashirishni amalga oshirish va funktsional dasturlash konstruktsiyalarini yaratish imkonini beradi.

function outerFunction() {

const outerVariable = 'I am from outer';

function innerFunction() {

console.log(outerVariable); //Tashqi muhitdan outerVariable-ga kirish

}

innerFunction();

}

outerFunction();

Ushbu misolda, outerFunction allaqachon bajarilishini tugatgan bo'lsa ham, innerFunction o'z yopilishidan boshlab outerVariable-ga kirish huquqiga ega.

Shunday qilib Closure bu - bir funksiya o'zidan tashqaridagi funksiyani o'zgaruvchilaridan foydalana olish jarayoni.

Ho'p buni tushundik. Ana endi uni yana qanday vaqtlarda ishlatamiz degan savol tug'iladi. Keling uni ham birgalikda amaliy misol yordamida ko'rib chiqamiz:

function createCounter() {

let count = 0;

return ++count

}

console.log(createCounter()); // 1

console.log(createCounter()); // 1

Yuqorida biz counter yasadik va reja bo'yicha count ni qiymati har funksiya ishlaganda +1 ga oshishi kerak edi. Lekin natija biz kutkanday emas. Chunki har safar funksiya ishlaganda count=0 va return da natija 1 ga aylanyapti va keyingi safar funksiya ishlaganda ham bu ish takrorlanyapti. Biz o'zimiz xoxlagan natijani olish uchun esa bizga closure kerak.

function createCounter() {

let count = 0;

return function() {

return ++count;

};

}

const counter = createCounter();

console.log(counter()); // 1

console.log(counter()); // 2

Shuning bilan bugungi maqolamizni yakunlaymiz. Bugungi maqola orqali javascriptdagi bir qancha muammoli mavzularni osonroq usulda tushuntirishga harakat qildik. Yana qanday mavzularda maqolalar chiqarish sizlarga qiziq fikringizni komentlarda kutib qolaman.

Maqolada yo'l qo'yilgan imloviy xatolarga e'tibor bermaysiz degan umiddaman 😉😉