Chapter 38 — Modules (import/export)

PART 6 (Modern JavaScript) boshlanadi. Bu bobda katta loyihalarni kichik, boshqarish oson fayllarga bo'lish imkonini beruvchi Module tizimini o'rganamiz.

---

38.1 Module nima va nima uchun kerak?

Simple Explanation

Module — o'z ichiga alohida function, class yoki variable'larni jamlagan, boshqa fayllarga "eksport qilib berish" yoki ulardan "import qilib olish" mumkin bo'lgan JavaScript fayli.

Why Does It Exist?

Modul tizimisiz, katta loyihaning barcha kodi bitta ulkan faylda yoki global scope'da (<script> teglar orqali) yozilishi kerak edi — bu esa nom to'qnashuvlari (name collision) va tartibsizlikka olib kelardi.

Real-Life Analogy

📦 Modullarni alohida qutilarga o'xshating: har bir quti (fayl) o'z ichida ma'lum narsalarni saqlaydi, va siz kerakli narsani boshqa qutidan "so'rab olishingiz" (import) mumkin, hamma narsani bitta katta, tartibsiz omborga (global scope) yig'ib qo'yish o'rniga.

38.2 export — Kod bo'lishish

Named Export (Nomlangan eksport)

script.js
JavaScriptNusxalash
01// mathUtils.js
02export function add(a, b) {
03    return a + b;
04}
05 
06export function subtract(a, b) {
07    return a - b;
08}
09 
10export const PI = 3.14159;

Default Export (Standart eksport)

script.js
JavaScriptNusxalash
01// user.js
02export default class User {
03    constructor(name) {
04        this.name = name;
05    }
06}

Jadval — Named vs Default

38.3 import — Kodni ulash

Named Import

script.js
JavaScriptNusxalash
01// main.js
02import { add, subtract, PI } from "./mathUtils.js";
03 
04console.log(add(5, 3));      // 8
05console.log(PI);              // 3.14159

Default Import

script.js
JavaScriptNusxalash
01// main.js
02import User from "./user.js"; // istalgan nom berish mumkin, "User" bo'lishi shart emas
03 
04let user = new User("Ali");

Qayta nomlash (Renaming) — as kalit so'zi

script.js
JavaScriptNusxalash
01import { add as sum, subtract as diff } from "./mathUtils.js";
02 
03console.log(sum(2, 3)); // 5

Barchasini birga import qilish

script.js
JavaScriptNusxalash
01import * as MathUtils from "./mathUtils.js";
02 
03console.log(MathUtils.add(2, 3));
04console.log(MathUtils.PI);

🔗 Connection
Bu — Chapter 16'da o'rgangan Destructuring'ga o'xshash sintaksis: { add, subtract } — object destructuring'ga juda o'xshaydi, chunki named export'lar aslida bir turdagi "eksport qilingan object" sifatida ishlaydi.

38.4 ⚠️ Qiyin mavzu: Modullar avtomatik "strict mode"da ishlaydi va o'z scope'iga ega

Simple Explanation

Har bir modul fayli — o'zining alohida scopeiga ega. Bu — Chapter 11'da o'rgangan Global Scope tushunchasidan farqli, chunki modul ichidagi variable'lar avtomatik ravishda boshqa fayllarga "sizib chiqmaydi".

Solishtirish — oddiy script vs module

index.html
HTMLNusxalash
01<!-- Oddiy script (eski usul) -->
02<script src="file1.js"></script>
03<script src="file2.js"></script>
04<!-- file1.js'dagi barcha global variable'lar file2.js'da ham ko'rinadi -->
05 
06<!-- Module (zamonaviy usul) -->
07<script type="module" src="file1.js"></script>
08<script type="module" src="file2.js"></script>
09<!-- file1.js'dagi variable'lar file2.js'da KO'RINMAYDI, faqat export qilinganlari -->

Nima uchun bu muhim?

script.js
JavaScriptNusxalash
01// file1.js (module)
02let secretValue = "faqat shu fayl ichida";
03 
04// file2.js (module)
05console.log(secretValue); // ❌ ReferenceError — bu yerda mavjud emas!

Explanation

Har bir modul — o'zining "yopiq" (isolated) scope'iga ega. Faqat export qilingan narsalargina boshqa fayllarga ko'rinadi. Bu — Chapter 12'da o'rgangan Closure orqali erishilgan "private" tushunchasiga juda o'xshash, lekin fayl darajasida.

💡 Key Idea
Bu xususiyat — nomlarning tasodifiy to'qnashishining oldini oladi. Ikki turli modulda bir xil nomli (let count = 0) variable bo'lsa ham, ular bir-biriga hech qanday ta'sir qilmaydi.

38.5 Modullarni HTML'da ishlatish

Example

