# JavaScript modullar (import, export)
> JavaScript modullari: export va import bilan kodni fayllarga bo'lish, nomlangan va standart eksport hamda modul tizimi afzalliklari. Misollar bilan.
Manba: https://learncode.uz/javascript/modullar/
Sana: 2026-05-31
Loyiha o'sgani sayin butun kodni bitta faylda saqlash imkonsiz bo'ladi.
**Modul** — o'z vazifasi bo'lgan alohida fayl; ular bir-birini import qiladi.
## Muammo: bitta katta fayl
Ming qatorli fayl bilan ishlash qiyin: kerakli joyni topish uzoq, ikki
dasturchi bir vaqtda tahrirlay olmaydi, qayta ishlatish mumkin emas.
Yechim — mantiqiy bo'laklarga ajratish:
```
loyiha/
├── main.js ← boshqaruv
├── calc.js ← hisob-kitob funksiyalari
└── format.js ← matn formatlash
```
## export — tashqariga chiqarish
`calc.js` faylida:
```js
export function add(a, b) {
return a + b;
}
export function multiply(a, b) {
return a * b;
}
export const TAX = 0.12;
```
`export` yozilgan narsalar boshqa fayllarga ochiq bo'ladi. Yozilmagani —
faylning ichki ishi bo'lib qoladi.
## import — olib kirish
`main.js` faylida:
```js
import { add, TAX } from "./calc.js";
console.log(add(2, 3));
console.log(TAX);
```
Figurali qavs ichida aynan kerakli narsalar sanaladi.
> **Yo'ldagi ./ nima**
>
> `./calc.js` — "shu papkadagi calc.js" degani. `../` bir papka yuqoriga
> chiqadi. Nuqtasiz nom (`import x from "lodash"`) esa o'rnatilgan paketni
> bildiradi.
## Nom berish
```js
const add = (a, b) => a + b;
const subtract = (a, b) => a - b;
console.log(add(5, 3), subtract(5, 3));
```
Import qilinganda nomni almashtirish mumkin:
```js
import { add as sum } from "./calc.js";
console.log(sum(2, 3));
```
Bu ikki modulda bir xil nom bo'lganda kerak bo'ladi.
## Hammasini olish
```js
import * as calc from "./calc.js";
console.log(calc.add(2, 3));
console.log(calc.TAX);
```
Barcha eksportlar bitta obyektga yig'iladi. Bu qaysi funksiya qayerdan
kelganini aniq ko'rsatadi.
## Standart eksport
Modul bitta asosiy narsa chiqarsa:
```js
// button.js
export default function createButton(text) {
const b = document.createElement("button");
b.textContent = text;
return b;
}
```
```js
// main.js — figurali qavssiz, istalgan nom bilan
import createButton from "./button.js";
```
> **Qaysi birini tanlash**
>
> **Nomlangan eksport** (`export function`) ko'p hollarda afzal: nomlar aniq
> turadi, muharrir avtomatik to'ldiradi va qayta nomlashda xato kamayadi.
> `export default` esa modul bitta narsa — masalan bitta komponent yoki klass —
> chiqarganda mos keladi.
## Brauzerda ulash
Modul ishlashi uchun `type="module"` kerak. Katta loyihada modullarni
[bundler](https://learncode.uz/javascript/bundler) bitta faylga yig'adi — brauzer o'nlab
so'rov yubormaydi:
```html
```
Modul skriptlari:
- avtomatik **defer** bo'ladi — HTML to'liq o'qilgach ishlaydi;
- o'z qamroviga ega — o'zgaruvchilar global maydonga chiqmaydi;
- faqat HTTP orqali ishlaydi (`file://` da brauzer bloklaydi).
> **CORS xatosi**
>
> HTML faylni ikki marta bosib ochsangiz (`file://`), modullar ishlamaydi va
> konsolda CORS xatosi chiqadi. Yechim — oddiy mahalliy server ishga tushirish:
> VS Code'dagi *Live Server* kengaytmasi yoki terminalda
> `npx serve` buyrug'i.
## Amaliy mashq
Loyihani modullarga bo'ling:
1. `calc.js` fayl yaratib, ikki funksiya `export` qiling;
2. `main.js` da ularni `import` qilib ishlating;
3. HTML'ga `