JavaScript nima? Brauzer da qanday ishlaydi, V8 engine

~10 daq · JavaScript · Kirish va Asoslar

Muammodan boshlaylik

Siz veb sahifa yaratdingiz — HTML bilan tuzilma, CSS bilan ko'rinish. Lekin sahifa "o'lik" — hech narsa harakat qilmaydi, hech narsa o'zgarmaydi. Tugmani bossangiz — hech narsa bo'lmaydi. Forma to'ldirsangiz — server bilmaydi. Yangi ma'lumot kelsa — sahifani qayta yuklash kerak.

Veb sahifaga "hayot" berish uchun uchinchi narsa kerak edi. Shu narsa — JavaScript.

JavaScript nima?

JavaScript — brauzerda ishlaydigan dasturlash tili. U veb sahifani interaktiv qiladi: tugmalar ishlaydi, formalar tekshiriladi, ma'lumotlar serverdan olinadi, sahifa qayta yuklanmasdan yangilanadi.

1995 yilda Brendan Eich uni atigi 10 kunda yaratdi — Netscape brauzeri uchun. Dastlab "LiveScript" deb atalgan, keyin marketing sabablari bilan "JavaScript" deb o'zgartirilgan. Java bilan hech qanday aloqasi yo'q — faqat nom o'xshash.

Bugun JavaScript faqat brauzer bilan cheklanmaydi:

  • Brauzer — sahifani boshqarish (asosiy maqsad)
  • Server — Node.js orqali backend yozish
  • Mobil — React Native bilan iOS va Android
  • Desktop — Electron bilan (VS Code, Slack, Figma — barchasi JavaScript)

Hayotiy o'xshatma

HTML — uyning g'ishtlari va devorlari. CSS — uyning bo'yog'i, pardalar, mebel joylashuvi. JavaScript — uyning elektr tizimi: chiroq yoqiladi, eshik ochiladi, konditsioner ishlaydi.

G'isht va bo'yoqsiz uy bo'lmaydi. Lekin elektrsiz uy — muzey, faqat ko'rish uchun. JavaScript sahifani muzeydan yashaydigan joyga aylantiradi.

Brauzerda qanday ishlaydi?

Siz script.js faylingizni yozdingiz. Brauzer uni qanday bajaradi?

1-qadam: Yuklab olish

Brauzer HTML ni o'qiyotganda <script src="script.js"> ga yetganda — faylni serverdan yuklab oladi.

2-qadam: Parsing (tahlil qilish)

Yuklab olingan matn — bu faqat belgilar ketma-ketligi. Brauzer uni tushunishi uchun AST (Abstract Syntax Tree — mavhum sintaksis daraxti) ga aylantiradi.

"let x = 5 + 3"
        ↓
  VariableDeclaration
    └── Identifier: x
    └── BinaryExpression
          ├── Literal: 5
          ├── Operator: +
          └── Literal: 3

Bu daraxt — kodning tuzilmasi. Brauzer endi kodni "tushunadi".

3-qadam: Compilation va Execution (V8 Engine)

Bu yerda V8 Engine ishga kiradi.

V8 Engine nima?

V8 — Google tomonidan yaratilgan JavaScript dvigateli (engine). Chrome va Node.js da ishlatiladi. JavaScript kodini o'qib, uni protsessor tushungan mashina kodiga aylantiradi va bajaradi.

Nima uchun "V8"? Avtomobil dvigatellaridagi 8 silindrli V-shaklidagi dvigateldan ilhomlanib nomlangan — kuchli va tez degani.

V8 ning ikkita asosiy qismi bor:

Ignition — interpreter. Kodni tez o'qib, baytcodega aylantiradi. Dastlab tez ishga tushish uchun.

TurboFan — optimizatsiya kompilyatori. Ko'p marta bajarilgan kodni kuzatadi, optimizatsiya qilib, to'g'ridan-to'g'ri mashina kodiga aylantiradi. Shu sababli JavaScript vaqt o'tishi bilan tezlashadi.