index.html
HTMLNusxalash
01<!DOCTYPE html>
02<html>
03<body>
04    <script type="module" src="main.js"></script>
05</body>
06</html>

⚠️ Common Mistake
type="module" atributini unutish — brauzer import/export sintaksisini tushunmay, sintaksis xatoligi berishiga olib keladi. Bundan tashqari, modullar odatda fayl orqali (file://) emas, server orqali (http:// yoki https://) ishga tushirilishi kerak — bu ba'zi brauzerlarning xavfsizlik cheklovi tufayli.

38.6 Node.js'da modullar (qisqacha)

Simple Explanation

Node.js muhitida (brauzerdan tashqarida) ikkita modul tizimi mavjud: eski CommonJS (require/module.exports) va zamonaviy ES Modules (import/export, aynan biz o'rgangan sintaksis).

Jadval

🔗 Connection
Bu haqda Chapter 48'da (Node.js Asoslari) yanada batafsil to'xtalamiz.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
greetings.js faylida sayHello(name) nomli function yozing va uni export qiling. main.jsda uni import qilib, chaqiring.
Required Concepts:

• Named export/import
  Hint:
  export function sayHello(name) { ... } va import { sayHello } from "./greetings.js";

🟡 Exercise 2 — Medium

Task:
Calculator class yarating (add, subtract metodlari bilan), uni export default qilib eksport qiling. Boshqa faylda uni istalgan nom bilan import qilib, sinab ko'ring.
Required Concepts:

• Default export/import
  Hint:
  export default class Calculator { ... }

🔴 Exercise 3 — Hard

Task:
stringUtils.js faylida bir nechta named export function yarating (capitalize, reverse, truncate). Boshqa faylda import * as StringUtils orqali barchasini birga import qilib, har birini sinab ko'ring.
Required Concepts:

• Named exports
• import * as
  Hint:
  import * as StringUtils from "./stringUtils.js"; keyin StringUtils.capitalize(...).

🔮 Predict the Output

script.js
JavaScriptNusxalash
01// file1.js (module)
02export let count = 10;
03 
04export function increment() {
05    count++;
06}
07 
08// file2.js (module)
09import { count, increment } from "./file1.js";
10 
11console.log(count); // ?
12increment();
13console.log(count); // ?

🧠 Think first! Javobni ko'rishdan oldin kamida 30 soniya o'ylang.

<details> <summary>Answer</summary> 10 11

Why?
Import qilingan count — asl file1.jsdagi countga jonli havola (live binding), oddiy nusxa emas. file1.js ichida increment() chaqirilib count o'zgartirilganda, bu o'zgarish file2.jsdagi import qilingan countga ham avtomatik aks etadi.

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor:

script.js
JavaScriptNusxalash
01// utils.js
02function double(x) {
03    return x * 2;
04}
05 
06// main.js
07import { double } from "./utils.js";
08 
09console.log(double(5));

Your Task:

• Kod ishga tushganda nima bo'lishini bashorat qiling.
• Nima uchun xatolik yuz berishini tushuntiring.
• Kodni tuzating.

<details> <summary>Solution</summary> Muammo: utils.jsda double function export qilinmagan, shuning uchun u modul tashqarisiga "ko'rinmaydi", va main.jsdagi import { double } — xatolik beradi (double topilmadi).

Yechim:

script.js
JavaScriptNusxalash
01// utils.js
02export function double(x) {
03    return x * 2;
04}
05 
06// main.js
07import { double } from "./utils.js";
08 
09console.log(double(5)); // 10

</details>

📌 Chapter Summary

• Module — kodni alohida, boshqarish oson fayllarga bo'lish imkonini beradi.
• export/import — kodni fayllar orasida bo'lishish uchun ishlatiladi.
• Named export — bir nechta, Default export — faqat bitta bo'lishi mumkin.
• Har bir modul — o'zining alohida, izolyatsiya qilingan scope'iga ega.
• Import qilingan qiymatlar — asl manbaga "jonli havola" orqali bog'langan.

🎯 Key Takeaways

• <script type="module"> — modullarni HTML'da ishlatish uchun majburiy.
• Faqat export qilingan narsalar boshqa fayllarga ko'rinadi — bu global nom to'qnashuvlarining oldini oladi.
• Named export'lar — aniq nom bilan, Default export — istalgan nom bilan import qilinadi.
• Modullar odatda server orqali ishga tushirilishi kerak, to'g'ridan-to'g'ri fayldan emas.
• Import qilingan variable'lar — statik nusxa emas, asl manbaga jonli bog'langan havola.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01// export.js
02export function myFunc() { }
03export const myConst = 42;
04export default class MyClass { }
05 
06// import.js
07import MyClass, { myFunc, myConst } from "./export.js";
08import { myFunc as renamed } from "./export.js";
09import * as All from "./export.js";

---