IIFE — Immediately Invoked Function Expression

~10 daq · JavaScript · Funksiyalar chuqurroq

Muammodan boshlaylik

Eski JavaScript da modullar yo'q edi. Barcha kod global scope da ishlardi. Bir kutubxona data degan o'zgaruvchi e'lon qilsa, boshqa kutubxona ham data e'lon qilsa — biri ikkinchisini bosib ketardi.

IIFE bu muammoni hal qildi — kodni o'z "qobig'i" ichiga o'rab, global scope ni ifloslantirmasdan.

IIFE nima?

IIFE — e'lon qilinishi bilan darhol chaqiriladigan funksiya. Ikki qism: funksiya ifodasi va uni darhol chaqiruvchi ().

(function() {
  const ichki = "Bu tashqarida ko'rinmaydi";
  console.log("IIFE ishladi!");
})();
// "IIFE ishladi!"

console.log(ichki); // ❌ ReferenceError — tashqarida yo'q

Qavslar (function(){...}) — funksiyani ifoda sifatida ko'rsatadi. Oxiridagi () — darhol chaqiradi.

Hayotiy o'xshatma

Bir martalik paket. Mahsulot fabrikadan chiqadi, ishlatiladi, paket tashlanadi. Paket ichidagi narsa tashqariga chiqmaydi. IIFE — bir martalik ishlaydigan, o'z scope ini yaratadigan "paket".

Arrow function bilan

(() => {
  const sozlama = "maxfiy";
  console.log(sozlama);
})();

Parametr va qaytish qiymati

IIFE parametr qabul qilishi va qiymat qaytarishi mumkin:

const natija = (function(a, b) {
  return a + b;
})(3, 5);

console.log(natija); // 8

Nima uchun shunday?

Nima uchun hozir kamroq ishlatiladi?

ES6 modullar (import/export) va block scope (let/const) IIFE ning asosiy muammolarini hal qildi:

// Eski usul — IIFE bilan izolyatsiya
(function() {
  var maxfiy = "sir";
})();

// Zamonaviy usul — modul
// fayl.js
const maxfiy = "sir"; // boshqa fayllar ko'rmaydi
export function ochiq() { return maxfiy; }

Qachon hali ham ishlatiladi?

Bir martalik sozlash kodi:

const config = (() => {
  const env = process.env.NODE_ENV;
  return {
    debug: env !== "production",
    apiUrl: env === "production" ? "https://api.example.com" : "http://localhost:3000",
  };
})();

Asinxron IIFE — top-level await bo'lmagan muhitlarda:

(async () => {
  const data = await fetch("/api/data").then(r => r.json());
  console.log(data);
})();

Tez-tez uchraydigan xatolar

Qavslarni unutish:

function() { console.log("salom"); }(); // ❌ SyntaxError

(function() { console.log("salom"); })(); // ✅

IIFE ni zamonaviy kodda keraksiz ishlatish:

// ❌ ES6+ da keraksiz
(function() {
  const x = 5;
  console.log(x);
})();

// ✅ oddiy block scope yetarli
{
  const x = 5;
  console.log(x);
}

Xulosa

IIFE — e'lon qilinishi bilan darhol chaqiriladigan funksiya. O'z scope ini yaratadi, global scope ni ifloslantirmaydi.

Zamonaviy JavaScript da ES modullar va let/const tufayli kamroq kerak. Lekin bir martalik sozlash va asinxron IIFE hali ham ishlatiladi.

Keyingi dars

17-dars: Ob'ektlar — yaratish, o'qish, o'zgartirish, o'chirish