<?xml version="1.0" encoding="utf-8" ?><feed xmlns="http://www.w3.org/2005/Atom" xmlns:tt="http://teletype.in/" xmlns:opensearch="http://a9.com/-/spec/opensearch/1.1/"><title>Yokub</title><author><name>Yokub</name></author><id>https://teletype.in/atom/yokubdev</id><link rel="self" type="application/atom+xml" href="https://teletype.in/atom/yokubdev?offset=0"></link><link rel="alternate" type="text/html" href="https://teletype.in/@yokubdev?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=yokubdev"></link><link rel="next" type="application/rss+xml" href="https://teletype.in/atom/yokubdev?offset=10"></link><link rel="search" type="application/opensearchdescription+xml" title="Teletype" href="https://teletype.in/opensearch.xml"></link><updated>2026-05-30T16:23:54.258Z</updated><entry><id>yokubdev:yGL426pWh88</id><link rel="alternate" type="text/html" href="https://teletype.in/@yokubdev/yGL426pWh88?utm_source=teletype&amp;utm_medium=feed_atom&amp;utm_campaign=yokubdev"></link><title>JavaScript’da Lexical Environment (Scoping) va Closure</title><published>2025-07-13T13:18:17.242Z</published><updated>2025-07-13T13:18:17.242Z</updated><category term="javascript" label="javascript"></category><summary type="html">&lt;img src=&quot;https://img2.teletype.in/files/12/d5/12d5ff47-cb0e-4f73-8022-ec408ace2b9b.jpeg&quot;&gt;JavaScript — kuchli, ammo ba’zan murakkab til. Ayniqsa, closure va lexical scope kabi tushunchalar ko‘pchilikni chalkashtirib yuboradi. Ushbu maqolada siz bu tushunchalarni nafaqat nazariy, balki amaliy misollar orqali ham chuqur tushunib olasiz.</summary><content type="html">
  &lt;p id=&quot;tKdb&quot;&gt;JavaScript — kuchli, ammo ba’zan murakkab til. Ayniqsa, &lt;code&gt;closure&lt;/code&gt; va &lt;code&gt;lexical scope&lt;/code&gt; kabi tushunchalar ko‘pchilikni chalkashtirib yuboradi. Ushbu maqolada siz bu tushunchalarni nafaqat nazariy, balki amaliy misollar orqali ham chuqur tushunib olasiz.&lt;/p&gt;
  &lt;p id=&quot;sGwT&quot;&gt;Bu maqolada siz quyidagilarni o&amp;#x27;rganasiz :&lt;/p&gt;
  &lt;ul id=&quot;heft&quot;&gt;
    &lt;li id=&quot;cXdq&quot;&gt;Lexical Environment nima?&lt;/li&gt;
    &lt;li id=&quot;mPI9&quot;&gt;Scope turlari (Global, Function, Block)&lt;/li&gt;
    &lt;li id=&quot;6VzE&quot;&gt;Closure nima va qanday ishlaydi?&lt;/li&gt;
    &lt;li id=&quot;fGbe&quot;&gt;5 ta amaliy misollar bilan mustahkamlash.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p id=&quot;uzFw&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;oUgr&quot;&gt;1. Lexical Environment nima?&lt;/h3&gt;
  &lt;p id=&quot;bdI3&quot;&gt;Har bir JavaScript funksiyasi ishlayotganida o‘zining &lt;strong&gt;lexical environment&lt;/strong&gt;iga ega bo‘ladi. Bu environment 2 ta asosiy qismdan iborat:&lt;/p&gt;
  &lt;ul id=&quot;xFCS&quot;&gt;
    &lt;li id=&quot;VQxr&quot;&gt;&lt;strong&gt;Environment Record&lt;/strong&gt; – o‘zgaruvchilar va funksiyalar haqida ma’lumot saqlanadigan qism.&lt;/li&gt;
    &lt;li id=&quot;yZsa&quot;&gt;&lt;strong&gt;Outer Lexical Environment Reference&lt;/strong&gt; – tashqi (ya’ni yuqoridagi) scope’ga bog‘lanadi.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p id=&quot;prmQ&quot;&gt;JavaScript’da bu struktura &lt;strong&gt;chain-like scope resolution&lt;/strong&gt; ni tashkil qiladi.&lt;/p&gt;
  &lt;p id=&quot;zSvb&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;xVMM&quot;&gt;2. Scoping turlari&lt;/h3&gt;
  &lt;p id=&quot;bFJk&quot;&gt;&lt;strong&gt;Scope &lt;/strong&gt;- o’zgaruvchi va funksiyalar qayerda ko’rinish/ko’rinmasligini aniqlab beruvchi tushuncha.&lt;/p&gt;
  &lt;p id=&quot;7dwf&quot;&gt;&lt;strong&gt;Global&lt;/strong&gt;  - Har joyda mavjud  &lt;br /&gt;&lt;strong&gt;Function&lt;/strong&gt; - Faqat funksiyada ko‘rinadi   &lt;br /&gt;&lt;strong&gt;Block&lt;/strong&gt;  - &lt;code&gt;{}&lt;/code&gt; ichida (&lt;code&gt;let&lt;/code&gt;, &lt;code&gt;const&lt;/code&gt; o&amp;#x27;zgaruvchilar bunga misol)&lt;/p&gt;
  &lt;p id=&quot;uFGl&quot;&gt;Misol 1: Global va Function scope&lt;/p&gt;
  &lt;pre id=&quot;BJlt&quot; data-lang=&quot;javascript&quot;&gt;var globalVar = &amp;quot;I&amp;#x27;m global&amp;quot;;

function example() {
  let localVar = &amp;quot;I&amp;#x27;m local&amp;quot;;
  console.log(globalVar); // &amp;quot;I&amp;#x27;m global&amp;quot;
  console.log(localVar);  // &amp;quot;I&amp;#x27;m local&amp;quot;
}

example();
// console.log(localVar); // ReferenceError: localVar is not defined&lt;/pre&gt;
  &lt;blockquote id=&quot;ZOIY&quot;&gt;Bu yerda &lt;code&gt;localVar&lt;/code&gt; faqat &lt;code&gt;example&lt;/code&gt; funksiyasi ichida mavjud. Tashqarida unga murojaat qilib bo‘lmaydi&lt;/blockquote&gt;
  &lt;p id=&quot;c6mK&quot;&gt;Misol 2: Block scope ( &lt;code&gt;var&lt;/code&gt;, &lt;code&gt;let&lt;/code&gt;, &lt;code&gt;const&lt;/code&gt;)&lt;/p&gt;
  &lt;pre id=&quot;5Rz9&quot; data-lang=&quot;javascript&quot;&gt;function blockScopeExample() {
  if (true) {
    let a = 42;
    const b = 100;
    var c = 123
    console.log(a, b); // 42 100
  }
  // console.log(a); // ReferenceError
  // console.log(b); // ReferenceError
  // console.log(c); // 123

}

blockScopeExample();&lt;/pre&gt;
  &lt;blockquote id=&quot;kmfn&quot;&gt;&lt;code&gt;let &lt;/code&gt;va &lt;code&gt;const &lt;/code&gt;{} &lt;strong&gt;block-scoped&lt;/strong&gt; bo&amp;#x27;lganligi uchun u yaratilgan blokdan tashqarida murojat qilib bo&amp;#x27;lmaydi. &lt;code&gt;var&lt;/code&gt; esa &lt;strong&gt;function-scoped&lt;/strong&gt; bo‘lib, &lt;code&gt;{}&lt;/code&gt; blok scope dan tashqaridagi function ning &lt;strong&gt;lexical environment&lt;/strong&gt;ida yaratiladi va function ichida murojat qilish mumkin.&lt;/blockquote&gt;
  &lt;p id=&quot;TWXW&quot;&gt;&lt;/p&gt;
  &lt;h3 id=&quot;L7g7&quot;&gt;3. Closure nima?&lt;/h3&gt;
  &lt;p id=&quot;cgM3&quot;&gt;&lt;strong&gt;Closure&lt;/strong&gt; – bu funksiya o‘zining tashqi lexical environmentiga murojaat qilishi mumkin bo‘lgan holatdir, hatto bu tashqi funksiyaga ishlab tugagan bo‘lsa ham.&lt;/p&gt;
  &lt;blockquote id=&quot;g8HM&quot;&gt;Oddiy qilib aytganda: “Ichki funksiya tashqi funksiyadagi o‘zgaruvchilarni eslab qoladi.”&lt;/blockquote&gt;
  &lt;p id=&quot;vW20&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;qwuX&quot;&gt;Misol 3: Oddiy closure&lt;/p&gt;
  &lt;pre id=&quot;mwaa&quot; data-lang=&quot;javascript&quot;&gt;function outer() {
  let count = 0;
  return function inner() {
    count++;
    console.log(&amp;quot;Count:&amp;quot;, count);
  };
}

const counter = outer();
counter(); // Count: 1
counter(); // Count: 2&lt;/pre&gt;
  &lt;blockquote id=&quot;F4u5&quot;&gt;&lt;code&gt;inner&lt;/code&gt; funksiyasi &lt;code&gt;outer&lt;/code&gt; tugagan bo‘lsa ham, &lt;code&gt;count&lt;/code&gt; o‘zgaruvchisini eslab qolgan.&lt;/blockquote&gt;
  &lt;p id=&quot;5aIN&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;Liwx&quot;&gt;Misol 4: Closure bilan private o‘zgaruvchilar yaratish&lt;/p&gt;
  &lt;pre id=&quot;Xkpx&quot; data-lang=&quot;javascript&quot;&gt;function createUser(name) {
  let secret = &amp;quot;My password is 123&amp;quot;;

  return {
    getName: () =&amp;gt; name,
    revealSecret: () =&amp;gt; secret
  };
}

const user = createUser(&amp;quot;Aziz&amp;quot;);
console.log(user.getName());       // Aziz
console.log(user.revealSecret()); // My password is 123&lt;/pre&gt;
  &lt;blockquote id=&quot;wDDd&quot;&gt;Bu usul orqali JavaScript’da &lt;strong&gt;encapsulation&lt;/strong&gt; (yashirish) amalga oshiriladi va bu orqali private variable lar yaratish mumkin.&lt;/blockquote&gt;
  &lt;p id=&quot;wIyW&quot;&gt;&lt;/p&gt;
  &lt;p id=&quot;Slvb&quot;&gt;Misol 5: Loop va Closure muammosi va yechimi (Interview larda ko&amp;#x27;p so&amp;#x27;raladigan savollardan biri)&lt;/p&gt;
  &lt;pre id=&quot;VntA&quot; data-lang=&quot;javascript&quot;&gt;// noto‘g‘ri
for (var i = 0; i &amp;lt; 3; i++) {
  setTimeout(() =&amp;gt; console.log(&amp;quot;Wrong:&amp;quot;, i), 100);
}
natija: 3,3,3

// Yechimi: &amp;#x60;let&amp;#x60; dan foydalanish
for (let i = 0; i &amp;lt; 3; i++) {
  setTimeout(() =&amp;gt; console.log(&amp;quot;Correct:&amp;quot;, i), 100);
}
natija: 1,2,3&lt;/pre&gt;
  &lt;blockquote id=&quot;viFm&quot;&gt;&lt;code&gt;var&lt;/code&gt; — &lt;strong&gt;function-scoped&lt;/strong&gt; (yoki global agar funksiya ichida bo‘lmasa), shuning uchun butun &lt;code&gt;for&lt;/code&gt; sikli davomida &lt;strong&gt;bitta &lt;code&gt;i&lt;/code&gt; o‘zgaruvchisi&lt;/strong&gt; mavjud bo‘ladi.&lt;br /&gt; &lt;code&gt;setTimeout&lt;/code&gt; orqali kechiktirilgan funksiya esa, loop tugagach (&lt;code&gt;i = 3&lt;/code&gt; bo‘lganida) ishga tushadi va &lt;strong&gt;har uchalasida ham &lt;code&gt;i = 3&lt;/code&gt;&lt;/strong&gt; bo‘ladi., &lt;code&gt;let&lt;/code&gt; esa har bir iteratsiyada yangi lexical environment yaratadi.&lt;/blockquote&gt;
  &lt;p id=&quot;6pp0&quot;&gt;&lt;br /&gt;Edge case&amp;#x27;lar :&lt;/p&gt;
  &lt;ul id=&quot;Zgz6&quot;&gt;
    &lt;li id=&quot;0z1r&quot;&gt;Closure orqali katta ma&amp;#x27;lumotni eslab qolish (masalan, DOM) – bu browserda memory leak ga olib kelishi mumkin.&lt;/li&gt;
    &lt;li id=&quot;x9Hk&quot;&gt;Keraksiz o‘zgaruvchilarni closure ichida eslab qolish – bu xavfli yoki chalkash holatga olib keladi.&lt;/li&gt;
    &lt;li id=&quot;uacC&quot;&gt;Ichma-ich closure’lar chuqur bo‘lsa, debugging va profiling juda qiyinlashadi.&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p id=&quot;CwM2&quot;&gt;Qachon ishlatish kerak (Use Cases):&lt;/p&gt;
  &lt;ul id=&quot;zZi9&quot;&gt;
    &lt;li id=&quot;4OWp&quot;&gt;Closure yordamida ma&amp;#x27;lumotni tashqi koddan yashirish mumkin (&lt;code&gt;module pattern&lt;/code&gt;)&lt;/li&gt;
    &lt;li id=&quot;QXMS&quot;&gt;Event handler yoki async kodlarda closure orqali state ni saqlab qolish.&lt;/li&gt;
    &lt;li id=&quot;aFUx&quot;&gt;Bir nechta sozlamali funksiyalarni yaratishda (&lt;code&gt;partial application&lt;/code&gt;, &lt;code&gt;currying&lt;/code&gt;).&lt;/li&gt;
  &lt;/ul&gt;

</content></entry></feed>