JavaScript kodi
      ↓
   Parsing → AST
      ↓
  Ignition → Bytecode (tez ishga tushish)
      ↓
  TurboFan → Machine Code (tez bajarish)
      ↓
  Protsessor bajaradi

Nima uchun bu muhim?

Siz yozgan for sikli birinchi marta sekinroq ishlaydi. Lekin V8 uni kuzatadi — "bu sikl ko'p marta chaqirilyapti, optimizatsiya qilaman" — va keyingi safar tezroq ishlaydi. Bu JIT (Just-In-Time) compilation deyiladi.

Call Stack — kod qanday tartibda bajariladi?

JavaScript bitta thread da ishlaydi — bir vaqtda faqat bitta ish qiladi. Bu ishlarni tartibga solish uchun Call Stack ishlatiladi.

Call Stack — bu navbat emas, stek (oxirgi kirgan birinchi chiqadi — LIFO).

function greet(name) {
  return "Salom, " + name;
}

function main() {
  const msg = greet("Ali");
  console.log(msg);
}

main();

Call Stack qanday ishlaydi:

1. main() chaqirildi → stackga qo'shildi
   [main]

2. greet("Ali") chaqirildi → stackga qo'shildi
   [main, greet]

3. greet tugadi → stackdan chiqdi
   [main]

4. console.log() chaqirildi → stackga qo'shildi
   [main, console.log]

5. console.log tugadi → stackdan chiqdi
   [main]

6. main tugadi → stackdan chiqdi
   []

Agar stek to'lib ketsa — Stack Overflow xatosi chiqadi. Masalan, o'zini chaqiradigan funksiya:

function infinite() {
  infinite(); // o'zini chaqiradi
}
infinite(); // RangeError: Maximum call stack size exceeded

JavaScript va boshqa tillar — asosiy farq

JavaScript dinamik tipli til — o'zgaruvchi turini oldindan belgilash shart emas, u avtomatik aniqlanadi.

let x = 5;       // x — raqam
x = "salom";     // x — endi matn, xato yo'q
x = true;        // x — endi boolean, xato yo'q

Java yoki C++ da bu xato beradi. JavaScript da — yo'q. Bu erkinlik beradi, lekin xatolarni topishni qiyinlashtiradi. Shu sababli TypeScript yaratilgan — JavaScript ustiga tip xavfsizligi qo'shadi.

Tez-tez uchraydigan xatolar

<script> ni <head> ga qo'yish:

<!-- ❌ Yomon — HTML yuklanmasdan script ishlaydi -->
<head>
  <script src="script.js"></script>
</head>

<!-- ✅ Yaxshi — HTML to'liq yuklanib bo'lgach script ishlaydi -->
<body>
  ...
  <script src="script.js"></script>
</body>

Sababi: script document.getElementById("btn") desa — lekin HTML hali yuklanmagan, element yo'q — null qaytadi, xato chiqadi.

defer va async ni bilmaslik:

<!-- defer — HTML yuklanib bo'lgach ishlaydi, tartibni saqlaydi -->
<script src="script.js" defer></script>

<!-- async — yuklanishi bilan ishlaydi, tartib kafolatlanmaydi -->
<script src="script.js" async></script>

Zamonaviy loyihalarda defer ko'p ishlatiladi.

Xulosa

JavaScript — veb sahifaga interaktivlik beruvchi dasturlash tili. Brauzer uni V8 Engine orqali bajaradi: parsing → bytecode → mashina kodi. JIT compilation tufayli vaqt o'tishi bilan tezlashadi.

Call Stack — kodning bajarilish tartibi. JavaScript bitta thread da ishlaydi — bir vaqtda bitta ish.

Bugun JavaScript faqat brauzer bilan cheklanmaydi — Node.js, React Native, Electron orqali server, mobil va desktop ilovalar ham yoziladi.

Keyingi dars

2-dars: O'zgaruvchilar — var, let, const va ularning farqi