JavaScriptda "Closure" tushunchasi.

Assalamu Alaykum.

Kamina Umar, bugun sizlar bilan JavaScriptda "Closure" mavzusida maqola qilaman. Ha, biroz mujmal narsaga qo'l urib qo'ydik 🤭🥴😂.

Sodda tilda tushuntirishga harakat qilaman. Misollar orqali.

"*" ushbu belgi bilan belgilab ketgan so'zlarimga kim tushunmasa darhol kommentga yozsin. Bu haqida ham maqola qilishni o'ylab ko'raman talablarga qarab.

Demak boshladik.

Bismillah.

JavaScripda har bir funksiya o'zidan tashqarida e'lon qilingan o'zgaruvchidan foydalana oladi va tashqari esa ichkaridagi *scope da e'lon qilingan o'zgaruvchidan foydala olmaydi. Buni "*Lexical environment" deymiz. Misol uchun, birinchi funksiya ichida ikkinchi funksiya bor bo'lsa, ikkinchi funksiya birinchi funksiyaning o'zgaruvchilaridan foydalana oladi. Mana shuni biz, Closure deymiz.

Juda osonmi ?)
Qanday?, tushunmadim ?

Keling misollarga o'tamiz.

function parent(){

var number = 12;
}

Texnik holatda, biz "number" o'zgaruvchisiga hech qanday holatda tashqaridan kira olmaymiz, to'grimi ?

Chunki, bu o'zgaruvchi funksiya ichidagina mavjud.

Ammo, ichkaridan funksiya yaratsakchi ?

U ham bu o'zgaruvchiga kira olmaydimi ?

Misol:

function parent(){

var number = 12;

function child(){

console.log(number);

}

child(); // 12
}

Marhamat. Ichkaridagi child() funksiyasi orqali tashqaridagi o'zgaruvchiga kira olamiz. Xattoki agar, tashqaridagi funksiya tugagan bo'lsa ham.

Demak eng oddiy usulda tushundik "Closure" nima ekanligini.

Ya'ni, Closure bu - bir funksiya o'zidan tashqaridagi funksiyani o'zgaruvchilaridan foydalana oladi.

Xattoki agar yuqoridagi funksiya tugab bo'lgan bo'lsa ham.

Xo'sh bu yozganimni manosi nima ?

Misollar bilan tushuntirishga urunib ko'raman.

Bizga, har chaqirilganda ichidagi "counter" o'zgaruvchisini qiymatini +1 ga oshirib boradigan funksiya kerak. Qanday qilamiz ?

let count = function(){

let counter = 0;

return counter += 1;

}

count(); // 1

count(); // 1

count(); // 1

Ups, natija biz kutgandek emas.

Chunki ichkaridagi o'zgaruvchi funksiya har chaqirilganda 0 dan 1 ga o'zgaryapti holos.

Bizga Closure kerak.

Ichkaridan yangi funksiya yaratamiz va uni return qilamiz, funksiya ishlashi uchun *IIFE "(...)()" dan foydalanib shu joyning o'zida funksiyani ishlatib yuboramiz:

let count = (function(){

let counter = 0;

return function(){
return counter += 1;
}

})();

count(); // 1

count(); // 2

count(); // 3

Demak ko'rib turganimizdek, ichkaridagi funksiya xattoki tepadagi funksiya yo'q bo'lsa ham uni ichidagi o'zgaruvchisidan foydalana olyapti. Yuqorida aytganlarimni hoziroq yana bir bor o'qib oling.)

Oddiy ammo tushuntirish juda qiyin bo'lgan ushbu mavzuni Alloh qodir qilganicha, qo'ldan kelgancha tushuntirdim😉. Foydali bo'ldi deb o'ylayman.

Fikringizni kommentda kutaman.)

Kanalimiz: @JoshDeveloper