Import և Export խորությամբ՝ Named, Default, Dynamic Import

JavaScript-ի մոդուլային համակարգը դարձրել է կոդի կազմակերպումը շատ ավելի հարմար։ import և export հրահանգները թույլ են տալիս տեղափոխել ֆունկցիաներ, օբյեկտներ կամ ամբողջ մոդուլներ ֆայլից ֆայլ։ Եկե՛ք մանրամասնորեն ուսումնասիրենք՝ ինչ տարբերակներ կան։

---

Named Export և Import

Named Export նշանակում է, որ մենք արտահանում ենք կոնկրետ անունով փոփոխականներ կամ ֆունկցիաներ։ Երբ ներմուծում ենք, պետք է օգտագործել հենց այդ անունը։

  
// math.js
export function add(a, b) {
  return a + b;
}

export function subtract(a, b) {
  return a - b;
}
  

  
// app.js
import { add, subtract } from './math.js';

console.log(add(5, 3));       // 8
console.log(subtract(5, 3));  // 2
  

Կարևոր․ Անունները պետք է համընկնեն։ Կարող ես օգտագործել as բանալի բառը՝ անունը փոխելու համար։

  
// Rename imports
import { add as addition } from './math.js';

console.log(addition(5, 3)); // 8
  

---

Default Export և Import

Default Export նշանակում է, որ մի ֆայլում արտահանվում է միայն մեկ հիմնական արժեք։ Ներմուծելիս կարող ես օգտագործել ցանկացած անուն։

  
// logger.js
export default function log(message) {
  console.log('Log: ' + message);
}
  

  
// app.js
import log from './logger.js';

log('Բարև աշխարհ'); // Log: Բարև աշխարհ
  

Կարևոր․ Default export-ը ներմուծելիս անունը կարող է ազատ ընտրվել՝ քանի որ այն գլխավոր արտահանումն է ֆայլի։

---

Mixed Export

Միևնույն ֆայլում կարելի է ունենալ և default export, և named export-ներ։

  
// user.js
export default function createUser(name) {
  return { name };
}

export const admin = { name: 'Admin' };
  

  
// app.js
import createUser, { admin } from './user.js';

console.log(createUser('Anna')); // { name: 'Anna' }
console.log(admin);              // { name: 'Admin' }
  

---

Dynamic Import (Lazy Loading)

Dynamic Import նշանակում է, որ մենք կարող ենք ներմուծել մոդուլները միայն այն ժամանակ, երբ դրանք իրականում անհրաժեշտ են։ Սա թույլ է տալիս փոքրացնել սկզբնական բեռը և բարելավել կատարման արագությունը։

  
// dynamic.js
export function dynamicHello() {
  console.log('Բարև դինամիկ աշխարհից!');
}
  

  
// app.js
async function loadDynamic() {
  const module = await import('./dynamic.js');
  module.dynamicHello();
}

loadDynamic();
  

Կարևոր․ Dynamic import-ը վերադարձնում է Promise, և սովորաբար օգտագործվում է async/await-ով։

---

Եզրակացություն

JavaScript-ի import և export մեխանիզմները տալիս են հզոր գործիքներ կոդը կազմակերպելու և օպտիմիզացնելու համար։ Երբ հասկանում ես տարբերություն named, default և dynamic import-ների միջև, կկարողանաս գրել ավելի մաքուր, օպտիմալ և մասնագիտացված կոդ։